麵包屑（Breadcrumb）是什麼？功能、類型、SEO重要性與WordPress設定教學

瀏覽網站時，你可能在頁面最上面看過像「首頁 ＞ 部落格 ＞ SEO知識 ＞ 麵包屑」這種路徑，這就是網站常見的「麵包屑」導覽列。

麵包屑雖然只佔頁面一小塊，但它能讓訪客一眼就知道自己現在在網站哪個位置，想回上一層分類也能直接點，不用一直按上一頁。同時，它也能幫助搜尋引擎搞懂你網站的分類架構和頁面之間的關聯。

如果你的網站文章很多、產品分類很雜，或是頁面層級設得比較深，那好好規劃麵包屑不只讓使用者逛起來更順，也是網站架構和技術SEO裡很重要的一環。

〈延伸閱讀：SEO是什麼？SEO行銷初學者必看，快速學會SEO基礎〉

麵包屑是什麼？

麵包屑英文叫Breadcrumb，也有人叫它麵包屑導覽、麵包屑導航或路徑導覽，講白一點，就是一層一層的連結，讓你一眼就知道現在看的這個頁面，在網站裡面到底是擺在哪個位置。

常見的呈現方式就像這樣：
首頁 ＞ SEO知識 ＞ 網站架構 ＞ 麵包屑是什麼

逛網站的人只要直接點一下前面的分類名稱，就可以馬上跳回上一層，不用再特地回去開主選單，也不用一直猛按瀏覽器的返回鍵。

「麵包屑」這個名字其實是從童話故事《糖果屋》來的，故事裡主角沿路丟麵包屑做記號，這樣才知道怎麼走回家。網站上的麵包屑也是類似的概念，就是幫使用者搞清楚自己現在人在網站的哪個分類、哪一層裡面。

Google有支援一種叫BreadcrumbList的結構化資料，可以用來標示頁面在網站階層中的位置，幫助搜尋引擎更清楚辨識首頁、分類頁、子分類跟內容頁之間的關係。

〈參考資料：導覽標記 (BreadcrumbList) 結構化資料〉

麵包屑的主要功能有哪些？3大作用讓網站導覽更清楚

麵包屑不光是讓你知道現在在哪一頁而已，它還能幫使用者搞清楚位置、快速跳回上一層，順便把網站內容跟內部連結串在一起。下面整理了麵包屑的3大功能，帶你了解它是怎麼讓瀏覽體驗跟網站架構變得更好用的。

顯示使用者目前所在位置

使用者不一定會從網站首頁進來，也可能透過Google搜尋結果、社群貼文或外部連結，直接跳到某篇文章、商品頁或服務頁。這時候麵包屑就能馬上顯示這個頁面屬於哪個分類，讓使用者一眼搞懂網站架構，減少在網站裡迷路的狀況。

舉例來說，當使用者進到一篇「網站速度優化」的文章時，可以透過像「首頁 ＞ SEO優化 ＞ 技術SEO ＞ 網站速度優化」這樣的麵包屑，很快知道自己現在落在哪個分類底下。

〈延伸閱讀：什麼是反向連結? SEO一定要做外部連結嗎？〉

提供返回上層頁面的捷徑

使用者看完文章或商品後，通常會想繼續逛逛同一分類的其他內容。這時麵包屑就派上用場了，可以直接點一下回到上一層分類，不用再特地開主選單或重新從首頁慢慢找，操作路徑變短，逛起來也更順手。

串聯網站分類與內容

麵包屑裡面的首頁、分類頁、子分類通常都會加上連結，所以它其實也形成了一個穩定的內部連結架構。當文章頁連回分類頁，分類頁再串起多篇相關文章時，搜尋引擎會更容易發現你的網站內容，同時也能引導使用者繼續看更多相近主題的文章，對使用者體驗和SEO都有幫助。

麵包屑、主選單、導覽列有什麼差異？

麵包屑、主選單和導覽列雖然都有網站導覽的功能，但各自的使用目的其實不太一樣。一般來說，導覽列是整個網站導覽功能的區塊，裡面可能包含Logo、主選單、搜尋功能和聯絡按鈕；主選單則是提供網站主要頁面的入口，讓訪客可以直接連到那些重點頁面。麵包屑比較像是輔助性質的導覽工具，主要用途是告訴使用者目前這個頁面在網站裡面是落在哪個層級。

