官網『麵包屑導航』(Breadcrumbs) 設計完整攻略：中小企業如何用一排看似不起眼的小路徑，把訪客的『我不知道自己在哪』變成『我還能點哪繼續逛』，順便把 SEO 一起吃下來
麵包屑是官網最被低估的元件之一。用一排小小的路徑列，就能讓訪客不迷路、跳出率下降、還能讓 Google 更喜歡你的網站。這篇一次講完設計與 SEO 眉角。
你有沒有想過一件事：從 Google 搜尋點進你官網的訪客，有超過八成不是從首頁進來的。他們可能是搜「某某產品規格」進到某個商品頁；搜「某某教學」進到某篇部落格。也就是說，訪客第一眼看到你的網站，通常不是漂漂亮亮的首頁 Hero，而是一個他從來沒見過的內頁。
這時候，如果沒有任何「你現在在哪、上一層是什麼」的線索，訪客只剩兩個選擇：一是點左上角 Logo 回首頁，二是按上一頁離開。前者的機率非常低，後者才是常態。你的內容再好、產品再棒，訪客一秒就走。
能救回這件事的，就是今天要講的主角：麵包屑導航（Breadcrumbs）。一排看起來很不起眼的路徑列，卻同時解決了「訪客會不會迷路」跟「Google 懂不懂你的網站結構」兩件事。這篇文章一次講完。
Photo by Heriberto Murrieta on Unsplash
一、什麼是麵包屑？為什麼叫這個名字？
「Breadcrumbs」這個字來自格林童話《糖果屋》，兄妹倆進森林時沿路撒麵包屑，好讓自己找到回家的路。網頁上的麵包屑做的是一樣的事：告訴訪客「你是從哪一層一層走進這一頁的」，同時提供每一層的返回連結。
它長這樣：
首頁 > 商品分類 > 廚房家電 > 咖啡機 > DeLonghi 全自動咖啡機 EC685看起來簡單到不行對吧？但它同時做了三件事：
- 回答「我在哪」：讓訪客一眼看到自己在網站架構裡的位置
- 提供「我怎麼回去」：每一個層級都是可點擊的連結，往上跳一層很方便
- 告訴 Google「這頁是誰的下屬」：搭配結構化資料，搜尋結果會顯示這條路徑，點擊率會提高
一個元件同時服務使用者體驗跟 SEO，這種投資報酬率高得嚇人的元件不多，麵包屑是其中一個。
二、中小企業官網真的需要麵包屑嗎？
常見的問題是：「我們網站沒幾頁，需要麵包屑嗎？」老實說，如果你的官網真的只有五頁——首頁、關於我們、服務、案例、聯絡我們——那可以不做。但只要你符合以下任何一項，麵包屑就會明顯有幫助：
- 有商品或服務分類（例如「餐飲設備」下面還有「烘焙」、「咖啡」、「冷藏」）
- 有部落格或知識文章，且用了分類與標籤
- 有案例、作品集，並依產業或類型分類
- 有多層的產品目錄（例如 B2B 型錄站）
- 有多語系或多地區版本
只要層級一多，訪客就有機會迷路。根據 Nielsen Norman Group 多年的可用性研究，網站訪客「回頭找上一層」的行為比大家想的頻繁很多——尤其在瀏覽商品時，「看完 A 產品想回去看同類的 B 產品」是最常見的動作。沒有麵包屑，這件事就要點三次；有麵包屑，一次搞定。
三、麵包屑其實有三種，用錯種類會變成裝飾品
很多網站的麵包屑做出來只是「好看的裝飾」，並沒有真正解決導覽問題，因為根本沒挑對類型。實務上麵包屑分三種：
1. 位置型（Location-based）— 最常見、最推薦
顯示這一頁在網站架構裡的位置，跟訪客怎麼進來的無關。這是絕大多數官網最適合的做法，例如：
首頁 > 部落格 > 數位行銷 > SEO 入門教學好處：邏輯清楚、每個訪客看到的都一樣、對 SEO 最友善（Google 也是這樣理解網站結構）。
2. 屬性型（Attribute-based）— 適合電商篩選
用來顯示訪客用了哪些篩選條件到達這一頁，例如：
男鞋 > 品牌：Nike > 尺寸：US 9 > 顏色：黑好處：讓訪客可以一步一步取消條件。適合有 Faceted Search 的電商網站。
3. 路徑型（Path-based）— 幾乎不要用
顯示訪客實際走過的頁面歷史，跟瀏覽器的「上一頁」重複，容易造成混亂。除非有特殊情境，一律不做。
結論：中小企業官網 95% 的情況用「位置型」就對了。除非你在做多維度的商品篩選，才需要考慮屬性型。
Photo by Kelly Sikkema on Unsplash
四、設計麵包屑的 7 個實務眉角
1. 放在頁面主標題上方，不要塞到頁尾
麵包屑要在訪客一眼就能看到的位置，通常放在頁面主要內容的正上方、H1 標題的上一行。放到頁尾等於沒做，訪客滑到底通常已經決定要不要留下了。
2. 字要小、顏色要淡，不要跟主內容搶焦點
建議字體大小 12–14px，顏色用中灰（#666、#888 這種），連結用底線或淺色標示。它是輔助元件，不是主角。做得太搶眼反而干擾閱讀。
3. 分隔符號用 > 或 / 就好，別用花俏圖示
最通用的分隔符是「>」（大於）或「/」（斜線），有些站也用「»」。這些符號視覺上輕、辨識度高。用花俏的箭頭圖示或表情符號會讓麵包屑顯得雜亂，且在無障礙工具讀取時會出問題。
4. 最後一層（當前頁）不要做成連結
你已經在這一頁了，把當前頁做成可點的連結一點意義也沒有，還會讓訪客困惑。最後一層一律用純文字、不加底線，通常會微微加粗或顏色更深，代表「你就在這」。
5. 手機版怎麼辦？橫向捲動比多行更好
手機螢幕窄，長一點的麵包屑一定會超出。處理方式有兩種：
- 允許橫向捲動（推薦）：使用者可以左右滑動看完整路徑，程式碼上加
overflow-x: auto; white-space: nowrap;就好 - 只顯示上一層：例如「< 返回：咖啡機」這種簡化版，比較適合純電商 App 風格
絕對不要做的：把長麵包屑硬折成兩三行，視覺會很亂。
6. 一定要加結構化資料（Schema.org BreadcrumbList）
這是麵包屑 SEO 最大的價值。加上 JSON-LD 結構化資料後，Google 搜尋結果可能會用你的麵包屑取代冗長的 URL，變成漂亮的層級路徑，例如：
oron.com.tw > 部落格 > SEO
你的文章標題比起顯示一串亂七八糟的 URL 好看太多，點擊率也會提高。範例程式碼（放在頁面 <head>）：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "首頁", "item": "https://oron.com.tw/"},
{"@type": "ListItem", "position": 2, "name": "部落格", "item": "https://oron.com.tw/blog"},
{"@type": "ListItem", "position": 3, "name": "SEO 教學"}
]
}
</script>用 Google 的 Rich Results Test 檢查一下，通過就代表 Google 有讀到。這件事不用花你半小時，效益卻可以吃好幾年。
7. 無障礙（Accessibility）也要顧到
用 <nav aria-label="breadcrumb"> 包起來，讓螢幕閱讀器可以正確辨識這是導覽元件。當前頁那一項加上 aria-current="page"。這些屬性寫或不寫，肉眼看不出差別，但對視障使用者跟 SEO 都有幫助，加一下沒什麼成本。
五、五個常見的錯誤，看看你的網站中了幾個
- 首頁沒放麵包屑，內頁才有：訪客會覺得「這個網站的結構怎麼一下有一下沒有」。正確做法：首頁不需要麵包屑（它本來就是最上層），但所有內頁都要有。
- 麵包屑跟主導覽選單不一致：例如頂部選單寫「產品服務」，麵包屑卻寫「Services」。這是同一個網站分成兩個人做的常見結果，訪客會困惑。用同一套命名。
- 層級太深，塞到 6、7 層：麵包屑超過 4 層通常代表你的資訊架構出問題了。要嘛合併分類，要嘛把中間層省略（用「首頁 > ... > 分類 > 商品」的省略表示法）。
- 當前頁做成可點連結：如前所述，點了會重整頁面，訪客會困惑「怎麼沒反應」。
- 只做視覺沒加結構化資料：等於送到嘴邊的 SEO 紅利不吃。這是最可惜的錯誤。
Photo by Tran Mau Tri Tam ✪ on Unsplash
六、麵包屑帶來的實際好處
根據 Baymard Institute、Nielsen Norman Group 等 UX 研究機構長年的觀察，加上完整麵包屑（含結構化資料）的網站，通常會出現這幾個變化：
- 跳出率有機會下降：訪客有地方去，不會一看到內頁就走
- 每次瀏覽頁數增加：往上跳分類再看其他商品的行為變多
- 搜尋結果版位變好看：URL 被麵包屑路徑取代，點擊率通常會上升
- 內部連結結構更清楚：分類頁被更多內頁連向，權重集中
這些不是麵包屑一個元件單獨做到的，但它是「投入成本很低、報酬明顯」的其中一環。整個做完不需要一個工作天，效益是持續的。
七、行動建議：如果你今天要做，怎麼做？
三個步驟：
- 先把資訊架構畫清楚：把你的官網分類、子分類全部列出來，確認層級不超過 4 層。這一步比寫程式重要，架構亂了麵包屑也救不了。
- 選一套模板實作：如果你是 WordPress 站，Yoast SEO、Rank Math 都內建麵包屑，開一下設定就好，會自動包含結構化資料。如果是客製化站，讓工程師花半天做好樣式與 JSON-LD。
- 用 Google Rich Results Test 驗證：貼你的網址進去，看有沒有正確辨識 BreadcrumbList。有通過，就等 Google 慢慢重爬。
麵包屑不是酷炫的功能，也不是可以拿去給老闆炫耀的視覺設計。但它是一個經典的「小地方做對，長期回報大」的元件。如果你的官網還沒做，或做了但沒加結構化資料，這週就可以把它列進待辦清單。
需要專業團隊幫你檢視官網結構、補上麵包屑跟結構化資料嗎？歡迎與奧隆聯絡，我們專注幫中小企業把每個看似小的細節，都變成訪客願意留下、Google 願意推薦的理由。