文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

SEO and Meta

发布于 2024-04-18 00:42:19 字数 6656 浏览 0 评论 0 收藏 0

通过强大的头部配置、可组合项和组件改进您的 Nuxt 应用程序的 SEO。

默认值

Nuxt 开箱即用，提供合理的默认值，您可以根据需要覆盖这些默认值。

charset: utf-8
viewport: width=device-width, initial-scale=1

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
    }
  }
})

在 nuxt.config.ts 中提供 app.head 属性允许您自定义前往您的整个应用程序。

此方法不允许您提供反应性数据。我们建议在 app.vue 中使用 useHead()。

快捷方式可用于简化配置：charset 和 viewport。您还可以在 Types 中提供下面列出的任何键。

`useHead`

useHead 可组合函数允许您以编程和反应的方式管理您的头部标签，由 Unhead 提供支持。

与所有可组合项一样，它只能与组件“设置”和生命周期挂钩一起使用。

app.vue

<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
</script>

我们建议查看 useHead 和 useHeadSafe 可组合项 .

useSeoMeta

useSeoMeta 和 useServerSeoMeta 可组合项允许您将站点的 SEO 元标记定义为具有完整 TypeScript 支持的平面对象。

这有助于您避免拼写错误和常见错误，例如使用“name”而不是“property”。

在大多数情况下，元数据不需要反应，因为机器人只会扫描初始加载。因此，我们建议将 useServerSeoMeta 用作注重性能的实用程序，它不会在客户端执行任何操作（或返回 head 对象）。

简单示例:

app.vue

<script setup lang="ts">
useServerSeoMeta({
  title: '网站标题',
  ogTitle: '网站标题',
  description: '这是我的神奇网站，让我告诉您所有相关信息。',
  ogDescription: '这是我的神奇网站，让我告诉您所有相关信息。',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

响应式示例: 当插入响应性标签时，您应该使用计算得到的语法 (() => value)：

app.vue

<script setup lang="ts">
const title = ref('网站标题')

useSeoMeta({
  title,
  description: () => `description: ${title.value}`
})
</script>

内置组件

Nuxt 提供<Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html> 和 <Head> 组件，以便您可以直接与组件模板中的元数据进行交互。

因为这些组件名称与原生 HTML 元素相匹配，所以在模板中将它们大写非常重要。

<Head> 和 <Body> 可以接受嵌套元标记（出于审美原因），但这对嵌套元标记在最终 HTML 中呈现的位置没有影响。

app.vue

<script setup>
const title = ref('Hello World')
</script>

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="body { background-color: green; }" />
    </Head>
    <h1>{{ title }}</h1>
  </div>
</template>

Types

以下是用于 useHead、app.head 和组件的非响应式类型。

interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  templateParams?: Record<string, string | Record<string, string>>
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[];
  htmlAttrs?: HtmlAttributes;
  bodyAttrs?: BodyAttributes;
}

有关更详细的类型，请参阅 @unhead/schema。

特色功能

响应式

With `definePageMeta`

在您的 pages/ 目录中，您可以使用 definePageMeta 和 useHead 来根据当前路由设置元数据。

例如，您可以先设置当前页面标题（这是在构建时通过宏提取的，因此不能动态设置）：

pages/some-page.vue

<script setup>
definePageMeta({
  title: 'Some Page'
})
</script>

然后在您的布局文件中，您可以使用您之前设置的路由元数据：

layouts/default.vue

<script setup>
const route = useRoute()

useHead({
  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})
</script>

相关阅读：dirs > pages > #page-metadata

动态标题

在下面的示例中，titleTemplate被设置为带有%s占位符的字符串或function，这样可以更灵活地为 Nuxt 应用程序的每个路由动态设置页面标题：

app.vue

<script setup>
useHead({
  // 作为字符串，其中 %s 被标题替换
  titleTemplate: '%s - Site Title',
  // ... or as a function
  titleTemplate: (productCategory) => {
    return productCategory
      ? `${productCategory} - Site Title`
      : 'Site Title'
  }
})
</script>

nuxt.config 也被用作设置页面标题的替代方法，但是nuxt.config不允许页面标题是动态的。

因此，建议在 app.vue 文件中使用 titleTemplate 来添加一个动态标题，然后将其应用于您的 Nuxt 应用程序的所有路由。

外部 CSS

下面的示例显示了如何使用 useHead 可组合项的 link 属性或使用 <Link> 组件启用 Google 字体：

useHead

<script setup lang="ts">
useHead({
  link: [
    {
      rel: 'preconnect',
      href: 'https://fonts.googleapis.com'
    },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
      crossorigin: ''
    }
  ]
})
</script>

Components

<template>
  <div>
    <Link rel="preconnect" href="https://fonts.googleapis.com" />
    <Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
  </div>
</template>

分享到QQ

分享到微博