SEO 和 Meta
默认设置
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
。你还可以在下面的 Types 中提供任何列出的键。
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 meta 标签定义为具有完整 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>
可以接受嵌套的 meta 标签(出于美观的原因),但这不会影响嵌套的 meta 标签在最终 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; }" ></Style>
</Head>
<h1>{{ title }}</h1>
</div>
</template>
Types
下面是用于 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 或反应式对象。
<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: `App Name - ${route.meta.title}` }]
})
</script>
动态标题
在下面的示例中,你可以根据 Nuxt 应用程序的每个路由动态设置页面标题,titleTemplate
既可以作为包含 %s
占位符的字符串,也可以作为一个接收参数的函数,这样可以为您的 Nuxt 应用程序的每个路由动态设置页面标题:
<script setup lang="ts">
useHead({
// 作为一个字符串,
// 其中 `%s` 会被标题替换
titleTemplate: '%s - 站点标题',
})
</script>
<script setup lang="ts">
useHead({
// 或作为一个函数
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - 站点标题`
: '站点标题'
}
})
</script>
在 nuxt.config
中也可以用作设置页面标题的另一种方式。然而,nuxt.config
不允许页面标题是动态的。因此,建议使用 app.vue
文件中的 titleTemplate
来添加动态标题,这样可以将其应用于 Nuxt 应用程序的所有路由。
外部 CSS
下面的示例展示了如何使用 useHead
组合函数的 link
属性或 <Link>
组件来启用谷歌字体:
<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>