什麼是麵包屑（Breadcrumb）？完整解析 3 大類型與 SEO 優化技巧

麵包屑是什麼？定義、由來與設計目的

麵包屑（Breadcrumb），又稱「麵包屑導航／路徑導覽列」，是網站常見的階層式導覽設計，通常位於頁面上方，用來顯示使用者目前所在的層級位置。例如：

首頁 ＞ 商品分類 ＞ 子分類 ＞ 商品頁

它能讓訪客清楚知道自己在哪裡、可快速返回上一層或首頁；對搜尋引擎而言，麵包屑是結構化的層級信號，能幫助 Google 更容易理解整個網站的內容架構與關聯性。

名稱源自《糖果屋》：主角以麵包屑作為回家路標；網站中的麵包屑亦負責「指引方向」。

麵包屑對 SEO 的 5 大好處（含實務觀察）

1. 提升使用者體驗：清楚導覽降低迷路成本；研究顯示清晰導覽可使跳出率平均降低 20% 以上，並提升停留時間。
2. 降低跳出、提高黏著：在每頁提供「回分類／首頁」捷徑，讓使用者更願意探索更多內容。
3. 強化搜尋引擎理解：以 BreadcrumbList 告訴 Google 頁面所屬層級與關聯，加速索引。
4. 提升 SERP 呈現與 CTR：正確麵包屑會顯示在標題上方的路徑，提升信任感與點擊率。
5. 內部連結與權重傳遞：麵包屑天然形成內部鏈結網，幫助主要分類頁累積權重，強化 Topical Authority。

麵包屑的三種類型與應用（路徑型／屬性型／歷史型）

依導覽邏輯可分為三種：路徑型（Location-based）、屬性型（Attribute-based）、歷史型（History-based）。合理運用能同時提升 UX 與搜尋引擎對 site hierarchy 的理解。

麵包屑設置原則與常見錯誤（設計＋層級結構）

核心欄位（BreadcrumbList）

四大原則

• 名稱清楚：避免「🔥精選」「！」等裝飾詞。
• 每層可點：最後一層通常顯示文字即可，前面層級皆為有效連結。
• 層級控制：建議 3–4 層，最多不超過 5；行動版容易截斷。
• 自然關鍵字：在層級名稱中融入語意詞，提升模型理解。

常見錯誤

實務設計與進階考量：層級與國際化

① 路徑長度最佳化：建議不超過 4 層

基於行動 UX 與權重集中度，層級過深會造成截斷與主題稀釋；實務建議控制在 4 層以內。

② 多語網站（i18n）一致性

• 名稱對應語言：name 與頁面語言一致（例：繁中「首頁」/ 英文「Home」）。
• URL 指向正確語言版本：每層 item 對應 hreflang 與語系路徑（/zh-tw/、/en/）。
• 避免重複內容：多語互標 hreflang，canonical 指向同語言主頁。

麵包屑實作教學：WordPress 與 JSON-LD 標記

WordPress：用 Yoast SEO 最快上線

1. 安裝外掛：後台 → 外掛 → 搜尋 Yoast SEO → 安裝並啟用。
2. 啟用麵包屑：SEO → Search Appearance → Breadcrumbs → 開啟。
3. 自訂格式：分隔符（›/>//）、首頁名稱等。
4. 插入至佈景主題：

if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}

進階：手動加入 JSON-LD（Google 推薦）

JSON-LD 與 HTML UI 解耦，建議以 <script type="application/ld+json"> 注入，維護清晰。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "首頁", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "部落格", "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "麵包屑教學", "item": "https://example.com/blog/breadcrumb-tutorial/" }
  ]
}
</script>

針對 SPA／動態網站的實作挑戰

React／Vue／Angular 等 SPA 只在首次載入輸出完整 HTML；路由切換時 URL 改變但頁面不刷新。此時 JSON-LD 必須動態更新，否則 Google 只會看到初始狀態的 BreadcrumbList。

實作範例（概念）：路由後重新注入

function injectBreadcrumbLD(items){
  const id = 'ld-breadcrumb';
  const old = document.getElementById(id);
  if (old) old.remove();
  const script = document.createElement('script');
  script.type = 'application/ld+json';
  script.id = id;
  script.text = JSON.stringify({
    "@context":"https://schema.org",
    "@type":"BreadcrumbList",
    "itemListElement": items.map((it, idx) => ({
      "@type":"ListItem","position": idx+1,"name": it.name,"item": it.url
    }))
  });
  document.head.appendChild(script);
}

// 例：在 Vue/React Router afterEach 或 onRouteDidChange 中呼叫
router.afterEach((to)=> {
  const items = buildItemsFromRoute(to); // 依你的路由回傳 name/url
  injectBreadcrumbLD(items);
});

行動 UX 與 CWV（FCP／CLS）

• 樣式優先：麵包屑 CSS 建議 內聯 (Inline) 或 預載入 (Preload)，確保首次內容繪製（FCP）後版面穩定，符合 CLS 閾值。
• 截斷策略：行動端可做中間折疊（例：首頁 › … › 子分類 › 文章）。

附錄：在 Google Search Console 檢查麵包屑錯誤

1. GSC 左側 → 搜尋外觀/強化功能 → 找到 Breadcrumbs 報告。
2. 查看警告／錯誤類型（如：缺 item、position 重複、URL 無效）。
3. 修正後點選 驗證修正，觀察數日是否轉為有效。

提示：若同頁同時存在多組麵包屑標記，請保留單一權威來源（通常為 JSON-LD）。