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() 是一个组合函数，调用该组合函数将返回一个用于返回由 Head 管理 的元数据，这些元数据集成在 Nuxt 中。该元数据可以在 Nuxt 的不同地方的 setup 函数中指定：
要启用 SEO 元数据，请在上述指定的某个地方声明一个 setup 函数，并使其返回 useLocaleHead() 函数调用的结果。
为了避免重复代码，建议在 layout components 中使用 Meta Components 全局设置，并根据需要在每个页面的 Vue 组件中覆盖一些值，例如 definePageMeta()。
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
查看您可以传递给 useLocaleHead() 的选项，详见 composable 文档。
就是这样！
如果您还想添加您自己的元数据，您需要调用 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 属性，相当于当前 locale 的 language 值，在 <html> 标签中。hreflang 备用链接<link rel="alternate" hreflang="x"> 标签。地区的 language 值用作 hreflang 值。en-*）。默认情况下，它是提供的第一个区域，但可以通过在您 Nuxt i18n 模块 配置中的特定区域对象上设置 isCatchallLocale 为 true 来选择另一个区域。关于 hreflang 的更多信息。export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
language: 'en-US' // 默认情况下将用作 "catchall" locale
},
{
code: 'gb',
language: 'en-GB'
}
]
}
})
isCatchallLocale 选择另一个区域：export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
language: 'en-US'
},
{
code: 'gb',
language: 'en-GB',
isCatchallLocale: true // 这个将用作通用区域
}
]
}
})
en locale language，它将在不做任何操作的情况下作为“通用”使用。export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'gb',
language: 'en-GB'
},
{
code: 'en',
language: 'en' // 将用作 "catchall" locale
}
]
}
})
og:locale 和 og:locale:alternate 元标签，如 Open Graph 协议 中所定义。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>