麵包屑導覽Breadcrumb是什麼？提升Breadcrumb SEO必學3類型！

什麼是Breadcrumb（麵包屑）？3種常見網站麵包屑導航介紹！

What is Breadcrumbing meaning？麵包屑的意思的確是能食用的食材，但這個名詞在SEO中則有另一個含義。接下來，我們先一起來認識什麼是麵包屑！

（一）Breadcrumb麵包屑導航是什麼？麵包屑取名的由來

麵包屑英文為「Breadcrumb」，麵包屑理論這個名詞來自格林童話裡的「糖果屋」，故事主角兩兄妹前往森林，為了能夠找到回家的路，沿途撒下麵包屑作為指引標記。演變至今，「麵包屑（Breadcrumb）」被借用作為網站導航的代稱。

Breadcrumb中文除了稱作麵包屑之外，也有「頁面路徑」、「麵包屑導航 （Breadcrumb Navigation）」、「麵包屑路徑」、「麵包屑導覽」等稱呼。

在Google開發者中心文件表示：Breadcrumb meaning refers to the navigation that indicates the page's position in the site hierarchy.

也就是說，麵包屑主要功能在於替用戶標示出目前所在位置，避免迷失在網站中。

Breadcrumb麵包屑是一種常用於網站上的導覽輔助工具，通過以層次結構的形式呈現路徑，讓使用者能夠快速了解他們在網站中所處的位置。

（二）3種常見的麵包屑類型

Breadcrumb麵包屑導航通常以一連串的連結呈現，顯示用戶從首頁或主要分類頁到目前所在頁面的完整路徑。

而麵包屑可分為3種類型：

位置型（Location）

位置型麵包屑是固定的，顯示該頁面在網站結構中的位置，連結的頁面位置從左至右，由大而小。

屬性型（Attribute）

顯示特定頁面的分類資訊。通常用於電子商務網站，顯示頁面上的特定商品分類與屬性，有點像是特定頁面上的「標籤」。

路徑型（Path）

路徑型麵包屑是動態的，顯示用戶到達當前頁面之前所經過的路徑。此種麵包屑導航更像是「返回鍵」的功能，基於每一次在網站上搜尋的意圖有所不同，「返回」上一層的頁面也會隨之改變。

Breadcrumb UI怎麼設計最實用？4種麵包屑設計樣式模板分享！

（一）麵包屑架構設計前你應該知道的5件事

麵包屑看起來是一個非常不起眼的功能，但如果設定不好，不僅會讓使用者在瀏覽網站時感到迷茫，Google搜尋引擎也有可能無法正確理解網頁內容，這2個大地雷加在一起，你的網站頁面就有可能在網站體驗這個評分範疇裡被Google扣分喔。

因此，在設計麵包屑時，應該注意以下件事情：

• 每一階層的文字盡量簡短，將重點濃縮再濃縮
• 除了最終層之外，中間的每一階層都必須是有效連結
• 麵包屑的階層，含首頁盡量不要超過5層（核心關鍵字也不宜放在過深的階層中）
• 麵包屑導航應放置在內容上方、主導航選單下方
• 麵包屑導航應從左到右閱讀，且麵包屑的最後一項應該是使用者目前所在的頁面

（二）4種Breadcrumb Design範例參考

一般來說，麵包屑列表（Breadcrumb List）大部分會以下方2種符號呈現：

• 首頁 ＞ 項目分類 ＞ 項目名稱

• 首頁 ／ 項目分類 ／ 項目名稱

除了上述2種常見的麵包屑符號之外，其實只要麵包屑導航結構清楚明瞭，能夠被「人」及「Google搜尋引擎」看得懂，你也可以透過MUI breadcrumbs元件，根據網站的風格調整麵包屑UI的顯示方式！

MUI入口網址：https://mui.com/material-ui/api/breadcrumbs/

以下分享2個較特殊的麵包屑列表模板，供大家參考：

📍NASA

📍國家地理雜誌（National Geographic）

麵包屑功用總整理！3大麵包屑優點一次看

（一）麵包屑功能該什麼時候使用？

