Nuxt3 中文课程《实战全栈开发简书》限时优惠

SEO和Meta

使用强大的头部配置、组合函数和组件来提升你的Nuxt应用的SEO。

默认值

Nuxt提供了合理的默认值,如果需要的话,你可以进行覆盖。

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

为了使配置更简单,可以使用快捷方式:charsetviewport。你还可以在 类型 中提供下面列出的任何键。

useHead

useHead 组合函数允许你以编程和响应式的方式管理头部标签,它由 Unhead 提供支持。

和所有组合函数一样,它只能在组件的 setup 和生命周期钩子中使用。

app.vue
<script setup lang="ts">
useHead({
  title: '我的应用',
  meta: [
    { name: 'description', content: '我的神奇网站。' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
</script>

我们建议查看 useHeaduseHeadSafe 组合函数。

useSeoMeta

useSeoMeta 组合函数允许你将站点的SEO元标签定义为一个扁平的对象,并提供完整的TypeScript支持。

这有助于避免拼写错误和常见错误,比如使用 name 而不是 property

app.vue
<script setup lang="ts">
useSeoMeta({
  title: '我的神奇网站',
  ogTitle: '我的神奇网站',
  description: '这是我的神奇网站,让我来告诉你关于它的一切。',
  ogDescription: '这是我的神奇网站,让我来告诉你关于它的一切。',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>
Read more in Docs > API > Composables > Use Seo Meta.

组件

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

由于这些组件名称与原生HTML元素相匹配,在模板中将它们大写非常重要。

<Head><Body> 可以接受嵌套的元标签(出于美观的原因),但这对最终HTML中嵌套的元标签的渲染位置没有影响。

app.vue
<script setup lang="ts">
const title = ref('你好,世界')
</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>

类型

下面是用于 useHeadapp.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

功能

响应式

所有属性都支持响应式,包括计算属性、getter 和响应式。

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

<script setup lang="ts">
const description = ref('我的神奇网站。')

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

标题模板

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

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

如果你想使用一个函数(以获得更多的控制),那么它不能在 nuxt.config 中设置,而是建议在 app.vue 文件中设置,这样它将适用于你站点上的所有页面:

<script setup lang="ts">
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - 网站名称` : '网站名称';
  }
})
</script>

现在,如果你在你站点的另一个页面上使用 useHead 将标题设置为 我的页面,在浏览器标签中,标题将显示为 我的页面 - 网站名称。你还可以传递 null 来使用默认的站点标题。

Body 标签

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

例如:

<script setup lang="ts">
useHead({
  script: [
    {
      src: 'https://third-party-script.com',
      // 有效选项为:'head' | 'bodyClose' | 'bodyOpen'
      tagPosition: 'bodyClose'
    }
  ]
})
</script>

示例

使用 definePageMeta

在你的pages/目录下,你可以使用definePageMetauseHead来根据当前路由设置元数据。

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

pages/some-page.vue
<script setup lang="ts">
definePageMeta({
  title: '某个页面'
})
</script>

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

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

useHead({
  meta: [{ property: 'og:title', content: `应用名称 - ${route.meta.title}` }]
})
</script>
Read and edit a live example in Docs > Examples > Features > Meta Tags.
Read more in Docs > Guide > Directory Structure > Pages > #page Metadata.

动态标题

在下面的示例中,titleTemplate可以被设置为带有%s占位符的字符串,也可以被设置为一个函数,这样可以更灵活地为你的Nuxt应用的每个路由动态设置页面标题:

app.vue
<script setup lang="ts">
useHead({
  // 作为字符串,
  // 其中`%s`会被标题替换
  titleTemplate: '%s - 网站标题',
  // ... 或者作为一个函数
  titleTemplate: (productCategory) => {
    return productCategory
      ? `${productCategory} - 网站标题`
      : '网站标题'
  }
})
</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>