面包屑在頁面上通常只有一行小字,位置不起眼,很多人把它当成视觉装饰,上线之後就再没看過。但它同时承担三件事:告诉用戶目前頁面在整站里的位置,给蜘蛛提供一條向上回溯的栏目内鏈,以及在搜尋结果里替代顯示 URL 的层級路径。這三件事任意一件出問题,损失都不大,但加在一起就值得花十分钟排查一次。
先看层級:两級面包屑等于没做
最常见的偷懒做法是整站统一寫成「首頁 > 目前頁」。這種结构没有传递任何层級信息,用戶看不出目前頁属于哪個栏目,蜘蛛也只能從目前頁跳回首頁,等于白占一個内鏈位置。
一個基本合格的面包屑,至少應该包含「首頁 > 一級栏目 > 目前頁」。如果内容有二級分類,且二級分類有獨立的聚合列表頁,那就再往下加一层。但层級不宜過深,超過四层之後,用戶很少認真看,蜘蛛也不會因為路径長就多给什么。
层級要和實际目錄對上
面包屑里寫的路径,最好和 URL 的目錄结构大致對應。如果頁面的 URL 是 /news/industry/xxx.html,面包屑寫成「首頁 > 资讯 > 行业動態」,這本身没問题;但如果寫成「首頁 > 關于我們 > 新闻中心」,就属于自己给自己制造混乱,用戶点上去也會觉得莫名其妙。
再看連結:別指向不该被收錄的地址
面包屑的每一段都是一個連結,所以它本质上是一组站内連結。這组連結指向哪里,直接决定了蜘蛛會顺着它爬到什么地方。常见的错誤包括:
- 指向站内搜尋结果頁,例如 /search?q=行业;
- 指向带篩選參數的列表頁,例如 /list?type=1&page=2;
- 指向已经被合並或下线的舊栏目地址,靠 301 跳轉兜着;
- 指向标簽頁、专题頁等本该由編輯手動维護的聚合頁。
把這些地址清理掉,換成對應栏目真正的主列表頁,是性價比最高的一步。另外记得检查每一段連結是否返回正常的 200 狀態,而不是 302 或者 404。
渲染方式:HTML 里能不能直接看到
不少主题用 JS 動態拼装面包屑,頁面源碼里只有一個空容器,内容要等脚本执行完才出現。搜尋引擎渲染 JS 的能力在提升,但並不是每一次抓取都會完整渲染,尤其是低频訪問的深层頁面。更稳妥的做法是服務端直接輸出面包屑的 HTML,让它在源碼里就能被讀到。
自查方法很简單:在浏览器里打開頁面,查看網頁源代碼,搜尋面包屑里任意一個栏目的文字。如果源碼里搜不到,只出現在元素面板中,那就是靠 JS 渲染的,值得改成服務端輸出。
顺带检查移動端。有的模板在小屏下用 display: none 把面包屑整個隐藏掉,用戶看不到,但源碼里還在。這種情况對搜尋影响不大,對用戶体驗却是實打實的损失,尤其是從搜尋结果直接落地到深层頁面的訪客。
结构化資料:別和頁面内容打架
如果頁面已经加了 BreadcrumbList 结构化資料,需要確認里面的名稱和层級,與頁面上可见的面包屑完全一致。常见問题是模板改過之後只改了頁面,忘了同步資料,结果頁面上寫着「行业動態」,資料里還叫「行业新闻」,地址也對不上。這種不一致不會立刻出問题,但會让這份資料慢慢失去參考價值。
動手自查的清單
- 打開几個不同類型的頁面:首頁、一級栏目、二級栏目、内容詳情頁;
- 查看源碼,確認面包屑文字存在于 HTML 里;
- 逐段点击面包屑連結,確認都能正常打開,且不是跳到搜尋结果或篩選頁;
- 核對面包屑层級與 URL 目錄、栏目名稱是否一致;
- 在手机上打開同一頁面,確認面包屑可见、可点击;
- 如有结构化資料,用工具核對名稱與层級是否對得上。
最後一個细节:目前頁不用加連結
面包屑的最後一段代表目前頁面,通常不需要做成連結。如果它指向自己,等于在頁面里加了一個自指内鏈,對用戶没有帮助,也让代碼多一层無意义的嵌套。用纯文本或者加粗样式区分即可。
面包屑是一條小路,不是主干道。它不需要多漂亮,但必须指對方向、走得通。花十分钟把整站的面包屑過一遍,比事後补一堆内鏈要省事得多。
這類检查不必一次性做完,可以先從流量最高的几個栏目開始,改完之後观察一段時間服務器日誌,看蜘蛛在這些列表頁上的抓取是否更集中,再决定要不要推廣到全站。