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

2022 iThome 鐵人賽

DAY 24

Modern Web

Nuxt 3 學習筆記系列第 24 篇

14th鐵人賽 nuxt 3 vue 3 nuxt vue.js

Ryan

2022-10-09 23:54:52

10113 瀏覽

分享至

前言

選擇使用 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" … /> 都有設定。

搜尋引擎爬蟲在收錄網頁時，就會解析這些標籤來建立索引，我們在使用搜尋資料時，網頁的資訊也就對應著顯示出來，如下圖。

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

網站的 Open Graph (OG)

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>
}

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 - 首頁」。

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

<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:title 的 meta 了。我們可以透過檢視原始碼的方式來看看效果。

實戰添加 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 的夥伴。