一般來說，當你的網站擁有「2層以上」的層次結構，都應該使用麵包屑導航。

麵包屑功能可以在大型網站的複雜結構中提供導航支援。當使用者在網站上進行深入尋找時，他們可能會忘記最初進入該頁面的路徑。在這種情況下，麵包屑功能可以幫助用戶快速返回到之前的位置。

注意，此功能對於電子商務網站來說尤其重要。

當消費者在瀏覽商品時，他們可能會選擇進一步探索相關的分類或子分類。麵包屑功能可以讓使用者清楚的了解他們所選商品的上層分類，並且能夠隨時返回到前一個分類層級。這有助於提高使用者的購物體驗，使他們更容易尋找所需的商品。

此外，麵包屑功能也對於新聞網站或Blog網站很有用。

當使用者在閱讀文章時，他們可能會希望了解該文章所屬的分類或主題，以便尋找相關的內容。透過麵包屑功能，使用者可以快速查看並點擊相關的分類連結，以瀏覽其他相關文章，提供更豐富的閱讀體驗。

（二）使用網站麵包屑的3大好處！

麵包屑功能在許多不同類型的網站和應用程式中都有其價值。而綜合來看，可以歸納出以下3大好處：

麵包屑好處1. 提升用戶體驗

無論使用者是在探索網站內容或是尋找特定頁面，麵包屑都能夠清楚的標示出他們目前所在的位置。這對於大型網站或深度頁面結構的網站尤其重要。

這個概念就像是在逛一棟百貨公司，而裡頭的品牌與商品包羅萬有。若樓層、品類標示不清楚，可能會讓用戶在商場中迷路，導致購物體驗不佳，用戶不開心，百貨公司也賺不到錢。

同理，麵包屑功能讓使用者可以輕鬆地理解網站的結構和分類，並且能夠在需要時快速返回上一層或首頁。這提供了使用者更好的導航體驗，減少了迷失在網站中的可能性。

麵包屑好處2. 提升網站排名

Google搜尋引擎利用麵包屑了解網站的結構和內容之間的關係。

當網站結構清晰且麵包屑正確設置時，搜尋引擎可以更輕鬆的理解和索引網站內容。這可以增加網站在搜尋結果頁中的可見性，進而提高排名，吸引更多有潛力的訪問者。

想了解更多如何加速Google搜尋引擎完成檢索，並建立索引你的網站？歡迎點看這篇文章：Sitemap是什麼？Sitemap教學：提交Sitemap、無法讀取Sitemap狀況

麵包屑好處3. 降低網站跳出率

當使用者進入網站並不清楚如何找到所需的內容時，他們可能會感到困惑和挫折，並在短時間內離開網站。

然而，有了麵包屑作為導航工具，用戶能夠快速找到相關的頁面，減少了他們的挫敗感和離開網站的機會。這有助於提高訪問者對網站的黏著度、降低跳出率，拉長用戶與網站之間的互動時間。

想了解更詳細的跳出率（Bounce rate），建議閱讀此篇文章：Bounce rate跳出率是什麼？跳出率 離開率差異比較！

（三）SEO麵包屑 （SEO Breadcrumb）為什麼很重要？

麵包屑用途除了幫助使用者在瀏覽網站時不迷路、擁有更好的體驗之外，麵包屑SEO對網站來說也至關重要。

Breadcrumb SEO執行得好，可以幫助Google爬蟲了解網站的結構與內容之間的關係，讓搜尋引擎更能夠輕鬆讀懂站內資訊，使其更容易建立索引和理解網站的內容。這有助於提高網站的可見性和排名，吸引更多的有潛力的訪問者。

總結此段內容，SEO麵包屑在搜尋引擎優化和使用者導航方面都扮演著重要角色。對於具有複雜結構的網站或需要提升能見度的網站來說，使用SEO麵包屑是一個明智的選擇。

想了解更詳細的SEO知識，建議閱讀此篇文章：SEO是什麼？SEO教學全攻略：On Page SEO、Off Page SEO

麵包屑設定資料欄位說明與2種常見語法分享：HTML Breadcrumb等

