很多站点把面包屑当成装饰:模板里写死一行小字,位置固定在标题上方,之后再也没人看过。但这条带子同时在做三件事——告诉访客自己在哪、给栏目页和上级页面分发内链、为后台统计提供路径线索。它出问题的时候,往往不会报错,只是慢慢失去作用。
先确认层级和 URL 说的是同一件事
面包屑的第一层含义是位置,而位置最终要落在 URL 路径和目录结构上。如果页面地址是 /news/industry/2024/xxx,面包屑却写成「首页 > 资讯 > 行业观察」,中间少了一层年份归档,就会出现两个说法。这不一定是错,但需要你自己明确规则:以 URL 为准,还是以栏目为准。
更常见的情况是反过来:URL 是扁平的一层,面包屑却硬凑出三级。访客点进去发现上级页面和当前页面几乎没有关系,这种断链感比没有面包屑更糟。
链接处理:除了当前页,其他各级都该能点
- 首页节点尽量连到站点根地址,而不是某个带参数的活动页。
- 中间层级指向对应栏目页或列表页,不要指向标签聚合页来凑数。
- 最后一级是当前页面,通常不加链接,或者用纯文本加 aria-current="page"。
- 如果最末一级也加了链接,检查它是不是又指回自己,形成一次没必要的自循环跳转。
移动端和长标题是重灾区
桌面端一行能放下的层级,在窄屏上经常挤压变形:要么把标题挤出屏幕引发横向滚动,要么用省略号把中间层全部吃掉,只剩首页和当前页。可以尝试的做法是只保留「上一级 + 当前页」,中间层级折叠进一个可展开的菜单;或者让容器允许换行,而不是强行 nowrap。
另外注意标题里的特殊字符和过长栏目名,在面包屑里是否需要改写。位置说明读得通,比照搬标题原文更重要。
结构化数据要和眼睛看到的一致
如果站点输出了 BreadcrumbList 结构化数据,逐项核对名称、顺序、链接是否与页面上可见的面包屑一致。常见偏差包括:数据里写的是旧栏目名,页面上已经改了;数据里有四级,页面上只显示三级;链接指向带跟踪参数的不同地址。这类不一致不会立刻出问题,但会让你很难判断到底哪份数据可信。
自查时别只看首页和几篇新文章。挑一批半年以上的旧内容、跨栏目内容、专题页和活动页,这些地方的层级最容易和历史遗留结构打架。
一份可执行的自查步骤
- 随机抽取 20 个不同栏目、不同时期的页面,把面包屑截图或复制下来。
- 逐条对照 URL 路径和站点主导航,标出层级不一致的页面。
- 检查中间层链接是否可点、是否返回 200、是否落到正确栏目。
- 用手机实际打开,确认不横向溢出、不遮挡正文。
- 检查结构化数据,与可见文本做一次逐字段比对。
- 把发现的问题按模板、频道、单页三类归档,优先修模板级问题。
面包屑的改动成本很低,通常改一次模板就能覆盖全站。但正因为改动便宜,很多团队从不回头看它,于是同一条带子在首页正常、在旧栏目里错位、在专题页里干脆消失。定期抽检,把这条位置线索补齐,对访客和站内链接分发都有实际好处。