很多站点把面包屑当成装饰:模板里寫死一行小字,位置固定在标题上方,之後再也没人看過。但這條带子同时在做三件事——告诉訪客自己在哪、给栏目頁和上級頁面分發内鏈、為後台統計提供路径线索。它出問题的时候,往往不會报错,只是慢慢失去作用。
先確認层級和 URL 说的是同一件事
面包屑的第一层含义是位置,而位置最终要落在 URL 路径和目錄结构上。如果頁面地址是 /news/industry/2024/xxx,面包屑却寫成「首頁 > 资讯 > 行业观察」,中間少了一层年份归档,就會出現两個说法。這不一定是错,但需要你自己明确規則:以 URL 為准,還是以栏目為准。
更常见的情况是反過来:URL 是扁平的一层,面包屑却硬凑出三級。訪客点進去發現上級頁面和目前頁面几乎没有關系,這種断鏈感比没有面包屑更糟。
連結處理:除了目前頁,其他各級都该能点
- 首頁节点尽量连到站点根地址,而不是某個带參數的活動頁。
- 中間层級指向對應栏目頁或列表頁,不要指向标簽聚合頁来凑數。
- 最後一級是目前頁面,通常不加連結,或者用纯文本加 aria-current="page"。
- 如果最末一級也加了連結,检查它是不是又指回自己,形成一次没必要的自循环跳轉。
移動端和長标题是重灾区
桌面端一行能放下的层級,在窄屏上经常挤压變形:要么把标题挤出屏幕引發横向滚動,要么用省略号把中間层全部吃掉,只剩首頁和目前頁。可以尝试的做法是只保留「上一級 + 目前頁」,中間层級折叠進一個可展開的菜單;或者让容器允许換行,而不是强行 nowrap。
另外注意标题里的特殊字符和過長栏目名,在面包屑里是否需要改寫。位置說明讀得通,比照搬标题原文更重要。
结构化資料要和眼睛看到的一致
如果站点輸出了 BreadcrumbList 结构化資料,逐項核對名稱、顺序、連結是否與頁面上可见的面包屑一致。常见偏差包括:資料里寫的是舊栏目名,頁面上已经改了;資料里有四級,頁面上只顯示三級;連結指向带跟踪參數的不同地址。這類不一致不會立刻出問题,但會让你很难判断到底哪份資料可信。
自查时別只看首頁和几篇新文章。挑一批半年以上的舊内容、跨栏目内容、专题頁和活動頁,這些地方的层級最容易和歷史遗留结构打架。
一份可执行的自查步骤
- 随机抽取 20 個不同栏目、不同时期的頁面,把面包屑截图或複製下来。
- 逐條對照 URL 路径和站点主導航,标出层級不一致的頁面。
- 检查中間层連結是否可点、是否返回 200、是否落到正确栏目。
- 用手机實际打開,確認不横向溢出、不遮挡正文。
- 检查结构化資料,與可见文本做一次逐字段比對。
- 把發現的問题按模板、频道、單頁三類归档,優先修模板級問题。
面包屑的改動成本很低,通常改一次模板就能覆盖全站。但正因為改動便宜,很多团队從不回头看它,于是同一條带子在首頁正常、在舊栏目里错位、在专题頁里干脆消失。定期抽检,把這條位置线索补齐,對訪客和站内連結分發都有實际好處。