Nuxt i18n 模块 提供了 useLocaleHead 组合函数。调用此组合函数会返回一个可以用于生成 SEO 元数据的函数，以优化应用中与区域相关的方面，以便于搜索引擎识别。
以下是它所启用的具体优化和功能：
<html> 标签的 lang 属性hreflang 备用链接生成要利用 SEO 优势，您必须将 locales 选项配置为一个对象数组，其中每个对象都有一个 language 选项，设置为相应的区域语言标签：
export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
language: 'en-US'
},
{
code: 'es',
language: 'es-ES'
},
{
code: 'fr',
language: 'fr-FR'
}
]
}
})
您还必须将 baseUrl 选项设置为您的生产域名，以便使备用 URL 完全合格：
export default defineNuxtConfig({
i18n: {
baseUrl: 'https://my-nuxt-app.com'
}
})
（请注意，baseUrl 也可以设置为一个函数。请查看 baseUrl 文档。）
useLocaleHead 是一个组合函数，调用该组合函数会返回一个处理由 头部管理 的元数据的函数，该头部管理与 Nuxt 集成。可以在 Nuxt 的各个位置通过 setup 函数指定该元数据：
要启用 SEO 元数据，在上述指定的某个位置声明一个 setup 函数，并使其返回 useLocaleHead 函数调用的结果。
为了避免代码重复，建议在 布局组件 中使用 Meta 组件 全局设置，并在每个页面的 Vue 组件中覆盖某些值，如 definePageMeta，如有必要。
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
查看您可以传递给 useLocaleHead 的选项，详见 API 文档
就这些！
如果您还想添加自己的元数据，您必须调用 useHead。当您使用附加元数据调用 useHead 时，useHead 将与已经定义的全局元数据合并。
<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 的更多信息export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
language: 'en-US' // 默认将用作“补救”区域
},
{
code: 'gb',
language: 'en-GB'
}
]
}
})
isCatchallLocale 选择另一个区域的示例：export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
language: 'en-US'
},
{
code: 'gb',
language: 'en-GB',
isCatchallLocale: true // 这个将作为补救区域使用
}
]
}
})
en 区域 language，那它将被用作“补救”区域，无需做任何事情。export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'gb',
language: 'en-GB'
},
{
code: 'en',
language: 'en' // 将用作“补救”区域
}
]
}
})
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>