SEO 基本設置就是 head 標籤裡的 meta 和 title,在 Nuxt3 中有兩種方式可以設定頁面的這些資訊
在環境配置中設定會套用到所有頁面
,以下是 nuxt3 中的預設值:
"charset": "utf-8",
"viewport": "width=device-width, initial-scale=1"
以下是官方文件範例配置:
app: {
head: {
meta: [
// <meta name="viewport" content="width=device-width, initial-scale=1">
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
],
noscript: [
// <noscript>Javascript is required</noscript>
{ children: 'Javascript is required' }
]
}
}
useHead 方法可以在個別頁面的 script 標籤裡面設置,而且也可以做動態配置,以下是官方範例:
<script setup>
const description = ref('My amazing Nuxt app')
useHead({
meta: [
{
name: 'description',
content: description
}
]
// 動態配置
titleTemplate: '%s - Site Title',
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
}
})
</script>
除了可以設定 head 資訊外也可以撰寫 style 或引入外部的 css, js 檔案(就像一般 html 的 head 一樣 ),但是不太建議使用就是了。
style: [
{ children: ':root { color: red }', type: 'text/css' }
],
link: [
{
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
crossorigin: ''
}
],
script: [
{
src: 'https://third-party-script.com',
// body 設置為 true 時會將 script 放在 body 最下方,最後載入
body: true
}
]