面包屑导航看起来只是页面顶部一行小字，实际它同时承担三件事：告诉访客当前页面在网站里的位置，给蜘蛛一条可以顺着往上走的链接路径，也让页面在搜索结果里有机会显示层级信息。很多站点把它做成设计稿上的装饰，链接不可点、层级和栏目对不上，结果用户和蜘蛛都得不到有效线索。
面包屑到底给谁看
先明确面包屑不是主导航的替代品。主导航解决“我要去哪个大类”，面包屑解决“我现在在哪、上一层是什么”。对站点运营来说，它还有一层价值：当页面被单独抓取时，蜘蛛可以通过面包屑里的链接发现上级栏目和兄弟页面，相当于多了一条内链入口。
面包屑是辅助导航，不是抓取预算的救命稻草。它能补充链接路径，但替代不了清晰的栏目结构和正常的内链布局。
常见的面包屑写法
- 层级型：首页 > 栏目 > 子栏目 > 当前页。适合大多数内容站和企业站，层级和 URL 目录最好能对应。
- 属性型：首页 > 分类 > 属性 > 当前页。适合电商或聚合页，注意别把筛选参数一路带进面包屑。
- 位置型：只显示当前栏目和上级，不追求完整路径。移动端常见，但桌面端容易让用户失去方向。
HTML 写法与结构化数据
面包屑要能被蜘蛛抓到，核心是使用真实的 a 标签和 href，而不是点击事件或 JavaScript 跳转。常见结构可以用 nav 包一层，里面用有序列表表示层级。
- 外层用 nav，并加上 aria-label=“面包屑”之类的说明。
- 层级用 ol 和 li 表达，每一项是一个链接。
- 当前页不要做成链接，避免自己指向自己或产生多余跳转。
- 分隔符用 CSS 或文本，别让分隔符也变成可点链接。
如果站点使用结构化数据，可以给面包屑加上 BreadcrumbList。注意结构化数据里的名称和顺序要和页面上可见的面包屑一致，不要页面上写一套、数据里写另一套。结构化数据只是补充说明，不是让蜘蛛看见面包屑的前提。
自查清单
- 面包屑中的每一级链接是否都能正常打开，返回 200 状态码。
- 当前页是否放在最后一级，且没有误加链接。
- 层级是否和站点栏目、URL 目录大体一致；如果栏目调整，面包屑是否同步更新。
- 移动端是否可点、可读，折叠后是否还能看出层级。
- 是否把标签页、搜索结果页、带参数的筛选页塞进了面包屑。
- 面包屑是否全站统一，还是有的页面有、有的页面没有。
- 面包屑里的文字是否和栏目名称一致，避免出现“未命名”“其他”这类模糊词。
容易踩的几个坑
- 用 JavaScript 动态生成：如果脚本没执行或执行失败，蜘蛛可能看不到任何链接。能服务端输出就服务端输出。
- 首页链接写成 #：用户点不动，蜘蛛也拿不到首页链接。
- 层级和实际结构打架：面包屑写“首页 > A > B”，但 B 页面实际在 C 栏目下，蜘蛛会得到混乱信号。
- 面包屑里放当前页链接：容易形成自我循环，也没有实际用途。
- 所有页面共用一套面包屑：看似省事，实际等于没有提供位置信息。
和栏目、内链、站点地图怎么配合
面包屑最好和栏目结构一起规划。先确定栏目层级，再让 URL、内链、面包屑三者尽量对齐。这样蜘蛛从任意一个页面进来，都能顺着面包屑向上，再通过栏目页向下发现更多内容。站点地图负责提交核心地址，面包屑负责补充页面内的层级路径，两者分工不同，不要互相替代。
如果站点已经有稳定的栏目结构，面包屑的改动量通常不大。先抽查几个核心页面，看链接能不能点、层级对不对、当前页有没有误加链接，再逐步统一全站。小改动，但能让用户和蜘蛛都少绕一点路。