SEO优化和元标记 SEO and Meta

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

默认值

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

  • charset: utf-8
  • viewport: width=device-width, initial-scale=1
nuxt.config.ts
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
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
vue
<script setup lang="ts">
useServerSeoMeta({
  title: '网站标题',
  ogTitle: '网站标题',
  description: '这是我的神奇网站，让我告诉您所有相关信息。',
  ogDescription: '这是我的神奇网站，让我告诉您所有相关信息。',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

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

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

useSeoMeta({
  title,
  description: () => `description: ${title.value}`
})
</script>
相关阅读：`useSeoMeta`

内置组件

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

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

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

app.vue
vue-html
<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 和组件的非响应式类型。

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

特色功能

响应式

在Nuxt中，支持对所有属性使用响应式(Reactivity)机制，包括计算属性(computed)、getter以及响应式对象(reactive)。

建议使用 getter (() => value) 而不是计算属性 (computed(() => value))。

在Vue3中，getter 更加轻量级和更高效，因此它是更好的选择。使用 getter 的语法也更加简单明了。

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

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

标题模版

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

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

如果你想使用一个函数(为了完全控制)，那么这不能在你的 nuxt.config 中设置，建议改为在你的 app.vue 文件中设置它，它将应用于所有页面 在您的网站上：

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

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

Body Tags

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

例如：

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

示例

With definePageMeta

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

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

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

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

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

useHead({
  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})
</script>
案例演示：examples > composables > use-head
相关阅读：dirs > pages > #page-metadata

动态标题

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

app.vue
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 字体：

vue
useHead
vue
<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>
上一篇
路由 Routing
下一篇
Transitions 过渡效果