麵包屑（Breadcrumb）是一種常見的網站導覽介面，用途是顯示使用者目前所在的頁面位置，以及其所屬的分類上下層關係。透過麵包屑導航，使用者能夠：清楚知道自己目前位於網站的哪個區塊快速返回上一層分類或首頁更有邏輯地瀏覽網站結構與內容層級

網站架設入門

/

17 9 月, 2025

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

快速瀏覽

什麼是麵包屑導航？麵包屑(Breadcrumb) 怎麼設計最有效？了解麵包屑導航的種類、優點與設計技巧，透過實際案例教你如何提升網站的使用者體驗與 SEO 排名！

麵包屑是什麼？麵包屑有哪些功能？

麵包屑導航，又稱 Breadcrumb，是一種顯示在網站上方的「網站導覽列」，能清楚標示出使用者當前所在的頁面層級：

▏首頁＞商品分類＞商品頁面

這種階層式的導航，讓使用者在點擊網站各處後，仍能清楚掌握自己目前在哪裡，並快速返回上一層或首頁，避免迷路或跳出網站。

Attio 合併與刪除資料紀錄操作頁麵包屑導航示意圖

「麵包屑」這個名字其實來自格林童話的故事《糖果屋》。故事中的主角為了不在森林中迷路，一路撒下麵包屑標記走過的路徑。這個巧妙的命名反映了網站導航的本質：清楚指示使用者所處的位置和路徑，確保他們能隨時回到更高一級的頁面或首頁。

設置麵包屑對 SEO 有什麼好處？5大好處一定要知道

麵包屑導航（Breadcrumb）不只是使用者導覽工具，更是提升 SEO 表現的重要設計。
它能優化網站架構、增進使用者體驗，甚至直接影響搜尋引擎的收錄與呈現方式。以下是設置麵包屑對 SEO 的五大好處：

1. 改善使用者體驗與導覽流暢度

當使用者在網站中頻繁點擊不同頁面時，若無麵包屑，很容易迷失方向。麵包屑就像網站的「樓層地圖」，能讓使用者快速辨認自己的位置，回到上一層頁面或首頁，大幅提升使用流暢度與瀏覽信心。

2. 降低跳出率，提升黏著度

當使用者能夠順利導航網站，自然停留時間會延長，也更有可能持續互動或轉換。根據 UX 分析，網站若能提供清晰路徑，跳出率平均可降低 15～25%，對 Google 評估網站品質大有助益。

3. 強化搜尋引擎友善度與結構辨識

搜尋引擎爬蟲讀取的是網站原始碼，若網站結構混亂、無清晰層級，就可能錯過重要頁面或分類。
透過 Schema.org 的 BreadcrumbList 結構化標記，能讓爬蟲明確知道：

哪些是分類頁、哪些是內容頁
這頁面屬於哪個類別下
如何呈現在 SERP 上

可以加速收錄、增強 SEO 排名潛力！

4. 有機會出現在複合式搜尋結果

當你的網站設有正確的麵包屑結構，Google 就有可能在搜尋結果標題上方顯示「分類路徑」，提升點擊率（CTR）。

畫面呈現方式	SEO 效益
首頁＞分類＞文章標題	增加 SERP 占位、提升信任感
含結構化標記	有機會出現在 Rich Snippet

想了解更多？可以參考 Google 官方 Search Gallery

麵包屑設置重點與常見問題

設置麵包屑（Breadcrumb）不只是把幾個分類標題串起來那麼簡單，要兼顧使用者體驗、SEO 技術規範，更要避免結構混亂導致爬蟲迷路。

以下整理設置麵包屑時的重要欄位、命名原則與常見錯誤，讓你在規劃時就能避開 SEO 地雷。

麵包屑標記欄位說明（結構化資料）

根據 Google 官方文件，Breadcrumb 的標記格式主要由以下三個欄位組成：

欄位名稱	說明
Name	該階層顯示的名稱，建議使用精簡文字
Item	對應的 URL，每一層都需有效
Position	此項在麵包屑中的位置，第一層為 `1`，以此類推

設置時的 4 大規劃原則

階層名稱要簡潔，盡量使用純文字避免符號與裝飾詞
每層 URL 都要能點擊有效，避免空連結
階層深度不超過 5 層，過深不利爬蟲收錄
在名稱中自然融入關鍵字，有助於語意理解與排名強化

常見的 3 種設置錯誤（請避免）

錯誤類型	說明與示例
同名稱、不同網址	例：兩個「首頁」分別導向不同 URL，造成爬蟲混亂
同網址、不同名稱	例：同一頁面有「關於我們」、「公司簡介」兩種麵包屑名稱
階層漏標或錯位	例：文章上層直接是首頁，缺少主分類層，導致結構不完整

麵包屑實作建議與工具資源

