指南

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>

<script setup>
const route = useRoute()
const { t } = useI18n()
const head = useLocaleHead()
const title = computed(() => t(route.meta.title ?? '待定', t('layouts.title'))
);
</script>

<template>
  <div>
    <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir">
      <Head>
        <Title>{{ title }}</Title>
        <template v-for="link in head.link" :key="link.hid">
          <Link :id="link.hid" :rel="link.rel" :href="link.href" :hreflang="link.hreflang" />
        </template>
        <template v-for="meta in head.meta" :key="meta.hid">
          <Meta :id="meta.hid" :property="meta.property" :content="meta.content" />
        </template>
      </Head>
      <Body>
        <slot />
      </Body>
    </Html>
  </div>
</template>

<script setup>
definePageMeta({
  title: 'pages.title.top' // 设置资源键
})

const { locale, locales, t } = useI18n()
const switchLocalePath = useSwitchLocalePath()

const availableLocales = computed(() => {
  return locales.value.filter(i => i.code !== locale.value)
})
</script>

<template>
  <div>
    <p>{{ t('pages.top.description') }}</p>
    <p>{{ t('pages.top.languages') }}</p>
    <nav>
      <template v-for="(locale, index) in availableLocales" :key="locale.code">
        <span v-if="index"> | </span>
        <NuxtLink :to="switchLocalePath(locale.code)">
          {{ locale.name ?? locale.code }}
        </NuxtLink>
      </template>
    </nav>
  </div>
</template>

查看您可以传递给 useLocaleHead() 的选项，详细信息请参见组合文档

就是这样！

如果您还想添加自己的元数据，您必须调用 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 属性
设置正确的 lang 属性，相当于当前区域的 language 值，在 <html> 标签中。

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' // 默认将用作 "catchall" 语言
      },
      {
        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' // 将用作 "catchall" 语言
      }
    ]
  }
})

OpenGraph 语言标签生成
根据 Open Graph 协议的定义生成 og:locale 和 og:locale:alternate 元标签。
规范链接
在所有页面上生成 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>
```
更多关于规范链接的信息

浏览器语言检测

检测用户浏览器的语言。

懒加载翻译

如何懒加载翻译内容。