SEO 和 Meta 信息 · Nuxt 入门

Nuxt head 标签管理由 Unhead 提供支持。它提供了合理的默认值、几个强大的组合式函数和众多的配置选项，用于管理应用的 head 和 SEO 元标签。

Nuxt 配置

在您的 nuxt.config.ts 中提供 app.head 属性，允许您静态地自定义整个应用的 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 组合式函数支持响应式输入，允许您以编程方式管理 head 标签。

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.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>

在文档 > API > 组合式函数 > Use Seo Meta中阅读更多信息。

组件

虽然建议在所有情况下都使用 useHead，但您可能个人偏好在模板中使用组件来定义 head 标签。

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

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

app.vue

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

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css">
      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”。

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`

在您的 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>

在文档 > 示例 > 功能 > Meta 标签中阅读和编辑实时示例。

在文档 > 指南 > 目录结构 > 页面 > #页面元数据中阅读更多信息。

动态标题

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

app.vue

<script setup lang="ts">
useHead
({
  // as a string,
  // where `%s` is replaced with the title
  titleTemplate
: '%s - Site Title',
})
</script>

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 Fonts

<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>

路由

Nuxt 文件系统路由为 pages/ 目录中的每个文件创建一个路由。

过渡

使用 Vue 或 native browser View Transitions 在页面和布局之间应用过渡效果。