電商知識庫
麵包屑導航設計完整指南
看似不起眼，卻是 SEO 與 UX 的雙重加分元件
麵包屑導航是電商網站最被低估的元件之一。它佔的版面很小，卻能同時改善使用者體驗、降低跳出率、提升 SEO 排名。正確設計的麵包屑能讓 Google 搜尋結果顯示完整路徑取代醜陋網址，點擊率提升 15-30%。本文教你從層級規劃、結構化資料標記到行動版設計的完整實作。
麵包屑層級應對應實際分類結構，建議規範：首頁永遠是第一層（不要省略）；每層都要是真實存在的頁面（避免虛假階層）；總層級控制在 5 層內，太深表示分類架構需要扁平化；最後一層（當前頁）以灰色或無連結方式呈現，與可點擊層級做視覺區隔；分隔符號使用 >、/ 或 › 都可以，全站保持一致。
在 HTML 中除了視覺呈現麵包屑外，更重要的是加上 schema.org 的 BreadcrumbList 結構化資料。這段 JSON-LD 標記告訴 Google：「這是我的網站階層」，Google 會在搜尋結果頁用麵包屑取代網址顯示，更人性化也更容易被點擊。標記內容包含每一層的位置（position）、名稱（name）、連結（item）。
行動裝置螢幕窄，完整麵包屑容易爆版。建議行動版採用「智慧顯示」策略：保留首頁 + 最近一層的可點擊連結（如「首頁 > ... > 上衣 > 當前商品」中間用省略號）；或設計成水平捲動條，顧客可橫向滑動看完整路徑；結構化資料仍要保留完整層級給搜尋引擎。
特殊頁面的麵包屑處理：分類列表頁顯示「首頁 > 大分類 > 子分類」；篩選結果頁（如「男裝 / 上衣 / 黑色 / L號」）建議只顯示到分類層，不把篩選條件納入麵包屑（避免無限路徑組合）；搜尋結果頁顯示「首頁 > 搜尋：關鍵字」即可；商品標籤頁如「夏季新品」、「特價商品」可獨立成一層。
視覺設計細節：字級不要太大（建議 13-14px），避免搶走主視覺；連結文字使用品牌主色或灰色，懸停（hover）時加底線；當前頁面用較深灰色不可點擊；與頁面內容之間留 1-1.5em 間距；不要使用過於華麗的圖示，乾淨清楚最重要。
NT$24,800/年起，享受完整電商解決方案：
麵包屑導航是顯示在頁面上方的層級路徑，例如「首頁 > 男裝 > 上衣 > T恤」。對電商而言幾乎是必備元件，能降低跳出率、提升站內停留時間，也有助於搜尋引擎理解網站架構。
麵包屑對 SEO 的三大幫助：建立內部連結網絡讓搜尋引擎更好爬行；上層分類頁能透過麵包屑反向獲得權重傳遞；搭配 BreadcrumbList 結構化資料後，Google 搜尋結果頁會顯示完整路徑，點擊率明顯提升。
原則上麵包屑層級應對應網站實際的分類架構：首頁 → 大分類 → 中分類 → 商品頁，建議不超過 5 層。每一層都要是真實可點擊的頁面，當前頁面通常不可點擊。
商品頁的最後一層建議顯示商品名稱簡稱（10-15 字內），完整商品名留給 H1 標題。可以採用「首頁 > 分類 > 商品名前 12 字...」的截斷顯示方式。
行動版麵包屑常見的設計：水平捲動條（橫向滑動看完整路徑）或只顯示上一層連結。建議混合使用，頁面內保留結構化資料給搜尋引擎讀取。