麵包屑（Breadcrumb）是什麼？優化 SEO 排名的導覽路徑！

Breadcrumb中文：麵包屑

麵包屑英文稱為Breadcrumb，簡單來說就是網頁上方的導航條、導航列。

為什麼取名叫麵包屑？

麵包屑的取名由來和格林童話《糖果屋》有關，還記得主角兩兄妹踏上未知的森林旅途時，為了避免迷路而沿途灑下麵包屑嗎？

故事中的麵包屑起到了指路、導覽的作用，因此才會被借來代稱「使用者的路徑」。

當我們瀏覽頁面時，常常也會想回到之前看過的地方再重看一次，這時除了狂按上一頁之外，麵包屑就是非常方便的設計了。

麵包屑長怎樣？麵包屑有什麼功能？

一句話來總結，麵包屑＝網站導覽，不論對使用者或是對搜尋引擎爬蟲都是。

麵包屑長怎樣？其實麵包屑就是我們經常可以在網頁上方看到的「網站導覽列」，幫助使用者辨認目前處於網站中的哪個位置，也可以快速找到自己想去的地方。

舉例來說，給人看的麵包屑列表（BreadcrumbList）大多數會呈現以下3種形式：

• 首頁＞次分類＞文章標題
• 首頁》次分類》文章標題
• 首頁／次分類／文章標題（大多程式預設是這款）

而從網頁程式來說，搜尋引擎的爬蟲看到的不是視覺化的圖表和文字，而是複雜又大量的程式原始碼。

所以如果程式碼太過於複雜、沒有標準化標記，爬蟲很可能就會在茫茫程式碼大海中迷路，導致你的網站無法被搜尋引擎好好收錄。

因此程式碼設計上我們會推薦使用結構化資料（Schema.org），結構化資料類型有很多，而麵包屑列表（Breadcrumb List）就屬於其中一種。

設置麵包屑就像幫爬蟲分門別類，能讓爬蟲快速理解網頁的層級與結構，知道自己正在爬取首頁、次分類還是文章的內容，從而更靈活地呈現網站上的資訊。

比如說在搜尋引擎的標題上方呈現麵包屑，讓使用者更有意願點擊：

而有設置麵包屑的網站對於搜尋引擎友善度增加，自然網站排名也會因此受益提升。

設置麵包屑對SEO有什麼好處？

簡單來說，操作麵包屑對SEO的影響主要有以下這5點：

• 作為指路明燈，提升用戶體驗
• 降低用戶跳出率、離開率，增加網站黏著度
• 不會占用太多頁面空間和版位
• 增加搜尋引擎的友善度、提升排名
• 有機會出現複合式搜尋結果（了解更多複合式搜尋結果種類，可參考Google官方文件：探索 Search Gallery）

因此設置麵包屑不僅可以幫助使用者在瀏覽爬蟲時，不容易迷失方向、能快速辨認自己所在位置，提升使用者體驗、增加對網站的黏著度。

同時也讓搜尋引擎更能夠輕鬆讀懂網站資訊，幫助你展現更多元化的特殊資訊，提升網站曝光度！

（想進一步了解SEO搜尋引擎，可以參考這篇文章：SEO是什麼？SEO優化怎做？SEO搜尋引擎最佳化完整教學）

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

好的，接下來的資訊就是SEO新手們最頭痛的部分了——該怎麼設置麵包屑才好？

根據Google開發者中心，麵包屑標記資料欄位會包含：

• 麵包屑名稱（Name）
• 麵包屑網址（Item）
• 麵包屑位置（Position）－用來標記麵包屑在列表（Breadcrumb List）中的第幾層，1表示第一層，以此類推。

從前期規劃來說，一般行銷們在企劃麵包屑時，會有以下幾個原則：

• 階層名稱（Name） 精簡、盡量選擇純文本元素
• 階層網址（Item） 必須有效（常見最後一層沒有連結）
• 含首頁的階層數（Position） 不宜超過5個（文章層級太深也不利於爬蟲收錄）
• 在麵包屑中放入相關關鍵字

同時，企劃時要避免以下3個常見錯誤：

