聯絡我們
聯絡我們
跳轉目錄

麵包屑導航完整指南：原理、SEO效益與設定步驟

麵包屑（Breadcrumb）是什麼？「麵包屑」原為童話故事《糖果屋》中主角們用以記錄自己走過的路的「麵包渣」，而在網站中，則是指一種用於顯示頁面在網站架構中的位置，以協助使用者返回上層的導覽工具。其不僅是提升SEO的一大利器，也攸關使用者體驗與轉換率。下面就讓我們來告訴你麵包屑的好處、類型與設計重點。

什麼是麵包屑（Breadcrumb）導覽？從命名到樣式一次弄懂

麵包屑導航是一種由左到右排列的導覽鏈結，常見的分隔符號如「>」、「/」或「»」，位置則通常位於主導覽下方與頁面標題上方。其主要呈現的是「網站層級」，與使用者瀏覽歷程不同。

為何叫「麵包屑」？名稱典故與概念比喻

麵包屑（Breadcrumb）的名稱來自於童話故事《糖果屋》（Hansel and Gretel），故事裡的主角希望能記得回家的路，於是一路上撒下麵包屑。後來麵包屑就成為了「導航」與「定位」的代名詞，被廣泛用來指稱網站中顯示頁面位置的導航路徑。

麵包屑長什麼樣子？常見導覽樣式與位置

麵包屑導航的常見樣式有以下3種：

  • 傳統文字型：使用文字鏈結顯示各層級，常用「>」或「/」作為分隔符。
  • 圖示型：加入房屋圖示等，讓導航更直覺。
  • 路徑型：以路徑形式呈現，突出當前頁面。

而其常見的放置位置則在網頁上方，主選單下方，且通常橫跨整個頁面。若想實際看看麵包屑的樣貌，可至ABM看看我們的麵包屑導航！

為什麼麵包屑能提升SEO與使用者體驗？6大好處

麵包屑導航不僅有助於提升使用者體驗，對於SEO也有相當大的好處，如：

✅ 強化網站架構與內部連結

麵包屑導航清楚地顯示網站的層級結構，並提供回到上層頁面的鏈結，有助於搜尋引擎更好地理解網站架構，並促進網站內部的連結。

✅ 提升搜尋引擎抓取效率

透過麵包屑導航，搜尋引擎的爬蟲可以更快速地抓取並理解網站的頁面之間的關聯性，提高網站的可抓取性（Crawlability）。

✅ 降低跳出率，提升頁面瀏覽深度

當使用者點擊進入某個頁面，但發現內容並非自己想要的時候，若有麵包屑導航，使用者就可以透過其快速返回上層頁面，進而找到自己想要的資訊，這不僅可以減少使用者直接離開（跳出）的機會，也可提升頁面的瀏覽深度。

✅ 強化關鍵字語境

麵包屑導航中的文字通常包含主要分類與子分類，有助於加強該頁面的關鍵字語境，提升SEO效果。

✅ 提升可用性與存取性

麵包屑導航不僅有助於一般使用者快速理解網站結構，也可幫助使用輔助工具的使用者更輕鬆地瀏覽網站。

✅ 強化搜尋結果呈現

當網站有正確實作麵包屑導航時，搜尋引擎可能會在搜尋結果中顯示其結構，讓使用者更清楚該頁面在網站中的位置，進而提升點擊率。

麵包屑類型有哪些？層級式、路徑式、屬性式的選擇建議

麵包屑導航主要有3種常見類型，分別為層級式、路徑式與屬性式，每種都有其適用的網站類型與情境。

層級式 （Hierarchy）路徑式 （History/Path）屬性式 （Attribute/Facet）
說明顯示網站的層級結構，從首頁到當前頁面的所有層級顯示使用者的實際瀏覽路徑
優點清楚顯示網站結構，易於理解反映使用者實際操作，易於返回先前頁面
缺點當網站層級過多時，導覽路徑可能過長，影響使用體驗使用者的瀏覽路徑可能較複雜，導覽路徑也會相對不易理解
適用情境適用於層級結構分明的網站，如：部落格、知識庫等適用於需要反映使用者操作歷程的網站，如：單頁式應用程式（SPA）

麵包屑類型選擇建議

一般來說，建議選擇層級式的麵包屑導航，因為其可清楚地顯示網站架構，且易於理解。但若網站結構較特殊，或有多種篩選條件，則可考慮屬性式的麵包屑。

