iT邦幫忙

2022 iThome 鐵人賽

DAY 24
1
Modern Web

Nuxt 3 學習筆記系列 第 24

[Day 24] Nuxt 3 搜尋引擎最佳化 (SEO) 與 HTML Meta Tag

  • 分享至 

  • xImage
  •  

前言

選擇使用 Nuxt 3 作為網站開發框架的開發者,多數都是為了要使用 SSR 或 SSG 來加強對 SEO 的優化設置,這篇將會講述 Nuxt 提供的幾個組合式函數,來協助我們設置網頁的標題、內文、Meta 等,以此來設置 SEO 或外部連結可能會解析到的標籤與數值內容。

搜尋引擎最佳化 (SEO) - 網站的標題 (Title) 與描述 (Description)

當網站需要做搜尋引擎最佳化 (SEO) 的時候,Meta Tag 這個名詞你一定不能忽略,Meta Tag稱之為元標籤描述標籤,顧名思義,是來額外描述網頁的資料使用;Meta Tag 通常放置在 HTML 的 中,雖然 Meta Tag 不會直接顯示在網頁上,但對於搜尋引擎的爬蟲來說,是相當重要的一項識別資訊,也是 Facebook 提出的 Open Graph 放置的位置,讓網頁的標題、描述或縮圖等,能正確的被解析顯示出來。

那麼網頁標題與描述,如果正確設定會有什麼樣子的效果呢?舉例來說,Vue3 串接Google OAuth 登入【2022 最新】這篇文章我們可以透過網頁原始碼來查看,可以發現 <title><meta name="description" … /> 都有設定。
https://ithelp.ithome.com.tw/upload/images/20221009/20152617d7wZaYuOdW.png

搜尋引擎爬蟲在收錄網頁時,就會解析這些標籤來建立索引,我們在使用搜尋資料時,網頁的資訊也就對應著顯示出來,如下圖。
https://ithelp.ithome.com.tw/upload/images/20221009/20152617sdr0uXDOzY.png

各家的搜尋引擎爬蟲,雖然都有自己解析的規則,不過根據 SEO 的經驗都有大方向能夠依循做建立,此外就是在針對特定的搜尋引擎加強識別標記,遵照官方指引就能讓網站的內容能見度有顯著提升。

網站的 Open Graph (OG)

OG 是由 Facebook 所提出的設定,全名為 Open Graph Protocol,官方翻譯為「開放社交關係圖」,在設定網站的 Meta 時通常也稱 OG Tag,Facebook 提供了網站管理員分享指南,當初設計的目的是,當網頁中設定了 OG Tag,能讓網頁被分享至社群媒體時,能有呈現更為豐富的內容,例如標題、描述及縮圖等。

舉例來說,當網頁設定了 OG Tag,以連結形式被分享至 Facebook,會呈現如下的資訊,Facebook 會解析網頁內的 OG Tag 將對應的如標題及縮圖等資訊顯示出來。
https://ithelp.ithome.com.tw/upload/images/20221009/20152617loOcRkjZsz.png

其中縮圖依照 Facebook 的指引,即是對應網頁中的 <meta property="og:image" ... />

image

不只是在 Facebook 上分享連結會有連結預覽的效果,也因為大家都遵循著 OG Tag 進行設定,所以在其他主流的社群媒體或通訊軟體等也都有跟進解析。例如,我們使用 LINE 傳送一條連結,也會因為設置了OG Tag 也有成功解析出連結預覽的效果。
https://ithelp.ithome.com.tw/upload/images/20221009/20152617dHTFMPEseF.png

LINE 開發者也有提供一些問答指引可以做參考,連結預覽og:titleog:descriptionog:image 有著相應的設定關係。
https://ithelp.ithome.com.tw/upload/images/20221009/20152617knhPysJ8YM.png

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>
}
  • charset: 指定 HTML 的字元編碼,預設為 utf-8
  • viewport: 設定網頁的可見區域,預設為 width=device-width, initial-scale=1
  • meta: 接受一個陣列,陣列中的每個元素,都將會建立一個 <meta> 標記,元素中物件的屬性將對應至 的屬性。
  • link: 接受一個陣列,陣列中的每個元素,都將會建立一個 <link> 標記,元素中物件的屬性將對應至 的屬性。
  • style: 接受一個陣列,陣列中的每個元素,都將會建立一個 <style> 標記,元素中物件的屬性將對應至 的屬性。
  • script: 接受一個陣列,陣列中的每個元素,都將會建立一個 <script> 標記,元素中物件的屬性將對應至 的屬性。
  • noscript: 接受一個陣列,陣列中的每個元素,都將會建立一個 <noscript> 標記,元素中物件的屬性將對應至 的屬性。
  • titleTemplage: 接受一個字串或函數,用來動態的設定該頁面元件的網頁標題
  • title: 在頁面元件設置靜態的網頁標題
  • bodyAttrs: 接受一個物件,設置網頁中 標籤的屬性,物件中的屬性將對應至 的屬性。
  • htmlAttrs: 接受一個物件,設置網頁中 標籤的屬性,物件中的屬性將對應至 的屬性。

自訂 Metadata

使用 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 - 首頁」。
https://ithelp.ithome.com.tw/upload/images/20221009/20152617FKTleq5iBh.png

你也可以傳入一個函數來動態的添加網頁的標題。

<script setup>
const title = ref('Nuxt 3 Blog')

useHead({
  title,
  titleTemplate: (title) => {
    return title ? `${title} - 首頁` : '首頁'
  }
})
</script>

添加外部 CSS

我可以使用 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>

添加第三方的 JavaScript

你也可以使用 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:titlemeta 了。我們可以透過檢視原始碼的方式來看看效果。
https://ithelp.ithome.com.tw/upload/images/20221009/201526179ErAGV4Yn1.png

實戰添加 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 回傳的指定貼文的資料並具有響應性,最後看看成果。
https://ithelp.ithome.com.tw/upload/images/20221009/20152617albbASUYwM.png

小結

在 Nuxt 3 提供了一些可以設置網頁屬性與 Meta 的組合式函數,更能動態的調整與響應,結合 SSR 讓這些標記在伺服器端就能渲染出來,對網站做搜尋引擎最佳化 (SEO) 非常得友善,也是多數人選擇 Nuxt 3 來處理 SSR 與 SEO 的原因。除了 SEO 可能會使用到的的標記外,也有 OG Tag 可以加強網頁的連結預覽效果,雖然 OG Tag 與 SEO 沒有絕對的關係,但是透過伺服器端渲染調整這些 Meta 對搜尋引擎或網站都非常的方便,我們只要根據需求及指引做設定,就能對網站的能見度有所提升。


感謝大家的閱讀,這是我第一次參加 iThome 鐵人賽,請鞭小力一些,也歡迎大家給予建議 :)
如果對這個 Nuxt 3 系列感興趣,可以訂閱接收通知,也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

參考資料


上一篇
[Day 23] Nuxt 3 實作部落格 - 頁面的導航守衛與切換效果
下一篇
[Day 25] Nuxt 3 邁向國際化 - 使用 Nuxt I18n 實作多國語系
系列文
Nuxt 3 學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言