SEO 與 Meta
預設值
Nuxt 提供開箱即用的合理預設值，您可以根據需要覆寫它們。
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
}
}
})
在您的 nuxt.config.ts 中提供 app.head 屬性，讓您可以自訂整個應用程式的 head。
app.vue 中使用 useHead()。提供快捷方式可讓設定更簡單：charset 和 viewport。您也可以在類型中提供下方列出的任何鍵。
useHead
useHead composable 函式讓您可以使用由 Unhead 提供支援，以程式化且響應式地管理您的 head 標籤。
與所有 composables 一樣，它只能與元件的 setup 和生命週期掛鉤一起使用。
<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>
我們建議您查看 useHead 和 useHeadSafe composables。
useSeoMeta
useSeoMeta 這個組合式函式允許您以一個扁平物件的形式定義您網站的 SEO meta 標籤，並提供完整的 TypeScript 支援。
這能幫助您避免輸入錯誤和常見的失誤，例如使用 name 而不是 property。
<script setup lang="ts">
useSeoMeta({
title: 'My Amazing Site',
ogTitle: 'My Amazing Site',
description: 'This is my amazing site, let me tell you all about it.',
ogDescription: 'This is my amazing site, let me tell you all about it.',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
</script>
元件
Nuxt 提供了 <Title>、<Base>、<NoScript>、<Style>、<Meta>、<Link>、<Body>、<Html> 和 <Head> 元件，讓您可以直接在元件的模板中與您的 metadata 互動。
由於這些元件名稱與原生 HTML 元素匹配，它們在模板中必須以大寫字母開頭。
<Head> 和 <Body> 可以接受巢狀的 meta 標籤（為了美觀），但這不會影響巢狀 meta 標籤在最終 HTML 中呈現的位置。
<script setup lang="ts">
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; }" ></Style>
</Head>
<h1>{{ title }}</h1>
</div>
</template>
類型
以下是用於 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('My amazing site.')
useHead({
meta: [
{ name: 'description', content: description }
],
})
</script>
標題模板
您可以使用 titleTemplate 選項來提供一個動態模板，以自訂您網站的標題。例如，您可以將您網站的名稱添加到每個頁面的標題中。
titleTemplate 可以是一個字串，其中 %s 會被標題替換，或者是一個函式。
如果您想使用函式（以便完全控制），則無法在您的 nuxt.config 中設定它。建議改為在您的 app.vue 檔案中設定它，這樣它將會套用到您網站的所有頁面。
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
</script>
現在，如果您在您網站的另一個頁面上使用 useHead 將標題設定為 My Page，則在瀏覽器標籤中，標題會顯示為 'My Page - Site Title'。您也可以傳遞 null 來預設為 'Site Title'。
Body 標籤
您可以在適用的標籤上使用 tagPosition: 'bodyClose' 選項，將它們附加到 <body> 標籤的末尾。
例如
<script setup lang="ts">
useHead({
script: [
{
src: 'https://third-party-script.com',
// valid options are: 'head' | 'bodyClose' | 'bodyOpen'
tagPosition: 'bodyClose'
}
]
})
</script>
範例
使用 definePageMeta
在您的 pages/ 目錄中，您可以將 definePageMeta 與 useHead 結合使用，以根據目前的路由設定 metadata。
例如，您可以先設定目前的頁面標題（這會在建置時透過巨集提取，因此無法動態設定）
<script setup lang="ts">
definePageMeta({
title: 'Some Page'
})
</script>
然後在您的版面配置檔案中，您可以使用先前設定的路由 metadata
<script setup lang="ts">
const route = useRoute()
useHead({
meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})
</script>
動態標題
在下面的範例中，titleTemplate 要嘛設定為帶有 %s 佔位符的字串，要嘛設定為 function，這讓您可以更彈性地為 Nuxt 應用程式的每個路由動態設定頁面標題
<script setup lang="ts">
useHead({
// as a string,
// where `%s` is replaced with the title
titleTemplate: '%s - Site Title',
})
</script>
<script setup lang="ts">
useHead({
// or as a function
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
}
})
</script>
nuxt.config 也被用作設定頁面標題的替代方式。但是，nuxt.config 不允許頁面標題是動態的。因此，建議在 app.vue 檔案中使用 titleTemplate 來添加動態標題，然後將其應用於 Nuxt 應用程式的所有路由。
外部 CSS
下面的範例展示了您如何使用 useHead 組合式函式的 link 屬性或使用 <Link> 元件來啟用 Google Fonts
<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>