SEO和Meta
使用强大的头部配置、组合函数和组件来提升你的Nuxt应用的SEO。
默认值
Nuxt提供了合理的默认值，如果需要的话，你可以进行覆盖。
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
}
}
})
在你的 nuxt.config.ts 文件中提供 app.head 属性，可以自定义整个应用的头部。
app.vue 中使用 useHead()。为了使配置更简单，可以使用快捷方式：charset 和 viewport。你还可以在 类型 中提供下面列出的任何键。
useHead
useHead 组合函数允许你以编程和响应式的方式管理头部标签，它由 Unhead 提供支持。
和所有组合函数一样，它只能在组件的 setup 和生命周期钩子中使用。
<script setup lang="ts">
useHead({
title: '我的应用',
meta: [
{ name: 'description', content: '我的神奇网站。' }
],
bodyAttrs: {
class: 'test'
},
script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
</script>
我们建议查看 useHead 和 useHeadSafe 组合函数。
useSeoMeta
useSeoMeta 组合函数允许你将站点的SEO元标签定义为一个扁平的对象，并提供完整的TypeScript支持。
这有助于避免拼写错误和常见错误，比如使用 name 而不是 property。
<script setup lang="ts">
useSeoMeta({
title: '我的神奇网站',
ogTitle: '我的神奇网站',
description: '这是我的神奇网站，让我来告诉你关于它的一切。',
ogDescription: '这是我的神奇网站，让我来告诉你关于它的一切。',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
</script>
组件
Nuxt提供了<Title>、<Base>、<NoScript>、<Style>、<Meta>、<Link>、<Body>、<Html>和<Head>组件，让你可以直接在组件的模板中与元数据进行交互。
由于这些组件名称与原生HTML元素相匹配，在模板中将它们大写非常重要。
<Head> 和 <Body> 可以接受嵌套的元标签（出于美观的原因），但这对最终HTML中嵌套的元标签的渲染位置没有影响。
<script setup lang="ts">
const title = ref('你好，世界')
</script>
<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body { background-color: green; }" />
</Head>
<h1>{{ title }}</h1>
</div>
</template>
类型
下面是用于 useHead、app.head 和组件的非响应式类型。
interface MetaObject {
title?: string
titleTemplate?: string | ((title?: string) => string)
templateParams?: Record<string, string | Record<string, string>>
base?: Base
link?: Link[]
meta?: Meta[]
style?: Style[]
script?: Script[]
noscript?: Noscript[];
htmlAttrs?: HtmlAttributes;
bodyAttrs?: BodyAttributes;
}
更详细的类型信息请参考 @unhead/schema。
功能
响应式
所有属性都支持响应式，包括计算属性、getter 和响应式。
建议使用 getter (() => value) 而不是计算属性 (computed(() => value))。
<script setup lang="ts">
const description = ref('我的神奇网站。')
useHead({
meta: [
{ name: 'description', content: description }
],
})
</script>
标题模板
你可以使用 titleTemplate 选项来提供一个动态模板，以自定义站点的标题，例如在每个页面的标题中添加站点名称。
titleTemplate 可以是一个字符串，其中 %s 会被标题替换，也可以是一个函数。
如果你想使用一个函数（以获得更多的控制），那么它不能在 nuxt.config 中设置，而是建议在 app.vue 文件中设置，这样它将适用于你站点上的所有页面：
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - 网站名称` : '网站名称';
}
})
</script>
现在，如果你在你站点的另一个页面上使用 useHead 将标题设置为 我的页面，在浏览器标签中，标题将显示为 我的页面 - 网站名称。你还可以传递 null 来使用默认的站点标题。
Body 标签
你可以在适用的标签上使用 tagPosition: 'bodyClose' 选项将它们附加到 <body> 标签的末尾。
例如：
<script setup lang="ts">
useHead({
script: [
{
src: 'https://third-party-script.com',
// 有效选项为：'head' | 'bodyClose' | 'bodyOpen'
tagPosition: 'bodyClose'
}
]
})
</script>
示例
使用 definePageMeta
在你的pages/目录下，你可以使用definePageMeta和useHead来根据当前路由设置元数据。
例如，你可以先设置当前页面的标题（这是在构建时通过宏提取的，因此不能动态设置）：
<script setup lang="ts">
definePageMeta({
title: '某个页面'
})
</script>
然后在你的布局文件中，你可以使用之前设置的路由元数据：
<script setup lang="ts">
const route = useRoute()
useHead({
meta: [{ property: 'og:title', content: `应用名称 - ${route.meta.title}` }]
})
</script>
动态标题
在下面的示例中，titleTemplate可以被设置为带有%s占位符的字符串，也可以被设置为一个函数，这样可以更灵活地为你的Nuxt应用的每个路由动态设置页面标题：
<script setup lang="ts">
useHead({
// 作为字符串，
// 其中`%s`会被标题替换
titleTemplate: '%s - 网站标题',
// ... 或者作为一个函数
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - 网站标题`
: '网站标题'
}
})
</script>
nuxt.config也可以用作设置页面标题的替代方法。然而，nuxt.config不允许页面标题是动态的。因此，建议在app.vue文件中使用titleTemplate来添加动态标题，然后应用于你的Nuxt应用的所有路由。
外部CSS
下面的示例展示了如何使用useHead组合式函数的link属性或使用<Link>组件来启用Google Fonts：
<script setup lang="ts">
useHead({
link: [
{
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
crossorigin: ''
}
]
})
</script>