• 「同名稱、不同網址」（舉例：同樣都叫首頁，一個連到A、一個連到B）
• 「同網址、不同名稱」（舉例：同樣都連到這篇文章，一個名稱叫C、一個叫D）
• 要小心階層錯誤有遺漏（例如：文章頁上一層缺少主題分類或首頁）

接下來如果你有配合的工程師，只需要把你規劃好的麵包屑交給專業的人來設置就好，這裡也提供官方的文件說明，讓你可轉給工程師參考：

• Google breadcrumb 說明文件
• Schema Breadcrumb List 說明文件（設置結構化資料中的BreadcrumbList，讓爬蟲更直覺）

標記完畢資料以後，你還可以利用Google的結構化資料測試工具，來確認你的結構化資料是否正確。

如果你需要自己來設置，底下我們再簡單示範一下麵包屑的建置方法。

麵包屑操作基本教學

Breadcrumb wordpress設置技巧範例

如果你的網頁使用Wordpress，你可以使用外掛（plugin）軟件：Yoast SEO或Breadcrumb，並安裝後回到後台工具列啟用，再按照官方說明文件來操作即可，底下我們以Yoast SEO做為示範：

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

參考說明：Yoast SEO 《How to implement Yoast SEO breadcrumbs》

（對Wordpress SEO怎麼操作不熟悉？5分鐘快速上手WordPress SEO設定：WordPress SEO必學！Yoast SEO外掛設定一把罩！）

Breadcrumb HTML、JSON-LD、Microdata、RDfa

根據Google開發者中心的文件說明，麵包屑導覽標記方式有4種： HTML、JSON-LD、Microdata、RDfa，主要差異在於語法的規範不同、語法寫給誰看。

針對搜尋引擎寫的語法是JSON-LD、Microdata、RDfa這3種，而HTML則比較傾向給人看。

在實務上，我們的團隊工程師推薦JSON-LD，語法比較直覺好寫，並且有語法生成器，不懂程式的新手也能方便操作！

底下我們截圖開發者中心的程式碼範例，用HTML和JSON-LD來做簡單的說明。

假設麵包屑最終是要呈現：Books（書） › Science Fiction（科幻小說） › Award Winners（獲獎作品）

Breadcrumb HTML程式碼範例長這樣

導入HTML語法後，以ol和li建立序列，並在其中添加a href連結和連結名稱，由於是給人看的語法，不需要寫Position，只要按照順序寫下來就好。

Breadcrumb JSON-LD程式碼範例長這樣

上面的type就是結構化標記的意思，「"@type"：Breadcrumlist"」這一句話就是告訴搜尋引擎說底下的資訊為麵包屑列表，裡面又包含3個ListItem，分別是第1層級的Books、第2層級的Science Fiction、第3層級的Award Winners。

如果你對於程式有點基礎，當然也可以複製原始碼再自己修改，但這樣耗時較長。

我們推薦你使用網路上的免費語法生成器，例如Breadcrumb JSON-LD Schema Generator。

▶ 開啟 Breadcrumb JSON-LD Schema Generator

只需按照第1層級往下依序填入名稱、連結，按下Generate即可複製程式碼貼到網站後台。

JSON-LD還有一個特點是可以放在網頁的任意處，這些文字不會出現在前台網頁上，但又能夠讓搜尋引擎檢索，很適合支援視覺版面上有特殊規劃的情況。

底下也提供Breadcrumb Microdata、 RDfa程式碼範例給大家看看

Breadcrumb Microdata程式碼範例：

Breadcrumb RDfa程式碼範例：

看完以上介紹以後，你對麵包屑認識更深了嗎？麵包屑從SEO角度來看，不僅是網站排名的重要基礎，在用戶體驗上也是十分重要的必備細節。

——

如果你本身沒有程式設計的背景，建議你這方面的設置可以諮詢專業的SEO公司，例如我們Welly團隊有內建專業工程師和行銷人員，可以協助你輕鬆完成麵包屑優化喔！

以上就是麵包屑的相關資訊，如果你有其他指標或工具使用上的疑問，或者不確定自己的SEO報告該怎麼解讀，甚至希望專人為你分析，都歡迎點擊下方立即諮詢按鈕，Welly團隊會有專員為您服務！