面包屑导航：网站里那条不起眼的小路，却藏着大流量
做SEO这么多年，有个东西我一直想吐槽：面包屑导航。每次接手一个新网站，十有八九都不重视它。要么压根没设置，要么就是随便扔一个，连结构化数据都不加。然后站长们天天盯着关键词排名发愁，却放着这个送分题不要。说实话，面包屑导航对SEO的帮助，比很多人想象的要大得多——而且几乎是零成本。那天我检查一个电商站，产品页层级深得像迷宫，用户点着点着就迷路了。我瞄了一眼代码，好家伙，面包屑竟然是用图片拼的，爬虫压根读不出来。我当时就急了——你这跟拿个路牌遮住一半有啥区别？后来改了，加上结构化数据，一个月内，那些深层页面收录涨了15%。一点都不夸张。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/5db9fa5b-5c89-4adc-ae68-5a0e436e043f.jpg
网站面包屑导航示例截图
面包屑不是蛋糕屑，它有三种类型
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/a88a39a9-a944-4bb1-ba76-db1164bd2968.jpg
面包屑不是蛋糕屑，它有三种类型
很多人以为面包屑就一种，就是“首页>分类>子分类>当前页”这样子。但其实啊，面包屑分三种类型，你用错了可能适得其反。第一种叫位置型（Location-based），就是刚才那种，告诉用户你现在在网站的哪个坑里。适合层级分明的网站。第二种是属性型（Attribute-based），电商网站用得最多，比如“首页>服装>女装>红色>碎花”，这种按筛选条件动态生成，不是固定路径。第三种是路径型（Path-based），记录用户怎么点进来的，像一个浏览历史的小尾巴。但说实话，路径型在现代网站里已经很少见了，因为用户跳转太乱，记录的那个路径往往没法点回去，反而让人困惑。
有一次我给一个新闻站做优化，他们初始用了个路径型面包屑，用户从推荐点进来的，面包屑显示“首页>推荐>文章”，但文章其实属于科技频道。点击“推荐”的时候，404了。你说尴尬不。后来改成位置型，跳出率直接降了3个百分点。所以选对类型很重要，别想当然。
SEO不仅仅是加个标签，结构化数据才是灵魂
面包屑对SEO的直接影响主要体现在两方面：一是让搜索引擎更好地理解网站结构，二是可能会在搜索结果里展示出漂亮的路径。你有没有注意到，有些网站的搜索结果下面，链接不是光秃秃的URL，而是那种路径形式的？比如“example.com > 博客 > SEO 技巧”。这就是面包屑的功劳。谷歌管这叫富摘要（Rich Snippet），它能让你的结果在一堆蓝链接里脱颖而出，点击率能提升个5%到10%——我们测试过的。
但是！光加个HTML列表没用，你必须加结构化数据，也就是BreadcrumbList的Schema标记。我之前见过一个搞笑的情况：一个站面包屑做得贼漂亮，但搜索结果就是不显示路径。检查了半天，发现他们把结构化数据放错了位置，塞到了footer里，爬虫压根没当回事。记得，结构化数据必须直接对应你页面上的那个可见面包屑，别耍小聪明。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/451b3d25-85e1-4e27-a8ac-8b430e6d55f9.jpg
谷歌搜索结果中的面包屑导航富摘要示意图
用户体验那块：少即是多，但别做减法做到消失
面包屑对用户来说就是个救命稻草。尤其是移动端，屏幕小，用户容易迷路。但有些设计师特别讨厌它，觉得太占地方，或者破坏美感，于是就把它藏在一个小角落，字号小到需用放大镜。这是种傲慢。用户任务没完成，什么美感都是扯淡。
不过话说回来，面包屑也不能太复杂。我看过一个网站，面包屑占了整整一行半，从首页到当前页居然有7级分类！你到底是卖东西还是出书？一般建议控制在3到5级，太深了就得重新考虑你的信息架构了。面包屑是辅助导航，不是主菜，喧宾夺主就会分散用户注意力。
还有个小细节，当前页在面包屑里要不要加链接？应该不加链接，用文本表示。但要加个视觉强调，比如加粗或变色。我测试过，把当前页做成链接，用户会点一下然后愣住，以为跳转了实际没动，心里暗骂“什么玩意儿”。别挑战用户的直觉。
实现时的坑：前端后端谁背锅？
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/28f6e2ea-a76e-43b5-82f9-7f1d6e63cfa6.jpg
实现时的坑：前端后端谁背锅？
在技术上，面包屑实现要么前端写死，要么后端动态生成。我强烈建议后端动态生成，尤其是对于内容变动频繁的网站。前端写死很容易出现“首页>产品>xxx”这种，然后xxx是错的，因为文章改了分类你还不知道。而且动态生成能保证URL和面包屑路径一致，利于SEO一致性。
但后端生成也有个坑：有些开发会直接拿URL结构拼面包屑，比如“/category/subcategory/product”，然后机械地转换成面包屑。这忽略了特殊情况，比如数据里根本没有层级关系，或者产品属于多个分类。结果就会出现“首页>未分类>产品”这种尴尬标题。所以面包屑必须基于真实的分类树，不能靠猜。
还有个性能点：如果你用JavaScript动态加载面包屑，爬虫可能抓不到。虽然谷歌现在能渲染JS，但延迟还是有的，而且其他搜索引擎就难说了。尽量在服务端渲染，至少保证初始HTML里有面包屑。别在这个节骨眼上炫技。
最后啰嗦一句：面包屑不是一劳永逸的。隔段时间查一下，有没有断裂的路，404了没。就像现实里的路标，倒了得扶，歪了得正。如果你指望它给你带流量，就别让它荒废。行了，就这些吧，反正我是每次建站必加，看着不起眼，但关键时刻真管用。 不仅内容好，语气也很温和，这样的交流氛围真的很不错。 对新手特别友好，解释得很细致，就算零基础也能看懂大半。 没想到还有这么多细节，之前一直没注意到，感谢楼主提醒和科普。 希望楼主常来发帖，持续输出优质内容，我们都会一直支持你。
页:
[1]