[SEO 優化網站教學] 麵包屑(Breadcrumb)功能讓使用者方便操作不迷路

內容目錄

麵包屑(Breadcrumb)能讓使用者快速知道目前在網站架構中的哪一頁？並幫助搜尋引擎快速了解網站整體架構，以便讓搜尋引擎能針對所有網站頁面進行對應的收錄。

這篇要為各位詳細介紹「麵包屑」的作用與功能並教各位進行「麵包屑」的新增與設定。

相關延伸文章閱讀

[SEO 優化網站教學] 基礎概念與執行操作 7 步驟教學

什麼是麵包屑(Breadcrumb)？

麵包屑這個詞來自於格林童話中《糖果屋》有關，故事中的主角在踏上森林旅途中為防止迷路，而在經過的路途中沿路灑下麵包屑，以確保在迷路時能找到回家的路。

麵包屑(Breadcrumb)在網頁中又可稱為「導覽標記」或「導覽路徑」，通常放置在網頁的最上方，讓使用者能辨識當前在網站架構中的哪一個位置或頁面，具有導覽及指引的作用並能快速切換至上一層路徑頁面。

[SEO 優化網站教學] 麵包屑(Breadcrumb)功能讓使用者方便操作不迷路 — 麵包屑(Breadcrumb)導覽路徑功能

麵包屑對 SEO 有什麼幫助？

以下整理出 5 點麵包屑功能對網站 SEO 的好處：

好處 1：提升操作友善度

麵包屑能讓使用者清楚辨識當前所位於的網頁位置並能一鍵快速切換到想要的網頁階層位置，而不需再多次點擊「上一頁」功能去做切換。

好處 2：降低網站跳出率

麵包屑能清楚引導使用者進行路徑及網頁位置的切換，進而降低使用者只瀏覽一張網頁就離開的機率。

好處 3：增加網站停留時間

麵包屑能明確引導使用者進行下一步的瀏覽切換操作，故能有效引導使用者到其他頁面進行長時間瀏覽的機率。

好處 4：提升搜尋引擎索引效率

良好的麵包屑結構能幫助搜尋引擎了解網站整體架構並提升搜尋引擎爬蟲索引網站內容的效率。

好處 5：減少版面的佔用

麵包屑通常是由橫向連結的文字組成，故能大幅減少網頁版面的佔用，同時也能兼具提升操作友善度及搜尋引擎索引效率。

麵包屑設定需對應網站目錄分類結構

前面有說到麵包屑功能能提升搜尋引擎對網站內容的索引效率，但除了透過麵包屑來讓搜尋引擎了解網站架構外，還有更重要的是「網站目錄分類的結構」也必須對應到「麵包屑」設定，以下圖片做說明。

從上面圖片標示可以知道「麵包屑」的設定有對應到「網址上的目錄分類」，「網站的目錄分類結構」與「麵包屑」功能一樣能幫助搜尋引擎了解網站整體架構也能提高搜尋引擎爬蟲索引網站內容的效率，故「網站的目錄分類結構」是很重要的，這部分在設計網站階段應該要規劃架構好，以便未來提升 SEO 成功機率。

麵包屑功能在 Google 呈現的搜尋結果

若網站上有確實設定並加入麵包屑功能則在 Google 搜尋結果中所收錄的頁面網址會以「麵包屑路徑」來呈現（如下圖所示）。

設定與加入麵包屑功能的語法架構

根據「Google 搜尋中心」技術文件說明，麵包屑導覽標記功能可分為：HTML、JSON-LD、RDFa、Microdata（微資料）這 4 種語法進行設定，接下來會以 Google 官方文件中的範例去做語法展示。

其中 HTML 語法為網頁呈現設計使用；而 JSON-LD、RDFa、Microdata（微資料）主要是給搜尋引擎看的，使用時只要選擇其中一種使用即可，不必三種都一起使用。

另外，在設定麵包屑導覽標記的語法中需設定以下 3 項「標記資料欄位」，以下進行整理說明：

麵包屑設定欄位說明
標記資料欄位	說明
name	麵包屑名稱
item	麵包屑網址
position	麵包屑階層

name（麵包屑名稱）：如以下的麵包屑範例中的「書籍」、「科幻」、「獲獎作品」。

item（麵包屑網址）：設定麵包屑連結的網址，如以下語法中的「http://www.example.com/books」、「http://www.example.com/sciencefiction」

position（麵包屑階層）：以「數字」來設定麵包屑的階層，越前面的麵包屑數字就越小，如以下的麵包屑範例中的「書籍」為 1、「科幻」為 2、「獲獎作品」為 3。

以下是接下來要展示語法的麵包屑範例：

書籍 > 科幻 > 獲獎作品

麵包屑 HTML 語法

<html>
  <head>
    <title>麵包屑 HTML 語法</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="http://www.example.com/books">書籍</a>
      </li>
      <li>
        <a href="http://www.example.com/sciencefiction">科幻</a>
      </li>
      <li>
        獲獎作品
      </li>
    </ol>
  </body>
</html>

麵包屑 JSON-LD 語法

<html>
  <head>
    <title>麵包屑 JSON-LD 語法</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "書籍",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "科幻",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "獲獎作品"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

麵包屑 RDFa 語法

<html>
  <head>
    <title>麵包屑 RDFa 語法</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">書籍</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">科幻</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">獲獎作品</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

麵包屑 Microdata（微資料）語法

<html>
  <head>
    <title>麵包屑 Microdata（微資料） 語法</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">書籍</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">科幻</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">獲獎作品</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

以上語法可直接複製並依照「標記資料欄位」進行修改使用。