不同網站對於「導覽列」和「主選單」這兩個稱呼可能多少有點出入，但有一點要記住，就算網站已經設定好麵包屑，它還是沒辦法完全取代主要導覽選單該做的工作。

麵包屑、主選單、導覽列差異比較

麵包屑有哪些類型？3種常見導覽方式一次看懂

依照網站架構跟使用情境的不同，常見的麵包屑設計大致可以分成階層式、屬性式和路徑式3種類型。每一種適用的網站不太一樣，像是企業網站、內容網站或電商平台，適合的麵包屑形式也不同，還會影響使用者怎麼逛網站、怎麼理解頁面層級。

階層式麵包屑

階層式麵包屑會依照網站原本的分類架構，直接顯示目前頁面落在哪個位置，例如：

首頁 ＞ 部落格 ＞ SEO優化 ＞ 麵包屑

這是現在最常見的麵包屑類型，很適合企業網站、部落格、媒體網站跟一般電商網站。階層式麵包屑的路徑通常是固定的，可以清楚呈現頁面之間的上下層關係，對搜尋引擎理解網站架構也比較有幫助。

屬性式麵包屑

屬性式麵包屑會根據商品或內容的特徵來顯示，常見於有多種篩選條件的電商網站，例如：

首頁 ＞ 女鞋 ＞ 運動鞋 ＞ 白色 ＞ 24公分

這種麵包屑可以呈現商品的品牌、尺寸、顏色、價格或其他屬性，讓使用者知道自己目前套用了哪些篩選條件，也能快速回到上一層的商品分類。不過要留意的是，如果網站把不同屬性跟篩選條件的組合都產生出獨立網址，而且這些頁面又被搜尋引擎抓到的話，就可能跑出一堆內容相近的頁面。所以這種情況下，還需要搭配rel="canonical"標記、索引管理跟篩選頁面的規劃，避免那些重複性高或搜尋價值偏低的頁面被大量索引。

〈延伸閱讀：重複內容影響SEO成效， 如何正確使用Canonical？〉

路徑式麵包屑

路徑式麵包屑會依照使用者實際點擊的順序來顯示，例如從搜尋頁進到分類頁，再點進商品頁。不過因為每個人的瀏覽路徑都不太一樣，而且功能其實跟瀏覽器的返回鍵差不多，所以比較少被當作網站主要的麵包屑設計。大多數網站還是建議優先採用階層式麵包屑，讓所有使用者和搜尋引擎看到的都是同一套穩定的網站層級結構。

麵包屑在Google搜尋結果中如何呈現？

當網站有加入BreadcrumbList結構化資料之後，Google就有可能在電腦版搜尋結果的可見網址中，顯示網站網域加上麵包屑路徑，幫忙使用者判斷這個頁面屬於哪個分類，示意大概會像這樣：

da-vinci.com.tw ＞ SEO知識 ＞ 麵包屑

另外，Google在2025年1月23日有宣布更新搜尋結果的呈現方式，目前行動版搜尋結果的可見網址只會顯示網站網域，不再顯示麵包屑路徑；電腦版搜尋結果則維持不變，還是會顯示網域加上麵包屑。雖然行動搜尋結果上看不到麵包屑了，但網站前台手機版的麵包屑還是有確認位置跟返回上層分類的導覽功能，並不會受到影響。

〈參考資料：簡化行動搜尋結果中的可見網址元素〉

麵包屑對SEO有什麼幫助？3大價值完善網站架構

麵包屑不是那種可以直接讓排名往前衝的密技，但它能幫搜尋引擎搞懂網站的層級、增加相關頁面之間的串聯，同時也讓使用者逛起來更順，整體來說能讓網站的SEO架構更穩固。

幫助搜尋引擎理解網站架構

麵包屑會把首頁、分類頁、子分類到內容頁之間的層級關係一一標示出來，等於幫搜尋引擎畫了一張網站的架構圖，讓它一看就懂這些頁面是怎麼上下串聯的。舉例來說，如果某篇文章的麵包屑是「首頁 ＞ SEO優化 ＞ 架構優化 ＞ 麵包屑」，搜尋引擎就能清楚判斷這個頁面是落在SEO優化底下的網站架構主題裡面，而不是一篇跟其他內容八竿子打不著的獨立頁面。

〈延伸閱讀：好的SEO網站架構是什麼？這樣做SEO成功率才會高！〉

