Lzh on GitHub

SEO

调用 `useLocaleHead` 时，@nuxtjs/i18n 会尝试添加一些元数据以改善你的页面 SEO。以下是它的作用。

Nuxt i18n 模块 提供了 useLocaleHead() 可组合函数。调用此可组合函数会返回一个函数，你可以使用该函数生成 SEO 元数据，以优化应用程序的语言环境相关方面，从而更好地被搜索引擎收录。

以下是它启用的具体优化和功能：

  • <html> 标签的 lang 属性
  • hreflang 备用链接生成
  • OpenGraph 语言环境标签生成
  • 规范链接生成

在下面阅读有关这些功能的更多详细信息

要求

要利用 SEO 优势，你必须将 locales 选项配置为对象数组，其中每个对象都设置了 language 选项，其值为语言环境标签：

nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    locales: [
      {
        code: 'en',
        language: 'en-US'
      },
      {
        code: 'es',
        language: 'es-ES'
      },
      {
        code: 'fr',
        language: 'fr-FR'
      }
    ]
  }
})

你还必须将 baseUrl 选项设置为你的生产域名，以使备用 URL 完全限定：

nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    baseUrl: 'https://my-nuxt-app.com'
  }
})

（请注意，baseUrl 也可以设置为函数。查看 baseUrl 文档。）

设置

useLocaleHead() 是一个可组合函数。调用该可组合函数会返回一个函数，该函数返回由 Nuxt 中集成的 Head 管理 处理的元数据。该元数据可以在 Nuxt 中的各个地方的 setup 函数中指定：

  • app.vue
  • pages 目录的 Vue 组件
  • layouts 目录的 Vue 组件

要启用 SEO 元数据，请在上面指定的位置之一声明一个 setup 函数，并使其返回 useLocaleHead() 函数调用的结果。

为了避免代码重复，建议在 布局组件 中使用 Meta 组件 进行全局设置，并在必要时，针对每个页面 Vue 组件覆盖某些值，例如 definePageMeta()。

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

在 可组合文档 中查看可以传递给 useLocaleHead() 的选项

就是这样！

如果你还想添加自己的元数据，你必须调用 useHead()。当你使用额外的元数据调用 useHead() 时，useHead() 会将其与已定义的全局元数据合并。

pages/about/index.vue
<script setup>
// 为 layouts/default.vue 定义页面元数据
definePageMeta({
  title: 'pages.title.about'
})

useHead({
  meta: [{ property: 'og:title', content: '这是关于页面的og标题' }]
})
</script>

<template>
  <h2>{{ $t('pages.about.description') }}</h2>
</template>

功能详情

  • <html> 标签的 lang 属性
    在 <html> 标签中设置正确的 lang 属性，等同于当前语言环境的 language 值。
  • hreflang 备用链接
    为每个配置的语言环境生成 <link rel="alternate" hreflang="x"> 标签。语言环境的 language 值用作 hreflang 值。
    为每个语言环境组（例如 en-*）提供一个“包罗万象”的语言环境 hreflang 链接。默认情况下，它是提供的第一个语言环境，但可以通过在你的 Nuxt i18n 模块 配置中将特定语言对象上的 isCatchallLocale 设置为 true 来选择另一个语言环境。更多关于 hreflang
    一个没有选择“包罗万象”语言环境的示例：
    nuxt.config.ts
    export default defineNuxtConfig({
  i18n: {
    locales: [
      {
        code: 'en',
        language: 'en-US' // 默认将被用作“包罗万象”语言环境
      },
      {
        code: 'gb',
        language: 'en-GB'
      }
    ]
  }
})

    以下是如何使用 isCatchallLocale 选择另一个语言环境：
    nuxt.config.ts
    export default defineNuxtConfig({
  i18n: {
    locales: [
      {
        code: 'en',
        language: 'en-US'
      },
      {
        code: 'gb',
        language: 'en-GB',
        isCatchallLocale: true // 此项将被用作包罗万象的语言环境
      }
    ]
  }
})

    如果你已经设置了 en 语言环境的 language，它将直接被用作“包罗万象”语言环境，无需进行任何操作
    nuxt.config.ts
    export default defineNuxtConfig({
  i18n: {
    locales: [
      {
        code: 'gb',
        language: 'en-GB'
      },
      {
        code: 'en',
        language: 'en' // 将被用作“包罗万象”语言环境
      }
    ]
  }
})
  • OpenGraph 语言环境标签生成
    根据 Open Graph 协议 生成 og:locale 和 og:locale:alternate meta 标签。
  • 规范链接
    在所有页面上生成 rel="canonical" 链接，以指定应由搜索引擎索引的页面的“主”版本。这在各种情况下都有益：
    • 当使用 prefix_and_default 策略时，默认语言环境实际上会生成两组页面——一个带前缀，一个不带前缀。规范链接将设置为页面的无前缀版本，以避免重复索引。
    • 当页面包含查询参数时，规范链接默认不包含查询参数。这通常是正确的做法，因为各种查询参数可以由跟踪器插入，并且不应成为规范链接的一部分。这可以通过使用 canonicalQueries 选项来覆盖。例如：
      <script setup>
const i18nHead = useLocaleHead({ seo: { canonicalQueries: ['foo'] } })
useHead(() => ({
  htmlAttrs: {
    lang: i18nHead.value.htmlAttrs.lang
  },
  link: [...(i18nHead.value.link || [])],
  meta: [...(i18nHead.value.meta || [])]
}))
</script>

    更多关于规范链接