指南

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({
  addDirAttribute: true,
  identifierAttribute: 'id',
  addSeoAttributes: true
})
const title = computed(() => t(route.meta.title ?? 'TBD', 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.id">
          <Link :id="link.id" :rel="link.rel" :href="link.href" :hreflang="link.hreflang" />
        </template>
        <template v-for="meta in head.meta" :key="meta.id">
          <Meta :id="meta.id" :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 的选项 API 文档

就是这样！

如果您还想添加自己的元数据，您必须调用 useHead。当您使用附加元数据调用 useHead 时，useHead 将与已经定义的全局元数据合并。

pages/about/index.vue

<script setup>
// 定义布局的页面元数据/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 元标签。
规范链接
在所有页面生成 rel="canonical" 链接，以指定应由搜索引擎索引的页面“主”版本。这在各种情况下是有益的：
- 使用 prefix_and_default 策略时，实际上为默认地区生成了两组页面 -- 一组带前缀，另一组不带前缀。规范链接将设置为不带前缀的页面版本，以避免重复索引。
- 当页面包含查询参数时，规范链接将不包含查询参数。这通常是正确的做法，因为各种查询参数可能由跟踪器插入，不应成为规范链接的一部分。通过使用 canonicalQueries 选项可以覆盖此行为。例如：
```
<script setup>
const i18nHead = useLocaleHead({
  addSeoAttributes: {
    canonicalQueries: ['foo']
  }
})
useHead(() => ({
  htmlAttrs: {
    lang: i18nHead.value.htmlAttrs!.lang
  },
  link: [...(i18nHead.value.link || [])],
  meta: [...(i18nHead.value.meta || [])]
}))
</script>
```
更多关于规范

浏览器语言检测

检测用户浏览器的语言。

懒加载翻译

如何懒加载翻译。