面包屑在页面上通常只有一行小字,位置不起眼,很多人把它当成视觉装饰,上线之后就再没看过。但它同时承担三件事:告诉用户当前页面在整站里的位置,给蜘蛛提供一条向上回溯的栏目内链,以及在搜索结果里替代显示 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 目录、栏目名称是否一致;
- 在手机上打开同一页面,确认面包屑可见、可点击;
- 如有结构化数据,用工具核对名称与层级是否对得上。
最后一个细节:当前页不用加链接
面包屑的最后一段代表当前页面,通常不需要做成链接。如果它指向自己,等于在页面里加了一个自指内链,对用户没有帮助,也让代码多一层无意义的嵌套。用纯文本或者加粗样式区分即可。
面包屑是一条小路,不是主干道。它不需要多漂亮,但必须指对方向、走得通。花十分钟把整站的面包屑过一遍,比事后补一堆内链要省事得多。
这类检查不必一次性做完,可以先从流量最高的几个栏目开始,改完之后观察一段时间服务器日志,看蜘蛛在这些列表页上的抓取是否更集中,再决定要不要推广到全站。