面包屑导航经常被当成装饰性组件:设计师觉得有它页面更完整,开发顺手就加上了。但从站点运营的角度看,它其实承担着三件事——告诉用户自己在哪一层、给蜘蛛提供一条稳定的向上路径、用结构化数据把层级关系讲清楚。这三件事任何一件没做好,页面在结构和体验上都会打折扣。
面包屑不只是首页、栏目、文章三行字
一个真正有效的面包屑,至少要满足几个条件:文字能点、链接指向真实存在的上级页面、层级顺序和网站目录结构基本对应。常见的做法是在文章页顶部放一行灰字,只做视觉展示,标签用 span 而不是 a,蜘蛛爬过来只能看到一段文本,拿不到任何入口。
更隐蔽的问题是层级对不上。比如栏目页的真实地址是 /news/,但面包屑里写的是 /company/news/,或者中间多出一个并不存在的聚合页。用户点进去是 404,蜘蛛则可能把一个不存在的路径当成候选地址。
几类高频问题
用脚本在客户端拼装
有些站点为了省事,面包屑由 JS 根据页面数据动态生成。这在渲染层面没问题,但如果服务端返回的 HTML 里没有对应内容,抓取端能不能拿到就要看渲染能力。稳妥的做法是服务端直出,或者至少在 HTML 里保留一份可爬的静态版本。
当前页也做成链接
面包屑的最后一项通常代表你正在看的这个页面,做成链接指向自己既没必要,也容易让内链结构显得重复。常规处理是用普通文本或 strong 标注,同时标上 aria-current 属性。
结构化数据与实际内容不一致
如果加了 BreadcrumbList,就要保证里面的条目顺序、名称、URL 和页面上可见的面包屑一致。两套信息打架时,搜索引擎不会替你猜哪个是对的。另外注意别把首页漏掉,也别把一个位置拆成多个条目。
一份可以照着做的自查清单
- 打开任意一个内容页,看面包屑是否每一项都能点击,最后一项是否不可点。
- 逐项点开,确认每个上级链接返回 200,而不是 301、404 或软 404。
- 对比面包屑路径与真实 URL 目录,确认没有多出来的中间层。
- 查看页面源码,而不是开发者工具渲染后的结果,确认面包屑在原始 HTML 中存在。
- 如果用了结构化数据,检查字段是否完整、与可见内容是否一致。
- 检查移动端显示,层级过多时是否被截断到只剩首页,是否会遮挡正文。
- 抽查栏目页,看面包屑是否体现了它自己的层级,还是直接从首页跳到栏目。
改模板时要注意什么
调整面包屑往往意味着改动公共模板,影响全站。建议先在测试环境改一个栏目,观察几天抓取和点击数据,再全量上线。如果改层级涉及 URL 变化,要提前把重定向安排好,别让老地址直接断掉。
面包屑不负责提升排名,它做的是把站点的层级关系表达清楚,让用户少一次返回、让蜘蛛少一次猜测。把它当成结构的一部分而不是视觉的一部分,很多小问题会自动消失。
小结
面包屑成本很低,效果也不夸张,但它属于那种做对了没人注意、做错了到处是坑的基础工作。每隔一段时间抽查几个典型页面,确认层级、链接和结构化数据三者一致,就足够了。