nuxt3-SEO篇
通過(guò)Nuxt提供的強(qiáng)大的head config，組合式函數(shù)和組件來(lái)提升你的網(wǎng)站的的SEO。
App Head
在nuxt.config.ts配置文件中，可以通過(guò)app.head屬性來(lái)定制化你的網(wǎng)站的head信息。
::: alertinfo
這種方式并不支持響應(yīng)式數(shù)據(jù)。如果你需要全局的響應(yīng)式數(shù)據(jù)的話，你可以在app.vue中使用useHead接口
:::
對(duì)于下列的頭部信息，nuxt提供了默認(rèn)值，沒(méi)有特殊需要，你沒(méi)必須自己設(shè)置。 當(dāng)然有必須的話，你也可以自己更改這此信息。
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.' }
],
}
}
})
組合式函數(shù): useHead
使用useHead可以管理你項(xiàng)目中的head中的標(biāo)簽。這種方式更靈活，支持響應(yīng)式的設(shè)置。Nuxt內(nèi)部是使用@vueuse/head來(lái)實(shí)現(xiàn)此功能的。
和所有的其它組合式函數(shù)樣，你只能在組件中的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>等組件讓你在組件中方便的設(shè)置和更改你項(xiàng)目中的metadata。
由于這些組件名與原生的HTML中的一些元素一樣，所以你在template中使用時(shí)，一定要注意大寫(xiě)。
<Head> 和<Body>可以內(nèi)部包含元標(biāo)簽(meta tags)。但對(duì)最終渲染成的HTML中的嵌套元標(biāo)簽沒(méi)有什么影響 。
示例:
<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>
類(lèi)型
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和組件中使用上面這么類(lèi)型的元數(shù)據(jù)。
特色
響應(yīng)式
所有的屬性都是支持響應(yīng)式的。你可以使用refs和reactive來(lái)設(shè)置和修改這些屬性。
例如:
<!-- 使用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>
標(biāo)題模板
你可以使用titleTemplate這個(gè)可選項(xiàng)，這個(gè)可以提供一個(gè)動(dòng)態(tài)的模板來(lái)定制化你的網(wǎng)站的標(biāo)題。例如給每個(gè)頁(yè)面的頭部添加網(wǎng)站名。
titleTemplate可以是一個(gè)字符串，字符串中的%s可以被標(biāo)題替換。 也可以是一個(gè)函數(shù)。
如果你想使用函數(shù)，那你就不能在nuxt.config配置文件中去設(shè)置了，推薦在app.vue文件中去設(shè)置，這樣就可以將此模板應(yīng)用到全部頁(yè)面了。
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
</script>
Body 標(biāo)簽
你可以在link和script元標(biāo)簽中添加body: true可選項(xiàng)，這樣這些元標(biāo)簽就將被添加到<body>標(biāo)簽的最后面。
例如:
<script setup lang="ts">
useHead({
script: [
{
src: 'https://third-party-script.com',
body: true
}
]
})
</script>
示例
definePageMeta使用示例
在你的page/目錄下，你可以基于當(dāng)前路由使用definePageMeta來(lái)設(shè)置元信息。
例如:
<!-- pages/some-page.vue -->
<script setup>
definePageMeta({
title: 'Some Page'
})
</script>
這些信息會(huì)在項(xiàng)目的構(gòu)建編譯階段被提取，你不能動(dòng)態(tài)設(shè)置這些信息。
通過(guò)上面的設(shè)置后，你就就可以在布局文件中使用這些路由信息了。
<!-- layouts/default.vue -->
<script setup>
const route = useRoute()
useHead({
meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})
</script>
添加動(dòng)態(tài)標(biāo)題
使用titleTemplate添加動(dòng)態(tài)的標(biāo)題
<!-- 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" />
<Link rel="stylesheet" crossorigin="" />
</div>
</template>
版權(quán)聲明：本文為凸然網(wǎng)站的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：nuxt3-SEO篇
