面包屑導航往往只占頁面顶部一小行，字号比正文還小，很容易被当成装饰。但它有两個實际作用：告诉訪客自己站在網站的哪一层，以及给搜尋引擎一條從首頁到目前頁的层級路径。這两件事做不好，损失是安静發生的——訪客默默按返回键，蜘蛛少認识一层结构。
面包屑解决的到底是什么問题
一個内容頁通常有三條入口：導航菜單、站内連結、外部搜尋或外鏈。面包屑补的是第四條：层級路径。它让一個藏在第三层、第四层的頁面，有机會被理解為「某栏目下的某一類内容」，而不是一個孤零零的地址。
對訪客来说，面包屑的價值在于「退一步」。看完一篇稿件想找同類文章，点一下上一級比按十几次返回键舒服得多。對运营来说，面包屑是栏目規划在頁面上的顯性表達：栏目怎么分，面包屑就该怎么顯示。
面包屑常见的六類毛病
1. 和 URL 层級對不上
頁面地址是 /news/2024/05/xxx.html，面包屑却從首頁直接跳到标题，中間那层在頁面上不存在；反過来也常见，URL 是扁平的，面包屑却硬造出五层。两者不一致本身不致命，但如果為了好看编造层級，点進去的栏目實际是空列表，那就把訪客送進了死胡同。
2. 缺层、跳級
從首頁直接跳到某個产品詳情，省掉「产品中心 > 分類」。省掉的那一层，往往正是訪客最需要的。自查办法很简單：随机抽二十個頁面，看面包屑的每一級是否都指向真實存在的列表頁，中間没有空缺。
3. 把目前頁也做成連結
目前頁不该是可点連結，点它等于原地刷新，還會让訪客誤以為下面還有一层。這一級用纯文本加粗即可。
4. 全站一套文字，不看頁面類型
列表頁、詳情頁、标簽頁的面包屑逻辑並不相同。列表頁末級一般是栏目名，詳情頁末級是标题，标题過長时最好用短标题，免得撑破一行。
5. 移動端被整行隐藏
有些主题在小屏下直接 display:none，理由是省地方。如果導航菜單能提供同样的层級功能，隐藏可以接受；如果菜單只有一級栏目，那移動端訪客就彻底失去了返回上級的入口。
6. 点击区域太挤
用箭头做分隔符没問题，問题是箭头和文字挨得太近，手指一点就誤触。留出足够間距即可，不需要改结构。
一份可执行的自查清單
- 抽查十到二十個不同层級的頁面，確認面包屑每一級的連結都返回 200，既不是 404，也不是需要多次跳轉的地址。
- 核對面包屑层級與栏目規划表一致，不要出現只在面包屑里存在的「幽灵栏目」。
- 確認目前頁那一段不可点击，前面的层級都可点击。
- 检查移動端断点下面包屑是否可见，字号是否够讀。
- 確認面包屑從首頁開始，而不是從某個频道開始，除非站点有明确的子站结构。
- 如果使用了结构化資料，用測試工具跑一遍，看路径是否完整、名稱是否和頁面一致。
结构化資料別自作聪明
BreadcrumbList 這類标记，作用是把路径信息讲清楚。注意两点：标记里的层級必须和頁面上可见的面包屑一致，不能只寫标记不顯示；名稱寫栏目本来的名字就好，不要往里面堆關鍵詞。标记本身不保證任何展示效果，寫错只是多一處需要维護的地方。
別為了面包屑去改 URL
面包屑是頁面上的表達，URL 是资源的位置。两者能對齐最好，但如果為了凑层級去大規模改地址，付出的跳轉成本遠大于收益。
更稳妥的做法是：新頁面按栏目規划生成地址，老頁面维持現状，用面包屑把层級补回来。
小结
面包屑是件小事，但它把栏目規划、站内導航和结构化資料串在了一起。每隔几個月抽出半小时抽查一遍，比等到訪客抱怨再来翻頁面省事得多。它不會带来流量奇迹，但能让站点结构清楚一点——對訪客和蜘蛛都是。