增加網站內部連結

麵包屑裡面的每一層分類通常都會加上連結，所以可以增加內容頁跟分類頁之間的串聯。這些固定出現在頁面上的連結，不只對搜尋引擎爬取相關內容有幫助，也能把使用者引導到其他相近主題的頁面。不過要留意的是，麵包屑的名稱還是要以自然、清楚為主，不需要為了SEO硬塞一堆關鍵字。舉例來說，使用「網站架構」會比「最完整專業網站SEO架構優化教學」來得清楚好懂，使用者一看就知道是什麼。

〈延伸閱讀：網站連結優化怎麼做？讓Google看懂你的SEO〉

改善使用者體驗

當使用者從搜尋結果直接進到網站內頁時，麵包屑可以馬上告訴他現在在哪個位置，也能讓他直接返回相關分類繼續逛。這項功能對電商網站、知識型網站、大型企業網站，還有產品或文章數量比較多的網站來說特別實用，能有效縮短操作路徑，讓網站逛起來更順手更方便。

〈延伸閱讀：網頁設計的使用者體驗(UX)如何執行？〉

網站麵包屑怎麼設定？ 7步驟完成操作與檢查

設定網站麵包屑的時候，除了要先規劃清楚的頁面層級，也要同時顧好連結設定、手機版顯示跟結構化資料這幾個環節。以下整理7個操作步驟，幫你建立一套好瀏覽、也方便搜尋引擎理解的網站導覽架構。

1. 規劃網站層級

設定麵包屑之前，建議先整理好網站的首頁、主分類、子分類跟內容頁之間的關係，例如：

首頁 ＞ 部落格 ＞ SEO知識 ＞ 技術SEO ＞ 結構化資料

過程中盡量避免頁面層級卡太深，也不要把同一個頁面塞進好幾個沒有直接關係的分類裡面，免得使用者和搜尋引擎都搞混。

2. 放在主選單與H1標題之間

麵包屑通常會放在網站主選單的下面、頁面H1標題的上方。這個位置的好處是，使用者進到頁面後可以馬上知道自己現在在哪一層，但又不會擋到主要內容的閱讀。

3. 使用簡短明確的名稱

每一層的名稱最好簡短又好懂，避免用太長的名稱或硬塞一堆關鍵字進去。分隔符號可以用「＞」、「／」或箭頭圖示，但建議整個網站統一用同一種樣式，看起來比較一致。

4. 設定可點擊的上層連結

一般來說，首頁、分類頁跟子分類都會加上連結，讓使用者可以直接點回去上層頁面。最後一層代表的是使用者目前所在的頁面，通常不用再加連結，可以透過文字顏色或粗細來跟前面可點擊的項目做區隔，讓訪客一看就知道哪裡可以點、哪裡只是顯示目前位置而已。

5. 調整手機版顯示方式

手機畫面就那麼窄，要是麵包屑層級太多，很容易換行或佔掉一大塊畫面。可以看網站狀況考慮幾種做法：像是不影響理解的前提下只留最近一兩層、讓麵包屑可以左右滑、用省略號把中間層級收起來，或是把太長的名稱縮短一點。在簡化視覺呈現的同時，還是要讓使用者找得到自己現在在哪、能順利點回上層，結構化資料也得乖乖對應好網站實際的架構，不能亂掉。

6. 加入BreadcrumbList結構化資料

除了在網站前台顯示麵包屑之外，也可以加入BreadcrumbList結構化資料，幫助搜尋引擎讀取每一層的名稱、順序跟網址。Google有支援JSON-LD、Microdata跟RDFa等格式，其中JSON-LD通常比較好維護。每個ListItem通常需要設定：

• position：目前項目在麵包屑中的順序
• name：顯示的層級名稱
• item：該層級對應的網址

依照Google的規範，一組BreadcrumbList至少要有2個ListItem。如果最後一層代表的是使用者目前所在的頁面，那這一層的item網址可以省略不填。

〈參考資料：Schema.org: BreadcrumbList〉
〈延伸閱讀：結構化資料是什麼？對關鍵字排名有幫助嗎？〉

7. 測試與監控設定結果

設定好之後，記得用Google複合式搜尋結果測試工具檢查一下程式碼有沒有出錯，同時也可以到Google Search Console看一下麵包屑的結構化資料有沒有跳出無效項目或需要調整的地方。另外，如果網站後續有換佈景主題、SEO外掛、分類架構或網址，也別忘了再把麵包屑的設定從頭檢查一遍，確定一切正常沒跑掉。

