先說結論：麵包屑這東西，其實是在幫使用者和 Google 畫地圖
今天想聊聊「麵包屑導航 (Breadcrumb Navigation)」。嗯…聽起來好像很專業，但說穿了，它就是你在逛網站時，通常在頁面最上面看到的那一排「首頁 > 分類 > 目前頁面」的小小路徑。 老實說，這東西很容易被忽略，但它對網站的易用性和 SEO 排名，影響真的比想像中大。
它就像你在逛一間超大的百貨公司，如果沒有樓層指南和指示牌，你是不是很快就迷路了？ 麵包屑就是那個指示牌，它不只告訴你「你在哪」，還讓你隨時可以「回到上一層」看看其他東西，而不用一直按「上一頁」按鈕。對使用者來說，體驗會好很多，比較不容易感到煩躁或迷失。 對 Google 來說，這等於是給了它一張清晰的網站結構圖，幫助它的爬蟲更有效率地理解你網站的內容層級，進而可能提升排名。
為什麼突然想聊這個？因為太多人做錯了…
最近看了一些網站，發現麵包屑這個小東西，出錯率還真不低。最常見的問題就是…在手機版上，那個路徑長到爆炸，整個畫面變得很亂，甚至會蓋到主要內容。 或是為了塞關鍵字，把分類名稱搞得又臭又長，完全沒考慮到使用者是不是看得懂。
還有一些網站，麵包屑只是個裝飾品，點了也沒反應，或是連結到錯誤的頁面。 這真的很糟糕，不只使用者體驗差，對 SEO 來說可能還有反效果。所以，想說來整理一下，到底這東西該怎麼設計才對。
麵包屑不只一種，你選對了嗎？
很多人可能不知道，麵包屑其實有分種類。選錯了，效果會差很多。 大致上可以分成這三種：
| 麵包屑類型 | 適合情境 | 我的碎碎念… |
|---|---|---|
| 階層式 (Hierarchy/Location-based) | 這是最常見的一種，大概 90% 的網站都用這個。 就是單純顯示頁面在網站架構中的位置。 | 基本上無腦選這個就對了。使用者最熟悉，最直覺。除非你的網站結構很特別，不然用這個最穩。 |
| 屬性式 (Attribute-based) | 電商網站最常用。 當使用者篩選商品時，麵包屑會顯示他選了哪些屬性，例如「球鞋 > Nike > 男款 > 尺寸9」。 | 這個很實用，特別是商品選項多的時候。它可以讓使用者清楚知道自己篩選了什麼，也可以很方便地取消某個篩選條件，回到上一層。 |
| 路徑式 (Path/History-based) | 這個比較少見。它會顯示使用者實際走過的路徑，有點像瀏覽器的歷史紀錄。 | 老實說… 我個人不太推這個。因為它跟瀏覽器的「上一頁」功能有點重複，有時候反而會讓使用者更混亂。除非你有很特殊的理由，不然盡量避免。 |
優化的 5 個關鍵設計（其實是避坑指南）
好了，理論講完，來點實際的。到底要怎麼設計，才能讓麵包屑發揮最大功用？我覺得有 5 個重點一定要注意：
1. 手機版設計，簡潔是王道
這點真的超重要。在電腦上看起來很正常的麵包屑，到手機上可能就是一場災難。 因為螢幕寬度有限，如果層級一多，文字就會擠成一團，甚至換行換得很醜。 比較好的做法是，只顯示「... > 上一層 > 目前頁面」，或者用可以左右滑動的方式呈現。總之，千萬不要讓它佔據太多垂直空間，把主要內容擠下去。
2. 加上結構化資料 (Schema)
這個是給 Google 看的，對 SEO 超級重要。 你要在網頁的程式碼中，用 Google 指定的格式（通常是 JSON-LD）告訴它「嘿，這是一串麵包屑」。 這個動作叫做加上「BreadcrumbList」結構化資料。 做了之後，Google 就更能理解你的網站架構。 而且，在搜尋結果頁面 (SERP) 上，你的網址可能會直接顯示成麵包屑的路徑，而不是一長串 URL。這看起來更專業，也能稍微提升點擊率。
3. 最後一層的處理方式
關於麵包屑的最後一層，也就是「目前頁面」，一直有些爭議。到底該不該加上連結？我的建議是：不要加。因為使用者已經在這一頁了，再給一個連到自己的連結，沒有意義，還可能讓使用者困惑。 最好是用純文字顯示，或者用不同的樣式（例如粗體）來強調它是當前頁面。Bootstrap 的文件也是這麼建議的，它會建議你用 `aria-current="page"` 來標示當前頁面，這對螢幕閱讀器等輔助工具有好處。
4. 視覺設計要低調但清晰
麵包屑是輔助導覽，不是主角。 所以它的視覺不需要太搶眼。字體可以比內文小一點，顏色也用比較中性的灰色調。但是，它又必須是清晰可辨的，讓使用者需要它的時候能馬上找到。分隔符號也很重要，最常用的是「>」或「/」。 這些小細節都會影響整體的使用者體驗。
5. 檢查所有連結是否有效
這聽起來像廢話，但真的很多人會忽略。 想像一下，使用者想回到上一層分類，結果點了麵包屑卻跳到一個 404 錯誤頁面，那有多掃興？所以，一定要定期檢查所有麵包屑的連結都是有效的。特別是網站改版或調整分類架構之後，這邊最容易出錯。
不只是 SEO，更是尊重使用者
說到底，我覺得優化麵包屑，不單純是為了討好 Google、為了 SEO。它更像是一種對使用者的尊重。 一個好的資訊架構，能讓使用者在你的網站裡逛得舒服、自在，不用花時間去猜「我現在在哪裡？」。 當使用者覺得你的網站很好用，他們自然會停留得更久、逛得更多，跳出率也就會降低。 這些好的使用者訊號，最終還是會回饋到你的 SEO 表現上。
所以，下次在規劃或檢查網站的時候，多花個幾分鐘看看那排小小的麵包屑吧。它可能比你想像的，還能幫上更多忙。🤔
對了，你們自己網站的麵包屑是用哪一種啊？或是有看過什麼很酷或很糟的設計嗎？歡迎留言分享一下。
