Loading 4%

Nuxt SEO 設定與應用情境【4】

當希望網站能在搜尋引擎中被找到，或在社群分享時正確顯示內容，就需要設定 SEO。這篇會以 Nuxt 提供的 SEO 方法，整理我在個人網站中實際使用的設定，以及它們用途在哪裡。

前言

搜尋引擎最佳化（SEO）通常會讓人先想到搜尋排名。

但搜尋排名不只是設定 meta，還包含渲染方式、語意化結構、Heading 層級 等多種因素。

在實際開發時，我會先從使用者能看到的情境開始處理，例如要如何設定讓搜尋引擎理解頁面資訊，並讓這些資訊能正確顯示在不同地方，例如：

  • 瀏覽器標籤頁
  • 搜尋結果列表
  • 分享社群預覽

在 HTML 中，這些資訊大多透過 head 標籤設定，例如 title、meta 等。

而在 Nuxt 專案裡，可以透過 nuxt.config、<Head> 、useHead() 與 useSeoMeta() 來設定。

這篇以我在個人網站中，主要使用 nuxt.config 與 useSeoMeta() 來管理這些設定，分別處理全站共用與頁面動態資訊。

設定瀏覽器標籤頁資訊

在瀏覽器的標籤頁（Tab）中，會看到兩個資訊：頁面標題（title）與網站圖示（favicon）。

這裡先說明會設定的兩個項目：

  • favicon：網站圖示，會顯示在瀏覽器分頁與搜尋結果旁的小圖示
  • title：頁面標題，會顯示在瀏覽器分頁名稱與搜尋結果標題和書籤名稱

nuxt-config 裡設定 favicon

透過 nuxt.config 設定 head，主要管理靜態與全站共用的資訊，以及第三方腳本和樣式，所以我設定在這裡統一管理。

nuxt.config.ts
      app: {
    head: {
      link: [
        {
          rel: "icon",
          type: "image/x-icon",
          href: ".../favicon.ico",
        },
      ],
    },
  },

HTML 顯示

      <link rel="icon" type="image/x-icon" href="/favicon.ico">

useSeoMeta 方法新增 title

使用 useSeoMeta 方法新增 title，它提供屬性錯誤提示並且支援 TypeScript 型別檢查，可以提升方法識別與減少錯誤可能性，除此之外需要動態更動每頁標題，所以我在 title 使用 Nuxt 提供這個方法。

composables/useMetaPage.ts
      export const useMetaPage = ({ title, description, path = "" }: UseMetaPage) => {
    // ...
    useSeoMeta({
    title: title,
    });
})

HTML 顯示

      <title>標題</title>

在開發階段啟動本地環境時，可以在瀏覽器上看到它的顯示。

設定搜尋結果列表資訊

在搜尋結果列表中，每個網站通常會顯示幾個基本資訊：title、favicon 與 description。前面已經介紹過 title 與 favicon，這裡補充 description 的用途。

  • description： 描述頁面內容的一小段，讓使用者在點擊前能了解頁面大概在介紹什麼，會顯示在搜尋結果標題下方。
composables/useMetaPage.ts
      export const useMetaPage = ({ title, description, path = "" }: UseMetaPage) => {
    // ...
    useSeoMeta({
    description: description,
    });
})

HTML 顯示

      <meta property="description" content="頁面描述">

在每頁設定 title 與 description 的原因：

如果沒有設定 description，搜尋引擎會從頁面內容抓取一段文字作為摘要，有時候會出現斷句或內容不完整的情況。title 也是若沒有明確設定，可能會自行抓取頁面文字或重新組合標題。

設定分享社群瀏覽資訊

在設定分享社群預覽資訊前，簡單了解 Open Graph (OG) 標籤，它是展示使用者分享到 LINE 、 Facebook 和其他社群（不含 Twitter）預覽資訊。

專案中設定 og:title 標題、og:description 描述、og:image 瀏覽圖、og:Url 網址。

本篇不設定 og:image，在後續的進階 Nuxt SEO 套件篇章，會說明為何改用套件而非直接使用此方法。

composables/useMetaPage.ts
      export const useMetaPage = ({ title, description, path = "" }: UseMetaPage) => {
    const runtimeConfig = useRuntimeConfig();
  const site = runtimeConfig.public.site + path;
    useSeoMeta({
    ogTitle: title,
    ogDescription: description,
    ogUrl: site,
    // twitter 社群獨立設定
    twitterTitle: title,
    twitterDescription: description,
    });
})

HTML 顯示

      <meta property="og:title" content="頁面標題">
<meta property="og:description" content="頁面描述">
<meta property="og:url" content="頁面網址">
<meta name="twitter:title" content="頁面標題">
<meta name="twitter:description" content="頁面描述">

結論

在傳統網站中，SEO 與分享資訊往往都是每個頁面都要獨立設定；而在 Nuxt 專案中，建議區分全站共用與每頁動態更動，並搭配合適的管理方式來規劃 SEO 與社群分享標籤，讓搜尋引擎與社群平台都能正確傳達內容，有助於提升網站曝光與使用者體驗。

留言板