nuxt3-SEO篇
通过Nuxt提供的强大的head config，组合式函数和组件来提升你的网站的的SEO。
App Head
在nuxt.config.ts配置文件中，可以通过app.head属性来定制化你的网站的head信息。
::: alertinfo
这种方式并不支持响应式数据。如果你需要全局的响应式数据的话，你可以在app.vue中使用useHead接口
:::
对于下列的头部信息，nuxt提供了默认值，没有特殊需要，你没必须自己设置。 当然有必须的话，你也可以自己更改这此信息。
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-16',
viewport: 'width=500, initial-scale=1',
title: 'My App',
meta: [
// <meta name="description" content="My amazing site">
{ name: 'description', content: 'My amazing site.' }
],
}
}
})
组合式函数: useHead
使用useHead可以管理你项目中的head中的标签。这种方式更灵活，支持响应式的设置。Nuxt内部是使用@vueuse/head来实现此功能的。
和所有的其它组合式函数样，你只能在组件中的setup和生命周期中的钩子中使用此接口。
示例：
<script setup lang="ts">
useHead({
title: 'My App',
meta: [
{ name: 'description', content: 'My amazing site.' }
],
bodyAttrs: {
class: 'test'
},
script: [ { children: 'console.log(\'Hello world\')' } ]
})
</script>
组件
Nuxt提供了<Title>, <Base>,<NoScript>,<Meta>, <Link>,<Body>,<Html>和<Head>等组件让你在组件中方便的设置和更改你项目中的metadata。
由于这些组件名与原生的HTML中的一些元素一样，所以你在template中使用时，一定要注意大写。
<Head> 和<Body>可以内部包含元标签(meta tags)。但对最终渲染成的HTML中的嵌套元标签没有什么影响 。
示例:
<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>
类型
interface MetaObject {
title?: string
titleTemplate?: string | ((title?: string) => string)
base?: Base
link?: Link[]
meta?: Meta[]
style?: Style[]
script?: Script[]
noscript?: Noscript[];
htmlAttrs?: HtmlAttributes;
bodyAttrs?: BodyAttributes;
}
你可以在useHead, app.head和组件中使用上面这么类型的元数据。
特色
响应式
所有的属性都是支持响应式的。你可以使用refs和reactive来设置和修改这些属性。
例如:
<!-- 使用useHead -->
<script setup lang="ts">
const desc = ref('My amazing site.')
useHead({
meta: [
{ name: 'description', content: desc }
],
})
</script>
使用组件
<script setup>
const desc = ref('My amazing site.')
</script>
<template>
<div>
<Meta name="description" :content="desc" />
</div>
</template>
标题模板
你可以使用titleTemplate这个可选项，这个可以提供一个动态的模板来定制化你的网站的标题。例如给每个页面的头部添加网站名。
titleTemplate可以是一个字符串，字符串中的%s可以被标题替换。 也可以是一个函数。
如果你想使用函数，那你就不能在nuxt.config配置文件中去设置了，推荐在app.vue文件中去设置，这样就可以将此模板应用到全部页面了。
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
</script>
Body 标签
你可以在link和script元标签中添加body: true可选项，这样这些元标签就将被添加到<body>标签的最后面。
例如:
<script setup lang="ts">
useHead({
script: [
{
src: 'https://third-party-script.com',
body: true
}
]
})
</script>
示例
definePageMeta使用示例
在你的page/目录下，你可以基于当前路由使用definePageMeta来设置元信息。
例如:
<!-- pages/some-page.vue -->
<script setup>
definePageMeta({
title: 'Some Page'
})
</script>
这些信息会在项目的构建编译阶段被提取，你不能动态设置这些信息。
通过上面的设置后，你就就可以在布局文件中使用这些路由信息了。
<!-- layouts/default.vue -->
<script setup>
const route = useRoute()
useHead({
meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})
</script>
添加动态标题
使用titleTemplate添加动态的标题
<!-- app.vue -->
<script setup>
useHead({
// as a string,
// where `%s` is replaced with the title
titleTemplate: '%s - Site Title',
// ... or as a function
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
}
})
</script>
添加外部的CSS
<!-- 使用useHead -->
<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>
<!-- 使用组件的方式 -->
<template>
<div>
<Link rel="preconnect" href="https://fonts.googleapis.com" />
<Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
</div>
</template>
版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt3-SEO篇