要讓麵包屑在搜尋引擎中發揮真正的功能，就是增加「結構化標記」！

人在網站上看到的視覺化符號和文字，對於Google爬蟲來說，其實都是一大批程式代碼。要讓搜尋引擎一眼就認出「這是麵包屑」，這時候Breadcrumbs Schema就非常重要了！

根據Google開發者中心文件說明，麵包屑標記包含以下3個資料欄位：

📌 項目名稱（Item Name）

這是麵包屑中每個項目的名稱，用於顯示該項目在導航路徑中的標籤或標題。例如，使用者在購物網站中瀏覽產品的麵包屑導航，項目名稱可以是該商品的名稱或分類。

📌 項目網址（Item URL）

這是麵包屑中每個項目對應的網址（URL），用於定義使用者點擊該項目後導向的目標頁面。項目網址可以是該項目自身的獨立頁面，也可以是對應的分類頁面或其他相關內容的URL。

📌 項目位置（Item Position）

這是麵包屑中每個項目在整個導航路徑中的位置順序。項目位置通常以數字表示，從第1個項目（通常是首頁）開始，逐步遞增。目的是確定該項目在麵包屑中的層次和順序。

只要正確使用結構化標記設定麵包屑，就算網站上未呈現相對應的麵包屑UI，被偵測到的Google結構化資料也會生效！

最後，Welly仍建議，麵包屑應同時滿足「人」及「搜尋引擎」才能同時增強使用者體驗和網站的能見度。

（一）3種麵包屑導覽標記常見語法

我們假設HTML麵包屑最終呈現的樣子是：Recipe（食譜） ＞ Hong Kong Cuisine（港式料理） ＞ Shumai（燒賣），下方分享2種常見的麵包屑導覽標記語法：

Breadcrumb HTML

根據上方的導覽路徑，我們以Google開發者中心文件中提供的代碼作為範本，麵包屑HTML範例如下：

以「ol」和「li」建立序列，在其中增加「a href連結」與連結名稱，並按照順序往下進行。

Breadcrumb Microdata微資料

Microdata主要以「meta」標籤標示出麵包屑導覽的排序，以下分享Google開發者中心文件中的程式代碼：

Breadcrumb JSON-LD

在我們的操作經驗上，Welly團隊工程師較推薦使用JSON-LD語法，JSON-LD Breadcrumb Example如下：

範例中的「type」就是結構化標記的意思，「"@type"：Breadcrumlist"」是在告知搜尋引擎，底下的資訊為麵包屑列表，並且包含3個List Item，分別是第1層Recipe（食譜）、第2層Hong Kong Cuisine（港式料理）、第3層Shumai（燒賣）。

以下特別分享Google支援的3個ListItem屬性：

除了上述3種常見的語法之外，RDfa也是Google官方文件說明的麵包屑導覽標記方式。

RDfa的範例可以參考：導覽標記 (BreadcrumbList) 結構化資料

另外，雖然CSS並非標記語言，但你可以選擇在HTML語法中，添加麵包屑CSS（Breadcrumb CSS）自定義麵包屑外觀及樣式，透過CSS麵包屑（CSS Breadcrumb）風格語言打造更符合網站特色的導航工具。

✨Google官方參考資料：導覽標記 (BreadcrumbList) 結構化資料

（二）3種麵包屑設定工具分享：React Breadcrumbs、Bootstrap麵包屑等

1. Breadcrumb React

Breadcrumb React有客製化的服務，可以根據網站需要自定義麵包屑的外觀和功能，做到客製化。此外，React也支援動態生成麵包屑，使用者能夠根據網站內容的變化自動更新麵包屑。

React入口網址：https://react.dev/

2. Breadcrumb Bootstrap

Bootstrap提供了許多用於網頁設計的組件和模板。這個工具提供了預設模板和配置選項，開發人員可以輕鬆的設定麵包屑導航功能。

Bootstrap入口網址：https://getbootstrap.com/

3. Breadcrumb TypeScript

TypeScript Breadcrumb是一個使用TypeScript程式語言的麵包屑設定工具。

