@nuxtjs/i18n 提供了 $nuxtI18nHead 函数，您可以利用它生成 SEO 元数据，以优化应用程序的本地化相关方面，提高搜索引擎的可见性。
以下是它所启用的具体优化和功能：
<html> 标签的 lang 属性hreflang 备用链接生成要利用 SEO 的好处，您必须将 locales 选项配置为一个对象数组，每个对象具有 iso 选项，设置为相应的语言标签：
i18n: {
locales: [
{
code: 'en',
iso: 'en-US'
},
{
code: 'es',
iso: 'es-ES'
},
{
code: 'fr',
iso: 'fr-FR'
}
]
}
您还必须将 baseUrl 选项设置为您的生产域，以确保备用 URL 是完全合格的：
i18n: {
baseUrl: 'https://my-nuxt-app.com'
}
（请注意，baseUrl 也可以设置为函数。请查看 baseUrl 文档）。
$nuxtI18nHead 函数返回的元数据由集成在 Nuxt 中的 Vue Meta 插件处理。该元数据可以在 Nuxt 中的多个地方指定：
nuxt.config.ts) 中的 head() 选项head() 组件选项要启用 SEO 元数据，请在上述指定的某个位置声明一个 head 函数，并使其返回 $nuxtI18nHead 函数调用的结果。
为了避免代码重复，建议在您的 nuxt.config.ts 文件中全局设置该选项，并在必要时根据布局或页面组件覆盖一些值。
export default {
// ...其他 Nuxt 选项...
head() {
return this.$nuxtI18nHead({ addSeoAttributes: true })
}
}
不幸的是，这样的 head() 定义在静态生成 (nuxt generate) 期间可能会崩溃，因为 Nuxt 在生成 fallback 文件的过程中在非 Vue 组件上下文中执行该函数。如果这个问题影响了您，请在调用之前进行 this.$nuxtI18nHead 的空值检查。
查看您可以传递给 $nuxtI18nHead 的选项，详见 API 文档。
就是这样！
如果您还想添加自己的元数据，您必须将您的数据与 $nuxtI18nHead 返回的对象合并。可以根据下面的示例进行合并，或者使用类似 deepmerge 的库来执行两个对象的深度合并。
export default {
// ...其他 Nuxt 选项...
head() {
const i18nHead = this.$nuxtI18nHead({ addSeoAttributes: true })
return {
htmlAttrs: {
myAttribute: 'My Value',
...i18nHead.htmlAttrs
},
meta: [
{
hid: 'description',
name: 'description',
content: 'My Custom Description'
},
...i18nHead.meta
],
link: [
{
hid: 'apple-touch-icon',
rel: 'apple-touch-icon',
sizes: '180x180',
href: '/apple-touch-icon.png'
},
...i18nHead.link
]
}
}
}
<html> 标签的 lang 属性<html> 标签中对应当前语言环境的 iso 值的正确 lang 属性。hreflang 备用链接<link rel="alternate" hreflang="x"> 标签。语言环境的 iso 值用作 hreflang 值。en-*）提供了一个 "catchall" 语言环境的 hreflang 链接。默认情况下，它是提供的第一个语言环境，但可以通过在您的 @nuxtjs/i18n 配置中的特定语言环境对象上设置 isCatchallLocale 为 true 来选择其他语言环境。更多关于 hreflang 的信息i18n: {
locales: [
{
code: 'en',
iso: 'en-US' // 默认情况下将作为 "catchall" 语言环境
},
{
code: 'gb',
iso: 'en-GB'
}
]
}
isCatchallLocale 选择其他语言环境的：i18n: {
locales: [
{
code: 'en',
iso: 'en-US'
},
{
code: 'gb',
iso: 'en-GB',
isCatchallLocale: true // 这个将作为 catchall 语言环境使用
}
]
}
en 语言环境的 iso，它会被用作 "catchall"，无需任何操作。i18n: {
locales: [
{
code: 'gb',
iso: 'en-GB'
},
{
code: 'en',
iso: 'en' // 将作为 "catchall" 语言环境使用
}
]
}
og:locale 和 og:locale:alternate 元标签。rel="canonical" 链接，以指定应由搜索引擎索引的页面的 "主要" 版本。这在各种情况下都是有益的：prefix_and_default 策略时，默认语言环境会生成两组页面 -- 一组带前缀，另一组不带前缀。规范链接将设置为页面的不带前缀版本，以避免重复索引。canonicalQueries 选项来覆盖。例如：export default {
head() {
return this.$nuxtI18nHead({
addSeoAttributes: {
canonicalQueries: ['foo']
}
})
}