設計與設定重點：麵包屑的最佳實務與常見錯誤

想要正確實作麵包屑導航，就要特別注意以下10個重點，才能避免踩雷！

✅ 文案清楚且一致

麵包屑導航中的文字應清楚且一致，避免使用不易理解的詞彙，以免使用者無法理解該導航的功能與用途。

✅ 層級不過深

建議麵包屑導航的層級不要超過4～5層，以避免導覽路徑過長，影響使用體驗。

✅ 除當前頁外，皆可點擊

一般來說，麵包屑導航的最後一層代表的是「當前頁面」，因此不建議將其設為可點擊的狀態，以避免使用者混淆。

✅ 從首頁起始

麵包屑導航應從首頁開始，清楚顯示該頁面在網站中的位置。且建議避免與主選單重複資訊，以避免讓使用者感到混淆。

✅ 行動版設計

隨著行動裝置使用者的增加，麵包屑導航的行動版設計也越來越重要。建議可設計為可滑動或自動縮略的樣式，以適應不同裝置的螢幕尺寸。

✅ 使用「>」、「/」或「»」等分隔符

麵包屑導航的分隔符號通常使用「>」、「/」或「»」等符號，以清楚區分各層級。

✅ 使用語意標記（ARIA和結構化資料標記）

為了提升麵包屑導航的可存取性與SEO效果，建議使用語意標記，如：ARIA屬性和結構化資料標記（如：JSON-LD、Microdata或RDFA）。

✅ 避免過度裝飾

麵包屑導航的樣式應簡潔，避免過度裝飾，以影響其主要功能和使用者體驗。

✅ 考慮多語系網站

若網站有多語系，需確保麵包屑導航在不同語言版本中皆能正確顯示。

✅ 測試與驗證

設定麵包屑導航後，需使用測試工具，如：Google Search Console的「豐富結果測試工具」等，以確保其功能正常。

除了麵包屑，讓迷圖幫你調整網站體質！

立即讓網站成為自動帶客機

透過SEO讓網站自動帶來穩定且持續成長的流量

迅速提升品牌知名度以及訂單！

預約SEO免費健檢
LINE線上諮詢

實作指南：CMS、前端樣式與結構化資料（JSON-LD/Microdata）

麵包屑導航的實作方式主要有3種，分別為使用CMS、前端樣式設計與結構化資料標記。下面就讓我們分別來看看這3種作法吧！

用CMS快速建立麵包屑（WordPress等）

若你的網站是使用WordPress等CMS建置的，那麼可透過外掛或佈景主題函式快速建立麵包屑導航。以WordPress為例，可使用以下外掛：

  • Yoast SEO：安裝並啟用後，可在「外觀」 ➜「Breadcrumbs」中啟用麵包屑導航，並可自訂其樣式。
  • Breadcrumb NavXT：安裝並啟用後，可在「設定」 ➜「Breadcrumb NavXT」中自訂麵包屑導航的樣式與設定。

前端樣式與框架：分隔符、Bootstrap 5實作

若你的網站是自行撰寫前端程式碼，則可透過Bootstrap 5的breadcrumb元件快速實作麵包屑導航。以下為其範例程式碼：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="https://meetto.tw/" itemprop="item" class="text-decoration-none">
        <span itemprop="name">首頁</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>

    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="https://meetto.tw/blog/" itemprop="item" class="text-decoration-none">
        <span itemprop="name">迷圖部落格</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>

    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="https://meetto.tw/blog/learning-seo/" itemprop="item" class="text-decoration-none">
        <span itemprop="name">SEO自修室</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>

    <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">麵包屑導航完整指南</span>
      <link itemprop="item" href="https://meetto.tw/blog/learning-seo/breadcrumbs" />
      <meta itemprop="position" content="4" />
    </li>

  </ol>
</nav>

結構化資料標記：BreadcrumbList的JSON-LD與Microdata

為了讓搜尋引擎更好地理解麵包屑導航，建議使用結構化資料標記。目前主要有3種標記方式，下方以迷圖網站的這篇文章路徑作為範例：

✅ JSON-LD

