面包屑導航看起来只是頁面顶部一行小字，實际它同时承担三件事：告诉訪客目前頁面在網站里的位置，给蜘蛛一條可以顺着往上走的連結路径，也让頁面在搜尋结果里有机會顯示层級信息。很多站点把它做成设計稿上的装饰，連結不可点、层級和栏目對不上，结果用戶和蜘蛛都得不到有效线索。
面包屑到底给谁看
先明确面包屑不是主導航的替代品。主導航解决“我要去哪個大類”，面包屑解决“我現在在哪、上一层是什么”。對站点运营来说，它還有一层價值：当頁面被單獨抓取时，蜘蛛可以通過面包屑里的連結發現上級栏目和兄弟頁面，相当于多了一條内鏈入口。
面包屑是辅助導航，不是抓取预算的救命稻草。它能补充連結路径，但替代不了清晰的栏目结构和正常的内鏈布局。
常见的面包屑寫法
- 层級型：首頁 > 栏目 > 子栏目 > 目前頁。适合大多數内容站和企业站，层級和 URL 目錄最好能對應。
- 属性型：首頁 > 分類 > 属性 > 目前頁。适合电商或聚合頁，注意別把篩選參數一路带進面包屑。
- 位置型：只顯示目前栏目和上級，不追求完整路径。移動端常见，但桌面端容易让用戶失去方向。
HTML 寫法與结构化資料
面包屑要能被蜘蛛抓到，核心是使用真實的 a 标簽和 href，而不是点击事件或 JavaScript 跳轉。常见结构可以用 nav 包一层，里面用有序列表表示层級。
- 外层用 nav，並加上 aria-label=“面包屑”之類的說明。
- 层級用 ol 和 li 表達，每一項是一個連結。
- 目前頁不要做成連結，避免自己指向自己或产生多余跳轉。
- 分隔符用 CSS 或文本，別让分隔符也變成可点連結。
如果站点使用结构化資料，可以给面包屑加上 BreadcrumbList。注意结构化資料里的名稱和顺序要和頁面上可见的面包屑一致，不要頁面上寫一套、資料里寫另一套。结构化資料只是补充說明，不是让蜘蛛看见面包屑的前提。
自查清單
- 面包屑中的每一級連結是否都能正常打開，返回 200 狀態碼。
- 目前頁是否放在最後一級，且没有誤加連結。
- 层級是否和站点栏目、URL 目錄大体一致；如果栏目調整，面包屑是否同步更新。
- 移動端是否可点、可讀，折叠後是否還能看出层級。
- 是否把标簽頁、搜尋结果頁、带參數的篩選頁塞進了面包屑。
- 面包屑是否全站统一，還是有的頁面有、有的頁面没有。
- 面包屑里的文字是否和栏目名稱一致，避免出現“未命名”“其他”這類模糊词。
容易踩的几個坑
- 用 JavaScript 動態生成：如果脚本没执行或执行失敗，蜘蛛可能看不到任何連結。能服務端輸出就服務端輸出。
- 首頁連結寫成 #：用戶点不動，蜘蛛也拿不到首頁連結。
- 层級和實际结构打架：面包屑寫“首頁 > A > B”，但 B 頁面實际在 C 栏目下，蜘蛛會得到混乱信号。
- 面包屑里放目前頁連結：容易形成自我循环，也没有實际用途。
- 所有頁面共用一套面包屑：看似省事，實际等于没有提供位置信息。
和栏目、内鏈、站点地图怎么配合
面包屑最好和栏目结构一起規划。先确定栏目层級，再让 URL、内鏈、面包屑三者尽量對齐。這样蜘蛛從任意一個頁面進来，都能顺着面包屑向上，再通過栏目頁向下發現更多内容。站点地图负责提交核心地址，面包屑负责补充頁面内的层級路径，两者分工不同，不要互相替代。
如果站点已经有稳定的栏目结构，面包屑的改動量通常不大。先抽查几個核心頁面，看連結能不能点、层級對不對、目前頁有没有誤加連結，再逐步统一全站。小改動，但能让用戶和蜘蛛都少绕一点路。