SEO 和元数据

利用强大的头部配置、可组合函数和组件改进您的 Nuxt 应用程序的 SEO。

Nuxt 头部标签管理由Unhead提供支持。它提供合理的默认值、几个强大的可组合函数和众多的配置选项，以管理您应用程序的头部和 SEO 元标签。

Nuxt 配置

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

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

在此处设置不会更改的标签，例如您的站点标题默认值、语言和网站图标，是一个很好的做法。

nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt', // default fallback title
      htmlAttrs: {
        lang: 'en',
      },
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ],
    },
  },
})

您还可以提供 类型 中列出的任何键。

默认标签

Nuxt 默认提供了一些标签，以确保您的网站开箱即用。

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

虽然大多数站点不需要覆盖这些默认值，但您可以使用键控快捷方式更新它们。

nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      // update Nuxt defaults
      charset: 'utf-16',
      viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
    },
  },
})

useHead

useHead 可组合函数支持响应式输入，允许您以编程方式管理头部标签。

app/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 可组合函数允许您将站点的 SEO 元标签定义为具有完整类型安全的对象。

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

app/app.vue
<script setup lang="ts">
useSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>
在文档 > 4 X > API > 可组合函数 > Use Seo Meta中阅读更多内容。

组件

虽然在所有情况下都建议使用 useHead，但您可能更喜欢使用组件在模板中定义头部标签。

Nuxt 为此提供了以下组件：<Title>、<Base>、<NoScript>、<Style>、<Meta>、<Link>、<Body>、<Html> 和 <Head>。请注意这些组件的大写，以确保我们不会使用无效的本地 HTML 标签。

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

app/app.vue
<script setup lang="ts">
const title = ref('Hello World')
</script>

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

    <h1>{{ title }}</h1>
  </div>
</template>

建议将您的组件包装在 <Head> 或 <Html> 组件中，因为这样标签的去重会更直观。

类型

以下是用于 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/vue获取更详细的类型。

功能

响应性

所有属性都支持响应性，通过提供计算值、getter 或响应式对象。

<script setup lang="ts">
const description = ref('My amazing site.')

useHead({
  meta: [
    { name: 'description', content: description },
  ],
})
</script>

标题模板

您可以使用 titleTemplate 选项为您的站点标题提供动态模板。例如，您可以将站点名称添加到每个页面的标题中。

titleTemplate 可以是字符串，其中 %s 将被标题替换，也可以是函数。

如果您想使用函数（以获得完全控制），则不能在 nuxt.config 中设置。建议改为在 app.vue 文件中设置，它将应用于您站点的所有页面

<script setup lang="ts">
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'
  },
})
</script>

现在，如果您在您站点的另一个页面上使用 useHead 将标题设置为 My Page，则标题将在浏览器标签中显示为“My Page - Site Title”。您也可以传递 null 以默认显示“Site Title”。

模板参数

您可以使用 templateParams 在您的 titleTemplate 中提供除了默认 %s 之外的附加占位符。这允许更动态的标题生成。

<script setup lang="ts">
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName'
  },
  templateParams: {
    siteName: 'Site Title',
    separator: '-',
  },
})
</script>

Body 标签

您可以在适用标签上使用 tagPosition: 'bodyClose' 选项，将它们附加到 <body> 标签的末尾。

例如

<script setup lang="ts">
useHead({
  script: [
    {
      src: 'https://third-party-script.com',
      // valid options are: 'head' | 'bodyClose' | 'bodyOpen'
      tagPosition: 'bodyClose',
    },
  ],
})
</script>

示例

与 definePageMeta 结合使用

在您的 app/pages/ 目录中，您可以将 definePageMeta 与 useHead 结合使用，根据当前路由设置元数据。

例如，您可以首先设置当前页面标题（这在构建时通过宏提取，因此无法动态设置）

pages/some-page.vue
<script setup lang="ts">
definePageMeta({
  title: 'Some Page',
})
</script>

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

layouts/default.vue
<script setup lang="ts">
const route = useRoute()

useHead({
  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }],
})
</script>
在 文档 > 4 X > 示例 > 特性 > 元标签中阅读和编辑实时示例。
在 文档 > 4 X > 指南 > 目录结构 > 应用 > 页面 > #页面元数据中阅读更多内容。

动态标题

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

app/app.vue
<script setup lang="ts">
useHead({
  // as a string,
  // where `%s` is replaced with the title
  titleTemplate: '%s - Site Title',
})
</script>
app/app.vue
<script setup lang="ts">
useHead({
  // 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 字体

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