建議使用JSON-LD的方式，在頁面中加入以下程式碼：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "首頁",
    "item": "https://meetto.tw/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "迷圖部落格",
    "item": "https://meetto.tw/blog/"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "SEO自修室",
    "item": "https://meetto.tw/blog/learning-seo/"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "麵包屑導航完整指南：原理、SEO效益與設定步驟",
    "item": "https://meetto.tw/blog/learning-seo/breadcrumbs"
  }]
}
</script>

✅ Microdata

若無法使用JSON-LD，可考慮使用Microdata的方式，在HTML中加入以下程式碼：

<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://meetto.tw/">
        <span itemprop="name">首頁</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>

    <span> > </span>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://meetto.tw/blog/">
        <span itemprop="name">迷圖部落格</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>

    <span> > </span>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://meetto.tw/blog/learning-seo/">
        <span itemprop="name">SEO自修室</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>

    <span> > </span>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://meetto.tw/blog/learning-seo/breadcrumbs" aria-current="page">
        <span itemprop="name">麵包屑導航完整指南：原理、SEO效益與設定步驟</span>
      </a>
      <meta itemprop="position" content="4" />
    </li>

  </ol>
</nav>

🛑 注意

除了上述2種標記方式，還有RDFA的標記方式，但目前較少使用，因此不建議使用RDFA的方式來標記麵包屑導航，目前最常使用的是JASON-LD格式。

FAQ：關於麵包屑導航的進階提問

單頁式網站（SPA）需要麵包屑嗎？

單頁式網站（SPA）通常頁面層級較少，且內容分區清楚，因此可省略麵包屑導航。但若有多層內容或動態路由，仍可使用虛擬層級的方式，來協助使用者理解網站架構。

不做結構化資料標記會怎樣？

不做結構化資料標記並不會影響前端的可用性，但可能會影響搜尋引擎對於麵包屑導航的理解，進而影響其在搜尋結果中的呈現。因此建議還是要進行結構化資料標記，以利搜尋引擎更好地理解網站架構。

麵包屑會和主選單導航「打架」嗎？

麵包屑導航與主選單導航的功能不同，主選單導航主要用於引導使用者探索網站，而麵包屑導航則用於協助使用者理解當前頁面在網站中的位置，並返回上層頁面。因此兩者可以並存，但需避免資訊重複。

什麼時候會在搜尋結果看到麵包屑路徑？

當網站有正確的結構化資料標記，且搜尋引擎認為麵包屑導航對於使用者有幫助時，就有機會在搜尋結果中顯示麵包屑路徑。但實際上是否顯示，仍取決於搜尋引擎的判斷。

SEO麵包屑只是其中之一，讓迷圖幫你提升網站流量

看完上述說明，你是否也想為你的網站加上麵包屑導航？幫助你的網站提升SEO表現！建議先為電商分類頁、部落格文章等重要頁面加入清楚的麵包屑，強化內部連結與使用者體驗；再交由迷圖SEO用完整策略把關，從關鍵字佈局到成效追蹤，讓排名與轉換同步成長。迷圖SEO致力於協助企業提升網站流量和轉換率，提供量身打造的SEO解決方案，並擁有以下3大優勢，幫你更輕鬆、更符合需求地達成行銷目標、提升品牌知名度。歡迎聯絡我們，或是預約免費健檢，讓消費者怎麼搜尋都能找到你！

  1. 地圖式SEO佈局策略：消費者在 Google 搜尋找不到你嗎？迷圖透過地圖式的 SEO 關鍵字佈局，並藉由策略分析與排名優化，提升網站排名及流量，讓消費者搜尋每個關鍵字都能找到你！
  2. R2R 轉換數據報表：SEO 對轉換有用嗎？迷圖與資料數據分析公司聯手推出 Rank2Revenue 轉換追蹤 SEO 服務，可清楚顯示 SEO 帶來的轉換、助攻，量化 SEO 成效，讓你真正看見 SEO 的效果！
  3. 免動手服務：花了費用做 SEO，卻還要自己修改、自己寫文？迷圖不會讓這樣的事發生！為解決人手不足導致專案卡關的困境，從網站修改到文章撰寫，迷圖皆提供專業服務，大幅提升專案進度與成效顯現速度！

立即讓網站成為自動帶客機

透過SEO讓網站自動帶來穩定且持續成長的流量

迅速提升品牌知名度以及訂單！

預約SEO免費健檢
LINE線上諮詢
相關文章
跳轉目錄
相關文章
延伸閱讀
image
image
image
image
image
image
image
image
image
image