可以通过配置(head),组合式API和组件这三种方式来提升Nuxt应用的SEO效果。
所谓SEO,一般是通过修改网页的Meta信息,比如标题、描述等,让搜索引擎能够精准了解网页内容,从而提升其索引质量。
Nuxt默认设置了以下Meta信息
chartset
: utf-8
viewpoint
: width=device-width, initial-scale=1
相当于nuxt.config.ts
中的以下配置是默认的:
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
}
}
})
也就是说,通过配置app.head
,可以实现对Meta信息的修改。
app.head
支持以下Meta字段:
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;
}
使用useHead
组合式API,可以让你用编程和响应式的方式支持Meta信息的修改。
和其他所有组合式API一样,useHead
只能在setup
代码块和生命周期勾子(lifecycle hooks)中使用。
<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>
如果属性值是动态的,推荐用useHeadSafe
代替useHead
来移除xss代码。
useSeoMeta
主要用来设置社交Meta信息。这些信息,也可以在app.head.meta
中配置。不过,使用useSeoMeta
可以避免一些常见的拼写错误(支持Typescript类型检测)。
比如,在app.head.meta
中这样配置:
export default defineNuxtConfig({
app: {
head: {
meta: {
property: 'og:title', content: '蜻蜓Nuxt3中文社区'
}
}
}
})
等同于用useSeoMeta
这样写:
<script setup lang="ts">
useSeoMeta({
ogTitle: '蜻蜓Nuxt3中文社区'
})
</script>
大多数情况下,社交Meta信息并不需要在客户端变化。搜索引擎只会抓取服务端渲染时的Meta信息。所以,一般使用useServerSeoMeta
来替代useSeoMeta
。
Nuxt也提供了Meta相关的组件,可以在模板中使用。比如<Title>
, <Meta>
, <Head>
,<Body>
, <Link>
, <Style>
等。
<Head>
和<Body>
可以嵌套其他组件。
<script setup>
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; }" />
</Head>
<h1>{{ title }}</h1>
</div>
</template>
app.head
比较适合全局的,静态不变的Meta信息配置。
useHead
和useHeadSafe
适合在每个页面单独使用。
useSeoMeta
和useServerSeoMeta
适合在入口文件app.vue
中使用以全局地修改整个应用的社交Meta信息。
组件方式看个人爱好,一般不推荐使用。