Nuxt详解 —— 设置seo以及元数据

核心

用头部设置、组合式函数和组件提升Nuxt应用的SEO。

Nuxt的头部标签管理由Unhead提供支持。

提供了合理的默认值、多个强大的组合式函数以及众多配置选项。

管理应用的头部和SEO元数据标签。

Nuxt 配置

在nuxt.config.ts中提供app.head属性，可以静态地为整个应用定制头部。

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

在这里设置不会更改的标签是个好习惯

ts 复制代码

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

默认标签

Nuxt默认提供了一些标签，以确保你的网站开箱即用效果良好：

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

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

ts 复制代码

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

useHead

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

html 复制代码

// app.vue

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

用useHead和useHeadSafe组合式函数。

useSeoMeta

useSeoMeta组合式函数允许你以对象形式定义站点的SEO元数据标签，并提供完整地类型安全。

可以帮助避免拼写错误和常见错误，如用name而不是property。

html 复制代码

// app.vue
<script setup lang="ts">
useSeoMeta({
    title: '我的精彩网站',
    ogTitle: '我的精彩网站',
    description: '这里我的精彩网站，让我为你详细介绍。',
    ogImage: 'https://example.com/image.png',
    twitterCard: 'summary_large_image',
})
</script>

API - Composables - Use Seo Meta.

组件

虽然在所有情况下都推荐使用useHead，但可能更喜欢在模版中用组件去定义头部标签。

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

<Head>和<Body>可以接受嵌套的元数组标签（出于美观考虑），但这不会影响嵌套元数据标签在最终HTML中的渲染位置。

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>
              body { background-color: green; }
          </Style>
      </Head>
      
      <h1>{{ title }}</h1>
  </div>
</template>

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

类型

以下是用于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/vue

功能

响应式

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

ts 复制代码

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

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

标题模版

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

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

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

// useHead

ts 复制代码

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

现在，如果你在站带你其他页面使用useHead将标题设置为我的页面，浏览器标签中的标题将显示为"我的页面- 站点标题"。你也可以传递null以默认显示"站点标题"。

模版参数

你可以使用templateParams在titleTemplate中提供除默认%s之外的额外占位符，从而实现更动态的标题生成。

ts 复制代码

// useHead

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

Body 标签

对于适用的标签，你可以使用tagPosition: 'bodyClose'选项将它们追加到<body>标签的末尾。

例如：

ts 复制代码

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

示例

使用 definePageMeta

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

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

html 复制代码

// pages/some-page.vue

<script setup lang="ts">
definePageMeta({
  title: '某个页面'
})
</script>

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

html 复制代码

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

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

动态标题

titleTemplate被设置为带有%s占位符的字符串或一个函数，这为Nuxt应用的每个路由动态设置页面标题提供了更大的灵活性：

html 复制代码

// app.vue

<script setup lang="ts">
useHead({
    // 作为字符串
    // 其中 `%s` 会被标题替换
    titleTemplate: '%s - 站点标题',
})
</script>

html 复制代码

// app.vue
<script setup lang="ts">
useHead({
  // 作为字符串
  // 其中 `%s` 会被标题替换
  titleTemplate: '%s - 站点标题',
})
</script>

html 复制代码

// app.vue
<script setup lang="ts">
useHead({
    // 或作为函数
    titleTemplate: (productCategory) => {
        return productCategory 
            ? `${productCategory} - 站点标题`
            : '站点标题'
    }
})
</script>

nuxt.config也可以用来设置页面标题。然而，nuxt.config不允许动态设置页面标题。因此，建议在app.vue文件中使用titleTemplate来添加动态标题，然后将其应用于Nuxt应用的所有路由。

外部CSS

展示了如何用useHead组合式函数的link属性或使用<link>组件启用Google Fonts：

ts 复制代码

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