WordPress網站如何設定麵包屑？

部分WordPress佈景主題已經有內建麵包屑功能，可以先到「外觀＞自訂」、「外觀＞編輯器」或佈景主題專屬的設定頁面裡面，確認一下有沒有提供麵包屑的開關選項。如果佈景主題本身沒有內建這項功能，也可以透過SEO外掛或專門的麵包屑外掛來設定。

使用Yoast SEO設定麵包屑

進入WordPress後台後，依序前往：Yoast SEO ＞ 設定 ＞ 進階 ＞ 麵包屑

開啟麵包屑功能以後，就可以設定分隔符號、首頁名稱、分類顯示方式跟內容類型這些項目。如果目前使用的佈景主題還沒有跟Yoast的麵包屑整合好，可以透過Yoast的麵包屑區塊、短代碼[wpseo_breadcrumb]或主題版型程式碼，把麵包屑放到網站前台顯示。

〈參考資料：Yoast SEO：Breadcrumbs設定說明〉

使用Rank Math設定麵包屑

先用Rank Math的話，要確認Schema模組已經啟用，然後把操作介面切換到進階模式，再依序前往：Rank Math SEO ＞ 一般設定 ＞ 麵包屑

開啟功能之後，可以調整分隔符號、首頁名稱、分類顯示方式，還有要不要顯示文章標題。設定完成之後，可以透過短代碼[rank_math_breadcrumb]、主題版型程式碼或相容的頁面編輯器，把麵包屑顯示在網站前台。

〈參考資料：Rank Math：如何啟用Breadcrumbs〉

使用Breadcrumb NavXT設定

Breadcrumb NavXT是專門處理麵包屑的WordPress外掛，很適合需要自己調整文章類型、分類法或顯示格式的網站。安裝並啟用以後，可以透過區塊、小工具或主題程式碼來顯示麵包屑。這邊要特別提醒一下，如果網站的佈景主題跟SEO外掛都能產生麵包屑的話，建議只保留其中一種來源就好，避免前台重複顯示，或是同時輸出多組內容不一致的結構化資料。

〈參考資料：WordPress.org: Breadcrumb NavXT〉

麵包屑常見問答

Q1. 每個網站都一定要設定麵包屑嗎？

不一定，如果你的網站頁面不多、分類很單純，或者整個網站就只有一兩層架構，那麵包屑能幫上的忙確實有限。但如果你的網站文章很多、商品很雜、服務項目一大堆，或者分類層級拉得比較深，那就會建議還是把麵包屑設定起來會比較好。

Q2. 麵包屑可以直接提升SEO排名嗎？

麵包屑並不會保證讓網站排名直接往上衝，但它能幫助搜尋引擎搞懂網站層級、建立內部連結，同時改善使用者的導覽體驗，算是網站技術SEO跟架構優化裡面很重要的一塊。

〈延伸閱讀：SEO排名因素有哪些？ 47個要點一次看完！〉

Q3. 設定麵包屑後，Google一定會顯示嗎？

不一定，就算BreadcrumbList結構化資料通過測試，也不代表Google一定會顯示麵包屑，最後到底會不會出現，還是要看Google根據搜尋情境、頁面內容跟系統綜合判斷的結果。

正確設定麵包屑，完善網站SEO架構

麵包屑看起來好像只是頁面上方一小段不起眼的連結，但實際上它串聯了網站的分類、內容架構、內部連結跟使用者動線。在設定麵包屑之前，建議先整理好網站的分類、網址層級跟頁面之間的關係，然後再確認前台顯示、手機版設計跟BreadcrumbList結構化資料有沒有保持一致。

如果網站本身的分類就已經亂七八糟，那就算加了麵包屑，也只是把原本的架構問題直接攤在頁面上而已。如果你的網站分類比較複雜、不確定麵包屑設定得對不對，或是Google Search Console一直跳出結構化資料的問題，歡迎聯絡達文西數位科技。達文西可以從網站架構、技術SEO、內部連結跟使用者體驗這些面向幫你檢查，協助網站建立一套更清楚、更好逛，也更容易被搜尋引擎理解的導覽架構。

(本文為達文西數位科技所有，禁止轉載圖文)