選擇使用 Nuxt 3 作為網站開發框架的開發者,多數都是為了要使用 SSR 或 SSG 來加強對 SEO 的優化設置,這篇將會講述 Nuxt 提供的幾個組合式函數,來協助我們設置網頁的標題、內文、Meta 等,以此來設置 SEO 或外部連結可能會解析到的標籤與數值內容。
當網站需要做搜尋引擎最佳化 (SEO) 的時候,Meta Tag 這個名詞你一定不能忽略,Meta Tag稱之為元標籤或描述標籤,顧名思義,是來額外描述網頁的資料使用;Meta Tag 通常放置在 HTML 的 中,雖然 Meta Tag 不會直接顯示在網頁上,但對於搜尋引擎的爬蟲來說,是相當重要的一項識別資訊,也是 Facebook 提出的 Open Graph 放置的位置,讓網頁的標題、描述或縮圖等,能正確的被解析顯示出來。
那麼網頁標題與描述,如果正確設定會有什麼樣子的效果呢?舉例來說,Vue3 串接Google OAuth 登入【2022 最新】這篇文章我們可以透過網頁原始碼來查看,可以發現 <title>
與 <meta name="description" … />
都有設定。
搜尋引擎爬蟲在收錄網頁時,就會解析這些標籤來建立索引,我們在使用搜尋資料時,網頁的資訊也就對應著顯示出來,如下圖。
各家的搜尋引擎爬蟲,雖然都有自己解析的規則,不過根據 SEO 的經驗都有大方向能夠依循做建立,此外就是在針對特定的搜尋引擎加強識別標記,遵照官方指引就能讓網站的內容能見度有顯著提升。
OG 是由 Facebook 所提出的設定,全名為 Open Graph Protocol,官方翻譯為「開放社交關係圖」,在設定網站的 Meta 時通常也稱 OG Tag,Facebook 提供了網站管理員分享指南,當初設計的目的是,當網頁中設定了 OG Tag,能讓網頁被分享至社群媒體時,能有呈現更為豐富的內容,例如標題、描述及縮圖等。
舉例來說,當網頁設定了 OG Tag,以連結形式被分享至 Facebook,會呈現如下的資訊,Facebook 會解析網頁內的 OG Tag 將對應的如標題及縮圖等資訊顯示出來。
其中縮圖依照 Facebook 的指引,即是對應網頁中的 <meta property="og:image" ... />
。
不只是在 Facebook 上分享連結會有連結預覽
的效果,也因為大家都遵循著 OG Tag 進行設定,所以在其他主流的社群媒體或通訊軟體等也都有跟進解析。例如,我們使用 LINE 傳送一條連結,也會因為設置了OG Tag 也有成功解析出連結預覽
的效果。
LINE 開發者也有提供一些問答指引可以做參考,連結預覽
與 og:title
、og:description
和 og:image
有著相應的設定關係。
useHead
我們可以使用 Nuxt 3 提供的 useHead
組合式函數,來設定網站的一些標籤或標記,使用方式如下:
<script setup>
useHead({
title: 'Nuxt 3 Blog',
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
charset: 'utf-8',
meta: [
{ name: 'description', content: '這裡是 Nuxt 3 學習筆記 實戰部落格' }
],
bodyAttrs: {
class: 'test'
}
})
</script>
useHead()
函數接受參數的類型如下:
useHead(meta: Computable<MetaObject>): void
interface MetaObject extends Record<string, any> {
charset?: string
viewport?: string
meta?: Array<Record<string, any>>
link?: Array<Record<string, any>>
style?: Array<Record<string, any>>
script?: Array<Record<string, any>>
noscript?: Array<Record<string, any>>
titleTemplate?: string | ((title: string) => string)
title?: string
bodyAttrs?: Record<string, any>
htmlAttrs?: Record<string, any>
}
utf-8
。width=device-width, initial-scale=1
。<meta>
標記,元素中物件的屬性將對應至 的屬性。<link>
標記,元素中物件的屬性將對應至 的屬性。<style>
標記,元素中物件的屬性將對應至 的屬性。<script>
標記,元素中物件的屬性將對應至 的屬性。<noscript>
標記,元素中物件的屬性將對應至 的屬性。標題
。標題
。使用 useHead()
函數設定屬性所傳入的字串或物件可以是具有響應性的變數,當數值變動時,相對應的數值也會一同響應,例如下面的程式碼,可以動態的變更標題或描述。
<script setup>
const title = ref('Nuxt 3 Blog')
const description = ref('這裡是 Nuxt 3 學習筆記 實戰部落格')
useHead({
title,
meta: [
{
name: 'description',
content: description
}
]
})
</script>
我們可以在 app.vue
添加如下程式碼,titleTemplage 中的 %s
將會帶入目前頁面 title
或更上層頁面的 title
屬性。:
<script setup>
const title = ref('Nuxt 3 Blog')
useHead({
title,
titleTemplate: '%s - 首頁',
})
</script>
可以看到網頁的標題變為「Nuxt 3 Blog - 首頁」。
你也可以傳入一個函數來動態的添加網頁的標題。
<script setup>
const title = ref('Nuxt 3 Blog')
useHead({
title,
titleTemplate: (title) => {
return title ? `${title} - 首頁` : '首頁'
}
})
</script>
我可以使用 useHead()
來添加 Google 字體至 link
屬性之中。
<script setup>
useHead({
link: [
{
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
crossorigin: ''
}
]
})
</script>
你也可以使用 useHead()
來插入第三方的 JS。
<script setup>
useHead({
script: [
{
src: 'https://third-party-script.com',
body: true
}
]
})
</script>
Nuxt 提供 <Title>
、<Base>
、<Script>
、<NoScript>
、<Style>
、<Meta>
、<Link>
、<Body>
、<Html>
和 <Head>
,我們可以直接在元件中模板 (Template) 使用這些元件進行設定網頁的屬性及標籤。
因為這些元件名稱與原生 HTML 標記相似,所以記得在模板中使用要開頭為大寫
。
<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="description" />
<Style type="text/css" children="body { background-color: green; }" />
</Head>
<h1>{{ title }}</h1>
</div>
</template>
<script setup>
const title = ref('Nuxt 3 Blog')
const description = ref('這裡是 Nuxt 3 學習筆記 實戰部落格')
</script>
definePageMeta()
我們其實在前面的文章中就有使用過 definePageMeta()
來設置頁面的布局或中間件,在各個頁面之中,我們也可以使用 definePageMeta()
來設置一些屬性與 useHead()
進行搭配。
例如,我們的 app.vue
使用 useHead
設定的一個 meta,並且是根據 route.meta.title
所動態的設定。
<script setup>
const route = useRoute()
useHead({
meta: [{ name: 'og:title', content: `${route.meta.title} | Nuxt 3 Blog` }]
})
</script>
我們在 ./pages/articles
添加如下程式碼:
<script setup>
definePageMeta({
title: '所有文章'
})
</script>
當我們瀏覽 /articles
頁面時,Nuxt 在伺服器端就幫我們渲染好 og:title
的 meta 了。我們可以透過檢視原始碼的方式來看看效果。
最後,我們為這個系列實作的部落格文章添加 Meta,調整 ./pages/articles/[id].vue
檔案,添加以下程式碼:
<script setup>
// ...
useHead({
meta: [
{ name: 'description', content: `${article.value.summary} | Nuxt 3 Blog` },
{ name: 'keywords', content: `${article.value.tags}` },
{ property: 'og:title', content: `${article.value.title} | Nuxt 3 Blog` },
{ property: 'og:description', content: article.value.summary },
{ property: 'og:image', content: article.value.cover }
],
title: `${article.value.title} | Nuxt 3 Blog`
})
</script>
其中 article
是我們從 Server API 回傳的指定貼文的資料並具有響應性,最後看看成果。
在 Nuxt 3 提供了一些可以設置網頁屬性與 Meta 的組合式函數,更能動態的調整與響應,結合 SSR 讓這些標記在伺服器端就能渲染出來,對網站做搜尋引擎最佳化 (SEO) 非常得友善,也是多數人選擇 Nuxt 3 來處理 SSR 與 SEO 的原因。除了 SEO 可能會使用到的的標記外,也有 OG Tag 可以加強網頁的連結預覽效果,雖然 OG Tag 與 SEO 沒有絕對的關係,但是透過伺服器端渲染調整這些 Meta 對搜尋引擎或網站都非常的方便,我們只要根據需求及指引做設定,就能對網站的能見度有所提升。
感謝大家的閱讀,這是我第一次參加 iThome 鐵人賽,請鞭小力一些,也歡迎大家給予建議 :)
如果對這個 Nuxt 3 系列感興趣,可以訂閱接收通知,也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。