若你有工程師合作，可提供以下官方文件作為實作參考：
- Google Breadcrumb 說明文件
- Schema.org BreadcrumbList
標記完成後，記得使用結構化資料測試工具 確認標記是否正確被讀取。

自行設置的注意事項

若你自己操作網站，這些是實務上常見的注意重點：

每層名稱文字 不要過長，避免在行動裝置顯示過於擁擠
每層連結需 點擊有效，避免 404 或空白頁
路徑長度要 控制在 3～5 層內，太深不利用戶與爬蟲理解

前端顯示與後台標記是兩件事，真正影響 SEO 的是「JSON-LD 格式的結構化資料」，非單純 HTML 顯示。

麵包屑操作基本教學｜WordPress 設置實例教學

如果你是使用 WordPress 架設網站的新手，想要在頁面中加入麵包屑導航，其實可以透過外掛工具快速完成。這裡以最常見的 Yoast SEO 外掛為例，教你一步步設定麵包屑功能。

WordPress 安裝麵包屑外掛的 4 步驟教學

Step 1. 安裝 Yoast SEO 外掛
前往 WordPress 後台 → 點選「外掛」→ 搜尋 Yoast SEO → 點擊「安裝並啟用」。

Step 2. 啟用麵包屑功能
在 WordPress 左側選單中，點選：
SEO → Search Appearance → 切到「Breadcrumbs」分頁，開啟功能開關。

Step 3. 自訂麵包屑格式與欄位
依據說明，填寫各層級命名規則、分隔符號（如＞／）等參數，完成後點擊「儲存變更」。

Step 4. 加入佈景主題程式碼
進入你目前使用的佈景主題編輯器（或使用子主題），在欲顯示麵包屑的位置貼上以下程式碼：

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

完成後，即可在文章頁或分類頁中看到麵包屑導航！

🔗 官方說明連結：
👉 How to implement Yoast SEO breadcrumbs

麵包屑顯示不出來怎麼辦？

可能原因如下：

沒有將程式碼貼到佈景主題正確區塊
外掛未更新到最新版
佈景主題未支援 yoast_breadcrumb() 呼叫
快取未清除，建議清除後重新整理頁面

麵包屑語法格式總整理：HTML、JSON-LD、Microdata、RDfa 有什麼差別？

你知道嗎？麵包屑導航雖然在前台看起來只是幾行連結，實際在後台可以有多種標記語法格式。
根據 Google 開發者中心，麵包屑可使用以下 4 種語法進行標記：

語法格式	使用對象	說明特色與適用情境
HTML	給人看的	一般網站用 `<ol>` / `<ul>` 方式呈現
JSON-LD	給搜尋引擎看的	結構清晰、獨立於網頁主體，Google 最推薦
Microdata	給搜尋引擎看的	嵌入在 HTML 標籤中，語法混合、維護較不易
RDfa	給搜尋引擎看的	類似 Microdata，但語法更語意化、更複雜

JSON-LD 是目前主流最佳解

雖然上述三種語法都能被搜尋引擎辨識，但實務上我們推薦使用 JSON-LD，原因包括：

📦 語法結構清晰、獨立，不干擾網頁內容呈現
🛠️ 有許多「麵包屑語法生成器」可用，新手也能上手
✅ 支援放在 <head> 或 <body> 中任意位置，不影響前端樣式

HTML v.s. JSON-LD 實作範例對照

HTML 麵包屑範例

				
					<ol class=\"breadcrumb\">
  <li><a href=\"/books\">Books</a></li>
  <li><a href=\"/books/scifi\">Science Fiction</a></li>
  <li>Award Winners</li>
</ol>

給使用者看的版本，用 <ol> 和 <li> 建立階層，無需 position。
無結構化標記，搜尋引擎無法理解層級意義。

JSON-LD 麵包屑範例

				
					<script type=\"application/ld+json\">
{
  \"@context\": \"https://schema.org\",
  \"@type\": \"BreadcrumbList\",
  \"itemListElement\": [{
    \"@type\": \"ListItem\",
    \"position\": 1,
    \"name\": \"Books\",
    \"item\": \"https://example.com/books\"
  },{
    \"@type\": \"ListItem\",
    \"position\": 2,
    \"name\": \"Science Fiction\",
    \"item\": \"https://example.com/books/scifi\"
  },{
    \"@type\": \"ListItem\",
    \"position\": 3,
    \"name\": \"Award Winners\",
    \"item\": \"https://example.com/books/scifi/award-winners\"
  }]
}
</script>

每個階層都有明確的 position 與 name，利於 Google 理解與收錄。

想省時間？用線上生成器快速建立 JSON-LD！

如果你對程式碼不熟，也不用擔心！推薦使用免費工具：
👉 Breadcrumb JSON-LD Schema Generator

只需輸入層級名稱與連結，按下「Generate」即可自動產出結構化標記，貼進後台就完成！

麵包屑常見問題FAQ