SEO 和元数据
使用强大的头部配置、组合式函数和组件，提升您的 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
由 Unhead 提供支持的 useHead 组合式函数允许您以编程方式和响应式地管理头部标签。
与所有组合式函数一样，它只能与组件的 setup 和生命周期钩子一起使用。
<script setup lang="ts">
useHead({
title: 'My App',
meta: [
{ name: 'description', content: 'My amazing site.' }
],
bodyAttrs: {
class: 'test'
},
script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
</script>
我们建议您查看 useHead 和 useHeadSafe 组合式函数。
useSeoMeta
使用 useSeoMeta 组合式函数，您可以将网站的 SEO 元标签定义为一个扁平对象，并提供完整的 TypeScript 支持。
这有助于您避免拼写错误和常见错误，例如使用 name 而不是 property。
<script setup lang="ts">
useSeoMeta({
title: 'My Amazing Site',
ogTitle: 'My Amazing Site',
description: 'This is my amazing site, let me tell you all about it.',
ogDescription: 'This is my amazing site, let me tell you all about it.',
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('Hello World')
</script>
<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body { background-color: green; }" ></Style>
</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('My amazing site.')
useHead({
meta: [
{ name: 'description', content: description }
],
})
</script>
标题模板
您可以使用 titleTemplate 选项提供一个动态模板来自定义网站的标题。例如，您可以将网站名称添加到每个页面的标题中。
titleTemplate 可以是字符串（其中 %s 将被标题替换）或函数。
如果您想使用函数（以获得完全控制），则不能在您的 nuxt.config 中设置它。建议改为在您的 app.vue 文件中设置它，它将应用于您网站上的所有页面。
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
</script>
现在，如果您将标题设置为 My Page，并使用 useHead 在您网站的另一个页面上，则标题将在浏览器选项卡中显示为“My Page - Site Title”。您也可以传递 null 以默认设置为“Site Title”。
正文标签
您可以在适用的标签上使用 tagPosition: 'bodyClose' 选项，将它们附加到 <body> 标签的末尾。
例如
<script setup lang="ts">
useHead({
script: [
{
src: 'https://third-party-script.com',
// valid options are: 'head' | 'bodyClose' | 'bodyOpen'
tagPosition: 'bodyClose'
}
]
})
</script>
示例
使用 definePageMeta
在您的 pages/ 目录 中，您可以使用 definePageMeta 以及 useHead 来根据当前路由设置元数据。
例如，您可以先设置当前页面的标题（这是在构建时通过宏提取的，因此无法动态设置）
<script setup lang="ts">
definePageMeta({
title: 'Some Page'
})
</script>
然后在您的布局文件中，您可以使用之前设置的路由元数据
<script setup lang="ts">
const route = useRoute()
useHead({
meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})
</script>
动态标题
在下面的示例中，titleTemplate 设置为带有 %s 占位符的字符串，或者设置为 function，这允许您更灵活地为 Nuxt 应用程序的每个路由动态设置页面标题
<script setup lang="ts">
useHead({
// as a string,
// where `%s` is replaced with the title
titleTemplate: '%s - Site Title',
})
</script>
<script setup lang="ts">
useHead({
// or as a function
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
}
})
</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>