設計實務

麵包屑導覽是什麼？電商網站的位置指引與返回動線

2026年8月9日・ViewInternet 編輯部

逛電商網站時你有沒有注意過，商品頁上方常有一小串灰灰的文字，像是「首頁 / 女裝 / 洋裝 / 碎花長洋裝」。這串東西就叫麵包屑導覽，名字來自童話裡沿路撒麵包屑找回家的故事。它體積很小容易被忽略，卻默默做著兩件重要的事——告訴訪客現在站在哪一層，以及提供一條快速往回走的路。這篇就把麵包屑導覽講透，看它為什麼是電商動線裡不起眼卻好用的配角。

麵包屑導覽到底是什麼

麵包屑導覽，指的是顯示在頁面上方（通常在標題附近）的那串層級路徑，用連結串起從網站首頁到目前頁面的每一層。它的核心價值是回答訪客心裡的兩個問題——我現在在哪，以及我怎麼回到上一層。當一個人從 Google 搜尋或廣告直接落在某個很深的商品頁時，他其實不知道這頁在整站的哪個位置，麵包屑就像地圖上那個「你在這裡」的標記，讓人瞬間掌握脈絡。它同時也是可點擊的捷徑，點一下就能跳回任何一個上層分類，不必狂按瀏覽器的返回鍵。

麵包屑的常見型態

麵包屑主要分成幾種。最常見的是位置型麵包屑，呈現的是網站的分類層級——首頁到大分類到子分類到商品，反映的是網站結構本身，這也是電商最常用的一種。第二種是路徑型麵包屑，記錄的是訪客實際點過來的足跡，因為每個人走法不同顯示也不同，現在已比較少見。第三種是屬性型麵包屑，在有大量篩選條件的商品列表頁出現，顯示訪客目前套用了哪些篩選（例如品牌加價格區間加顏色），方便一項一項取消。電商網站絕大多數採用位置型，因為它穩定、好懂，又能反映清楚的分類架構。

電商實例：麵包屑怎麼幫上忙

想像有人在搜尋引擎搜「防水登山外套」，點進來直接落在某件外套的商品頁。這時頁面上方一串「首頁 / 戶外服飾 / 機能外套 / 防水登山外套」，訪客立刻明白這是一間有完整戶外系列的店，而不是隨便賣一件的賣家。他看完這件覺得不夠滿意，只要點一下「機能外套」，就能回到同類商品繼續逛，而不是失望地關掉分頁。這一點對電商特別關鍵——廣告與搜尋流量大多直接落在深層商品頁，麵包屑等於在每個深層頁面都放了一條往回逛的邀請，把單一商品的訪客留下來變成逛整個分類的訪客。少了它，很多人看完一件就走了。

怎麼設計出好用的麵包屑

麵包屑雖小，設計還是有講究。第一，放在頁面上方標題附近，這是使用者習慣尋找的位置，別藏到奇怪的角落。第二，用分隔符號清楚區隔層級，常見的是斜線或箭頭，讓每一層一目了然。第三，目前頁面那一層通常不做連結，因為你已經在這頁了，把它做成灰色純文字即可，其餘上層才可點。第四，層級命名要和導覽列與分類頁一致，別在導覽列叫「女裝」麵包屑卻寫「女生服飾」，會讓人困惑。第五，手機版要注意寬度，路徑太長時可以縮短中間層級或讓它橫向捲動，別讓它擠成兩三行破壞版面。做到這些，麵包屑就會是安靜卻可靠的動線幫手。

麵包屑對 SEO 與整站的價值

麵包屑不只服務訪客，也服務搜尋引擎。清楚的麵包屑等於把網站的分類層級明白地告訴 Google，有助於搜尋引擎理解頁面之間的從屬關係與收錄。如果再加上結構化資料標記，搜尋結果頁還可能直接顯示這串路徑，讓你的結果看起來更有條理更專業，提升點閱意願。從整站角度看，麵包屑是電商網站設計裡內部連結網絡的一環，它和導覽列、分類頁、商品頁一起把整站串成一張好走的網。想把商品頁本身也做得會轉換，可以參考商品頁設計服務的規劃邏輯，讓每個落地頁都留得住人。

常見問題 FAQ

每個頁面都需要麵包屑嗎？ 分類層級較深的電商網站建議在分類頁與商品頁都放。首頁本身不需要，因為它就是最上層。層級很淺、只有一兩層的小型網站，麵包屑帶來的幫助有限，可視情況省略。

麵包屑和導覽列選單有什麼不同？ 導覽列是給你「往前探索」用的分類入口，麵包屑則是告訴你「現在站在哪、怎麼往回走」的位置指引。兩者角色互補，一個負責前進一個負責定位與返回，通常會同時存在。

手機版空間小，麵包屑會不會太佔位？ 不會太嚴重，因為麵包屑只佔一行高度。路徑太長時可以只保留首尾層級中間用省略號帶過，或讓它左右捲動，就能兼顧資訊與版面。

麵包屑導覽是那種你注意不到、少了卻會覺得不對勁的細節。ViewInternet 電商裝修師提供從官網設計到既有網站改版的一條龍服務，會把麵包屑、導覽列與分類結構整套規劃到位，讓訪客不管從哪落地都逛得順、留得住。想讓你的網站動線更完整？加 LINE 描述你的商品與現況，先給你一份免費的動線健檢建議。