SEO 和 Meta
使用强大的头部配置、组合函数和组件来提升你的 Nuxt 应用的 SEO。
默认值(全局)
Nuxt 提供了合理的默认值，如果需要的话，你可以进行覆盖。
js
export default defineNuxtConfig({
app: {
head: {
charset: "utf-8",
viewport: "width=device-width, initial-scale=1",
},
},
});在你的 nuxt.config.ts 文件中提供 app.head 属性，可以自定义整个应用的头部。
bash
该方法不允许你提供响应式数据。我们建议在 `app.vue` 中使用 `useHead()`。useHead(自定义)
useHead 组合函数允许你以编程和响应式的方式管理头部标签，它由 Unhead 提供支持。
html
<script setup lang="ts">
useHead({
title: "我的应用",
meta: [{ name: "description", content: "我的神奇网站。" }],
bodyAttrs: {
class: "test",
},
script: [{ innerHTML: "console.log('Hello world')" }],
});
</script>附加位置
你可以在适用的标签上使用 tagPosition: 'bodyClose' 选项将它们附加到 <body> 标签的末尾。
例如：
html
<script setup lang="ts">
useHead({
script: [
{
src: "https://third-party-script.com",
// 有效选项为：'head' | 'bodyClose' | 'bodyOpen'
tagPosition: "bodyClose",
},
],
});
</script>useSeoMeta
useSeoMeta 组合函数允许你将站点的 SEO 元标签定义为一个扁平的对象，并提供完整的 TypeScript 支持
html
<script setup lang="ts">
useSeoMeta({
title: "我的神奇网站",
ogTitle: "我的神奇网站",
description: "这是我的神奇网站，让我来告诉你关于它的一切。",
ogDescription: "这是我的神奇网站，让我来告诉你关于它的一切。",
ogImage: "https://example.com/image.png",
twitterCard: "summary_large_image",
});
</script>类型
js
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;
}标题模板
你可以使用 titleTemplate 选项来提供一个动态模板，以自定义站点的标题，例如在每个页面的标题中添加站点名称。
titleTemplate 可以是一个字符串，其中 %s 会被标题替换，也可以是一个函数。
如果你想使用一个函数（以获得更多的控制），那么它不能在 nuxt.config 中设置，而是建议在 app.vue 文件中设置，这样它将适用于你站点上的所有页面：
html
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - 网站名称` : "网站名称";
},
});
</script>组件(少)
Nuxt 提供了<Title>、<Base>、<NoScript>、<Style>、<Meta>、<Link>、<Body>、<Html>和<Head>组件，让你可以直接在组件的模板中与元数据进行交互。
由于这些组件名称与原生 HTML 元素相匹配，在模板中将它们大写非常重要。
<Head> 和 <Body> 可以接受嵌套的元标签（出于美观的原因），但这对最终 HTML 中嵌套的元标签的渲染位置没有影响。
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>