TypeScript是一種靜態類型的JavaScript擴充語言，這個工具強調代碼的可讀性和可維護性，同時提供了豐富的代碼範例。

TypeScript入口網址：https://www.typescriptlang.org/

（三）麵包屑測試2方法分享！

麵包屑檢查方法1. Google Search Console

透過Google Search Console（GSC）工具上「強化項目的導覽標記」，你可以檢查自己設定的麵包屑是否有誤，如果有錯誤，GSC則會列出，提醒你盡快修正。

✨Welly SEO也有撰寫英文版的Google Search Console介紹文章，歡迎參考：Comprehensive Google Search Console Guide for SEO 2023

麵包屑檢查方法2. 複合式搜尋結果測試

• 複合式搜尋結果測試：https://search.google.com/test/rich-results?hl=zh-tw

除了透過自己網站的GSC檢查，你也可以直接透過Google提供的「複合式搜尋結果測試」進行檢查，只要將網站URL複製貼上，即可快速檢查結構化資料設定的狀況，當然其中也包含麵包屑。

（四）4個麵包屑操作常見錯誤

在設定麵包屑時，應避免以下3個常見問題：

➊ 「同名稱、不同網址」

例如：2個被稱為「SEM HK公司」的麵包屑連結，但分別連結到網站的文章分類和首頁。

這可能會讓用戶產生困惑，因為他們無法準確識別他們所在的位置。應該在麵包屑中提供更具體的資訊，方便使用者能夠清楚地辨認每個頁面的不同。

➋ 「同網址、不同名稱」

例如：有2個麵包屑導航連結到「SEO是什麼」這篇文章，但分別以「介紹SEO」與「認識SEO」不同的名稱顯示。

為了解決這個問題，我們應該確保麵包屑的名稱與其對應的內容一致，提供一致性和準確性的導航體驗。

➌ 階層錯誤和遺漏

例如：在購物網站上，少了「女生配件」的大分類，直接跳到「圍巾」、「項鍊」等的商品頁面；或是麵包屑導覽上沒有首頁的階層，若用戶要回到首頁則只能從所在頁面點按返回鍵或點擊最上方LOGO。

我們應該確保每段階層結構正確並能夠清晰的指示使用者的位置。同時，也要確保每個麵包屑連結都能連接到相對應的頁面或分類。

➍ 為了麵包屑導覽移除主導航列

Breadcrumb麵包屑導航與放置於網頁最上方的Navbar主導航列並非替代關係，雖然看似都是網站導航，但兩者的功用大不相同，前者主要是結構化標記，方便用戶回到先前拜訪的頁面；後者則是整個網站UI/UX設計的一環，主要方便用戶探索網站的其他頁面，因此切勿只擇一設計網站！

（五）加碼分享！WordPress Breadcrumb基本設定教學

如果你預計操作的麵包屑網頁是WordPress，目前有許多Breadcrumb WordPress外掛程式可以選擇，包含：「Yoast SEO」、「Breadcrumb Trail」、「Rank Math」等，下載後依照官方說明文件即可進行操作。

下方我們以較為知名的「Yoast SEO」作為範例，提供Breadcrumb WP設定步驟教學：

1. 到WordPress後台的「外掛」，下載Yoast SEO安裝並啟用
2. 到WordPress後台左側選單，點選「SEO ＞ Search Appearance ＞ 麵包屑」
3. 依照欄位說明填入麵包屑資訊，並保存
4. 至WordPress建立新佈景主題，將程式代碼貼上就完成啦！

✨詳細的影片教學可參考Yoast官方資料：How to implement Yoast SEO breadcrumbs

以上就是Breadcrumb麵包屑的介紹，麵包屑功能雖然看似不起眼，但對於使用者與搜尋引擎來說是一個不可或缺的加分工具，也是在執行SEO中很重要的工作；如果不清楚如何設置麵包屑，建議可以交給HK SEO公司外判協助，像是Welly SEO等。

如果你對SEO有任何問題，Welly專業且強大的團隊都可以提供協助與服務。想要獲取免費的SEO檢測報告，也可以透過下方黃色按鈕與Welly團隊聯繫！