做网站SEO时,很多人会把主要精力放在:
关键词;
Title;
文章;
外链;
页面速度。
面包屑导航看起来只是页面顶部一行很小的文字,经常被当成设计细节。
比如:
首页 > SEO学习 > 技术SEO > 面包屑导航设置
真正把网站做到几百篇、几千篇内容以后,会发现这行不起眼的导航非常重要。
它至少同时解决三个问题:
告诉用户自己现在位于网站什么位置;
帮助搜索蜘蛛理解页面和栏目之间的层级关系;
给栏目页、上级主题页增加稳定的内部链接入口。
百度早期SEO官方指南就明确建议,内容较多的网站使用面包屑导航,让用户清楚当前页面在整个网站中的位置,并能够方便返回上一级频道或者首页。Google目前同样明确表示,Breadcrumb能够表示页面在网站层级中的位置,并帮助用户逐级浏览网站。
所以面包屑导航虽然小,却是网站结构SEO里非常值得认真设置的一项基础功能。
第一:什么是面包屑导航?
面包屑导航英文叫:
Breadcrumb。
这个名字来自童话里沿路留下碎屑、方便找到返回路径的概念。
放到网站里,就是告诉用户:
我是从哪一层走到当前页面的。
例如一篇文章位于SEO栏目下:
首页 > SEO学习 > 技术SEO > 301设置
用户现在正在“301设置”页面。
如果想继续看技术SEO:
点击“技术SEO”。
想返回整个SEO栏目:
点击“SEO学习”。
想回首页:
点击“首页”。
它实际上把网站的层级结构直接显示出来。
第二:为什么内容网站尤其需要面包屑导航?
如果一个企业官网只有:
首页;
关于我们;
联系我们;
三个服务页。
即使没有面包屑,用户也很难迷路。
但如果网站已经拥有:
500篇文章;
80个Tag;
10个栏目;
几十个产品;
案例;
解决方案,
情况完全不同。
用户通过百度、Google或者Bing进入一篇长尾文章以后,并不是从首页一步一步点进来的。
他可能直接落到网站深处:
/blog/seo/technical/301-redirect/
如果页面只有正文,没有栏目和层级提示,他看完以后不知道:
这个网站还有没有其他技术SEO内容;
上一级是什么;
去哪里继续阅读。
百度官方过去就把缺少目录导航、用户进入页面以后近似形成“孤岛”作为负面案例,强调导航和面包屑应该让用户知道页面在网站中的位置。
所以网站越大,面包屑的价值越明显。
第三:面包屑对SEO最大的价值之一,是把网站层级关系显性化
比如网站结构实际上是:
首页
└── SEO
└── 技术SEO
└── Sitemap
└── Sitemap无法抓取怎么办
如果页面上存在:
首页 > SEO > 技术SEO > Sitemap > Sitemap无法抓取怎么办
搜索蜘蛛访问页面时,可以通过这些HTML链接继续发现:
SEO栏目;
技术SEO栏目;
Sitemap主题页。
于是网站内部形成清楚的上下级关系。
百度SEO指南曾明确建议,为每个页面增加能够返回频道和首页的导航,并指出面包屑能够帮助搜索引擎定位网页在整个网站结构中的层次。
所以面包屑真正的SEO价值,并不是:
多放几个关键词。
更重要的是:
让网站结构变得清楚。
第四:面包屑本身也是一套稳定的内部链接
比如网站有100篇技术SEO文章。
每篇都包含:
首页 > SEO > 技术SEO > 当前文章
那么“技术SEO”栏目就会持续获得大量相关页面的内部链接。
这和正文随机添加链接不同。
因为它天然符合网站结构。
同一个分类下所有内容都在告诉搜索系统:
这些页面属于技术SEO这个主题。
所以面包屑还有一个长期价值:
帮助栏目页和主题页建立稳定的站内链接关系。
但这里也不要误解成:
面包屑越长,传递的所谓权重越多。
真正需要的是合理层级。
不是为了SEO硬加十层导航。
第五:一个正常的面包屑应该怎么设置?
对于普通文章网站,可以采用:
首页 > 一级栏目 > 二级栏目 > 当前页面
例如:
首页 > SEO学习 > 技术SEO > 面包屑导航设置
企业产品站则可能是:
首页 > 产品中心 > 工业检测设备 > 某型号产品
案例页可以:
首页 > 客户案例 > 制造行业 > 某项目案例
原则很简单:
它应该反映用户能够理解的网站层级。
Google当前甚至特别提醒,Breadcrumb应该代表一个典型、合理的用户导航路径,并不要求机械复制URL目录结构。
例如URL可能是:
/article.php?id=335
面包屑当然不能写:
首页 > article.php > id=335
应该根据实际内容结构写成:
首页 > SEO学习 > 技术SEO > 当前文章
第六:最后一级要不要做成链接?
通常当前页面本身没有必要再链接自己。
例如:
首页 > SEO学习 > 技术SEO > 面包屑导航设置
前三级可以点击。
最后:
面包屑导航设置
只是表示当前位置。
Google当前Breadcrumb结构化数据规范也允许最后一个ListItem不提供item URL,系统可以把当前页面作为最终位置。
所以不用写成:
当前页面再链接当前页面。
虽然通常也不会产生多严重的问题,但没有实际导航价值。
第七:面包屑应该使用文字链接,不要做成复杂JS效果
这一点非常重要。
正常面包屑最好直接使用:
<nav class="breadcrumb">
<a href="/">首页</a>
<span>›</span>
<a href="/seo/">SEO学习</a>
<span>›</span>
<a href="/seo/technical/">技术SEO</a>
<span>›</span>
<span>面包屑导航设置</span>
</nav>
这种结构:
用户能点;
搜索蜘蛛也容易识别。
百度SEO指南过去就明确建议导航使用文字链接,避免复杂JavaScript或者Flash影响页面结构识别。
现在前端技术当然已经发展很多。
并不是说JavaScript一定不能用。
真正需要保证的是:
最终重要导航链接能够被搜索蜘蛛正常发现。
第八:面包屑名称应该写栏目名称,不要为了SEO堆关键词
例如网站真实栏目是:
SEO学习
就写:
首页 > SEO学习 > 技术SEO > 当前文章
不要为了排名改成:
首页 > SEO优化SEO教程 > SEO排名技术SEO优化 > SEO教程文章
这种做法既难看,也没有必要。
Breadcrumb的作用是:
表达层级。
不是关键词堆积区。
Bing目前的SEO指南同样强调清晰的HTML结构、内部链接和自然表达,并明确反对为了搜索排名或者AI引用人为制造不自然语言。
所以栏目叫什么,面包屑就尽量正常表达什么。
第九:面包屑应该放在页面什么位置?
通常建议放在:
正文主标题上方附近。
例如:
首页 > SEO学习 > 技术SEO
H1:面包屑导航设置:一个小地方,却作用很大
这样用户进入页面以后,第一眼就知道:
自己在哪。
不要放到:
Footer最底部;
折叠菜单深处;
用户完全看不到的位置。
百度公开的页面规划建议就强调面包屑应该:
机器可读;
位置突出;
让用户能够清楚理解当前所处位置。
它本来就是导航。
如果用户根本看不到,就失去了很大一部分价值。
第十:还需要加Breadcrumb结构化数据吗?
建议可以加。
除了页面上用户能够看到的面包屑,还可以使用Schema.org的:
BreadcrumbList
结构化数据描述同一套层级关系。
例如:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "首页",
"item": "https://www.example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "SEO学习",
"item": "https://www.example.com/seo/"
},
{
"@type": "ListItem",
"position": 3,
"name": "技术SEO",
"item": "https://www.example.com/seo/technical/"
},
{
"@type": "ListItem",
"position": 4,
"name": "面包屑导航设置"
}
]
}
</script>
Google目前明确支持BreadcrumbList结构化数据,并要求至少提供两个ListItem,主要字段包括:
position;
name;
item。
Bing同样支持Breadcrumb结构化标记,并将其作为支持的结构化数据场景之一。
所以如果网站已经在做Organization、Article、Product等JSON-LD,面包屑可以一起规范配置。
第十一:加了结构化数据,Google一定显示面包屑吗?
不保证。
这是结构化数据经常被误解的地方。
Google明确说明:
正确添加结构化数据,只代表页面具备对应搜索展示功能的资格,并不能保证最终一定按照该形式出现在搜索结果中。
所以不要因为添加:
BreadcrumbList
第二天搜索结果没有变化,就认为代码失效。
正确做法应该是:
先保证页面可抓取;
结构化数据正确;
使用Rich Results Test验证;
然后交给Google重新抓取和处理。
结构化数据首先是帮助机器理解页面。
搜索展示只是可能结果之一。
第十二:可见面包屑和JSON-LD最好保持一致
比如页面上显示:
首页 > SEO学习 > 技术SEO > 当前页面
JSON-LD却写:
首页 > GEO > GEO服务商 > 当前页面
这种标记显然有问题。
Bing目前明确要求:
结构化数据必须准确反映页面真实可见内容,误导性的Structured Data可能被忽略,并影响搜索和AI Grounding中的可信度。
所以结构化数据不要为了“多几个关键词”单独编一套层级。
应该和页面真实导航一致。
第十三:分类很多的网站,面包屑到底跟哪个分类?
WordPress特别容易遇到这个问题。
一篇文章可能同时属于:
SEO;
技术SEO;
网站优化。
那么面包屑到底写:
首页 > SEO > 当前文章
还是:
首页 > 技术SEO > 当前文章
我的建议是:
尽量确定一个主要分类。
也就是:
这篇文章最主要属于哪个主题。
例如这篇讲面包屑导航,本质属于:
技术SEO。
那可以规划:
首页 > SEO学习 > 技术SEO > 面包屑导航设置
不要因为文章有三个Tag,就生成:
首页 > SEO > 技术SEO > 网站优化 > 导航 > WordPress > 当前文章
层级越复杂,并不代表SEO越好。
真正需要的是:
稳定、可理解。
第十四:Tag要不要放进面包屑?
通常不建议把所有Tag加入面包屑层级。
因为Tag更多是:
横向聚合。
栏目通常才是:
纵向层级。
例如:
SEO学习
└── 技术SEO
└── 当前文章
这是比较清楚的树状结构。
而Tag可能同时属于:
Sitemap;
WordPress;
索引;
网站结构。
它们不一定代表当前页面的父级目录。
所以面包屑优先围绕:
栏目、分类、产品层级
建立。
不要把所有标签都塞进去。
第十五:企业官网的服务页也应该有面包屑
很多企业站只给文章加Breadcrumb。
实际上产品和服务页同样值得设置。
例如:
首页 > 服务 > GEO服务
或者:
首页 > 解决方案 > 工业制造 > 工业企业SEO
这样用户直接通过搜索进入:
工业企业SEO页面。
马上就能知道:
它属于解决方案。
同时可以返回:
工业制造。
继续返回:
解决方案首页。
这种结构对于复杂ToB网站特别有价值。
尤其一个官网同时包含:
服务;
行业方案;
产品;
案例;
内容。
面包屑能够帮助这些页面形成非常清楚的网站层级。
第十六:首页需要显示面包屑吗?
通常没有必要。
首页本身就是网站结构最高层。
再显示:
首页
并没有导航意义。
从第二级页面开始使用更加合理。
比如:
栏目:
首页 > SEO学习
文章:
首页 > SEO学习 > 技术SEO > 当前文章
产品:
首页 > 产品中心 > 产品分类 > 当前产品
这样即可。
第十七:移动端不要因为空间小就直接删除面包屑
手机屏幕确实比较窄。
一些网站为了页面简洁,会直接把Breadcrumb:
display:none;
完全隐藏。
如果面包屑本来承担重要导航作用,我通常不建议直接删掉。
可以改成:
缩短文字;
横向滚动;
只显示部分层级;
合理换行。
例如PC:
首页 > SEO学习 > 技术SEO > 搜索引擎抓取与索引 > 当前文章
手机可以适当简化:
首页 > 技术SEO > 当前文章
只要层级仍然真实。
移动端用户同样需要知道:
自己在哪里。
第十八:面包屑不能代替主导航和正文内链
这个问题和HTML Sitemap类似。
有了面包屑以后,并不意味着网站不需要其他内链。
三种链接解决的问题不同。
主导航
告诉用户网站有什么核心栏目。
面包屑
告诉用户当前页面位于哪里。
正文内链
告诉用户当前内容还和哪些具体问题相关。
例如用户正在看:
网站更换主机会影响SEO吗?
面包屑可能是:
首页 > SEO学习 > 技术SEO > 当前文章
正文继续提到:
301迁移;
robots;
HTTP状态码。
这些则应该使用正文内链连接具体教程。
所以优秀网站结构应该让这几种链接共同工作。
第十九:网站改版以后,面包屑也要同步修改
比如原来的栏目:
首页 > SEO教程 > 当前文章
网站重新规划以后变成:
首页 > SEO学习 > 技术SEO > 当前文章
这时候要同时检查:
页面可见面包屑;
BreadcrumbList JSON-LD;
栏目链接;
Canonical;
相关站内链接。
不要出现:
页面面包屑一套;
结构化数据一套;
真实网站分类又是另外一套。
网站结构越统一,搜索系统越容易理解。
第二十:面包屑最容易犯的几个错误
可以简单检查以下问题。
1. 面包屑只是文字,不能点击
上级栏目最好提供真实链接。
2. 所有文章都写成:
首页 > 新闻中心 > 当前文章
明明网站已经有更细分类,却完全没有体现。
3. 为SEO堆关键词
栏目名称变得特别长、不自然。
4. 层级和网站实际结构不一致
用户点击以后发现根本不是上一级栏目。
5. JSON-LD和页面可见内容不同
机器标记和用户看到的不一致。
6. 链接发生301或404
网站改版以后没有更新Breadcrumb URL。
7. 层级过深
一个普通文章出现七八层面包屑。
这通常说明网站分类本身可能过度复杂。
最后:面包屑真正重要的地方,不在于“多一个SEO标签”
面包屑导航看起来只有短短一行:
首页 > SEO学习 > 技术SEO > 当前文章
但它把一个页面和整个网站连接了起来。
百度官方SEO指南很早就明确建议内容较多的网站使用面包屑,让用户知道当前页面在网站中的位置,同时帮助搜索系统理解网站结构。
Google目前依然专门维护BreadcrumbList结构化数据规范,并明确表示Breadcrumb能够表达页面在网站层级中的位置、帮助用户逐级浏览。
Bing也继续支持Breadcrumb结构化标记,同时在最新Webmaster Guidelines中强调:
清晰网站结构;
可抓取内部链接;
语义化HTML
不仅影响传统搜索,也会影响Copilot和AI Grounding对网站内容的发现和理解。
所以网站设置面包屑时,真正应该做好的其实只有几件事:
层级真实;
名称清楚;
上级页面能够点击;
使用正常HTML链接;
可见面包屑与BreadcrumbList保持一致;
网站改版以后同步更新。
它不会因为加上以后第二天让关键词从第20名直接变成第1名。
但当一个网站逐渐拥有几百、几千个页面以后,正是这种不起眼的基础结构,共同决定:
用户能不能看懂网站;
蜘蛛能不能顺利发现页面;
搜索系统能不能理解页面之间的关系。
所以面包屑确实只是网站里一个很小的地方。
但对于内容越做越多的网站来说,它真正解决的是整个网站的“位置感”和层级关系。
评论
欢迎留下你的看法,评论会按站点设置审核展示。
0 条评论
还没有评论,来写下第一条吧。
请先登录后即可评论
登录评论已关闭