面包屑导航（英文 ：Breadcrumb Navigation）是用户一个在法度圭表类型或文件延续定和转移他们职位的一种编制 ，是航甚航用户界面中的一种赞助导航 。面包屑导航指了然网页在网站层次筹划中的圭表感染职位，用户可以从面包屑导航中的类型最低层级最早 ，一次一个层级地导航到网站层次筹划中的筹划最高层级 ，有助于用户有效地体味和试探网站 。及寄
1 、职位型（location）：职位型面包屑是屑导详解屑导项结实的 ，展示了页面在网站筹划中的航甚航职位 ，职位型面包导航但凡在页面顶部程度坦现，圭表感染一样往常会位于问题或页眉的类型下方。它们供给给用户前去之后任何一个页面的筹划链接（这些链接也是能抵达往后页面的路途） ，在层级架构中但凡是及寄这个页面的父级页面 。
*职位型面包导航示例
2 、属性型（attribute）：属性型面包屑给出的往后页面的分类信息 。比如，在电商网站上搜刮产品时 ，屈就商品属性做面包屑导航 。这类面包屑导航可以辅佐用户体味产品之间的联络，同时供给了不合的访谒编制 。
*属性型面包屑示例
3 、路途型（path） ：也叫汗青型面包导航 ，路途型面包屑是一个静态展示用户抵达页面的无缺轨迹 。有时光它们会有辅佐 ，可是除夜都气候下它们会让用户感应思疑 。用户但凡会在各个页面之间跳来跳往 ，这时辰辰记实上往的路途就会特别很是宏壮，还不如不雅不雅不雅不雅鉴赏器的"前去"按钮愈加合用。
*路途型面包屑示例
面包屑导航中最精练了然的离开符等于除夜于号">" ，但凡除夜于号用于基于职位的面包屑导航 ，以"父类>子类"的编制展示导航项目之间的层级相干。除除夜于号以外还可以用向右箭头"→" ，双除夜于号">>"和斜线"/"。幻想下场独霸哪个取决于导航的类别和视觉终局 。
1 、PC端面包屑导航筹划指南
（1） 、面包屑不该庖代全局导航栏或部特别埠导航 。
面包屑可以作为导航的有效补偿 ，可是不克不及庖代次要导航 。可以采取下拉式菜单 。更好的筹划是为外埠导航供给孤单的Ul，以独霸户可以访谒站点往后部分的横向层级页面 。
（2） 、面包屑理应展示站点层次筹划中的往后职位 ，而不是不雅不雅不雅不雅鉴赏汗青记实 。
面包屑真实不必于展示用户在网站的页面不雅不雅不雅不雅鉴赏汗青记实（比如不雅不雅不雅不雅鉴赏器的本机撤离猬缩猬缩按钮）；它们旨在展示站点的层次筹划 。
（3）、对多层次站点 ，面包屑应展示站点多层次筹划中的单一同径 。
面包屑与多层次站点（个中一个页面有享个父级） 之间存在固有的次要相干 。在这类气候下 ，我们不建议两个或更多回响多层次筹划平不合路途的面包屑路途，因为它们会同化用户并在页面顶部占用除夜量空间 。
假定一个页面有多个不合的父级 ，请在站点层次筹划中标识到它的圭表类型路途 ，并在面包屑路途中展示该路途 。
（4） 、包含当首页面作为面包屑路途中的末尾一顶 。
（5） 、在面包屑路途中 ，往后页面对应的面包屑不睬应是链接 。
末尾一个面包屑（展示往后页面） 不睬应是链接 。为阻拦同化用户，请在视觉上分辨往后页面和后面键接的面包屑 ，最好独霸下划线或蓝色文本 。
（6） 、面包屑应送只包含网站页面 ，而不是IA中的逻辑类别 。
面包屑路途中的每个节点都理应是一个指向主页的链接 。假定全局导航中的某些子类别标签没有专门的孤单页面，请不要在面包屑路途中包含这些子类别。"点击即走"身手是用户邃晓面包屑的关头部分 ，是以全数项目(往后页面除外)都该现代表用户可以往的中心 。
（7） 、对具有仅 1-2层深的扁平筹划站点或筹划呈线性的站点 ，面包屑导航黑色必须的 。
（8） 、面包屑路途理应以指向主页的链接开首 。
2 、在挪动端面包屑筹划指南
需求提出的是，在挪动设备上 ，独霸面包屑的成本很快就会超出收益 。
（1） 、不要独霸包含多行的面包屑 。
在挪动网站上 ，面包屑可以疾速换成多行，并在已拥堵的挪动展示器上占用忧伤的空间 。多行面包屑路途不克不及很好地声明链的筹划 。
（2） 、不要独霸太小或太拥堵的面包屑。
一些网站试图经由过程使链接更小或更靠比来促进面包屑占用的屏幕空间 。不幸的是 ，此措置筹划不合用手触摸屏：点击方针起码需求 1cm x 1cm 。
（3） 、思虑膨胀面包屑路途以仅包含末尾一个级别 。
在某些页面上 ，指向一个级此外单个面包屑多是撑郑次要用户方针所必须的 。此措置筹划阻拦了占用忧伤的挪动空间的烦复 、拥堵的面包屑路途 。
2 、面包屑导航展示职位
但凡在页面次要内容区域的上方 ，紧靠在主问题（H1）之下 。
程度列举 ，链接之间用标识表记标帜离开（罕有的有 > 、/ 、» 等）。
一个复杂的例子：
想象你在一个电商网站不雅不雅不雅不雅鉴赏一款具体的手机（如 iPhone 15） 。面包屑导航大年夜大年夜约看起来像多么 ：
首页 > 电子产品 > 手机 > 智好手机 > Apple iPhone
“首页”: 可点击，带你回到网站主页 。
“电子产品”: 可点击，带你到电子产品除夜类页面 。
“手机”: 可点击 ，带你到手机分类页面 。
“智好手机”: 可点击 ，带你到智好手机子分类页面。
“Apple iPhone”: 但凡是往后页面称号 ，不成点击或仅作文本展示（展示你就在这里） 。
在网站独霸中 ，面包屑导航的感染就是辅佐访谒者断定本身处在网站中的甚么职位和若何前去到本来的职位 。对用户而言 ，这个导航赞助对象可以更轻松地在网站上查找内容 ，辅佐用户定位在你网站上的职位 ，并在需求时辅佐用户回到之前页面。对搜刮引擎来讲 ，面包屑导航会让蜘蛛体味你的网站筹划，利便搜刮蜘蛛爬取索引 。
1 、利于用户确认往后职位
让用户体味如今所处职位 ，和往后页面在全数网站中的职位 ，闪现了网站的架构层级 ，可以辅佐用户疾速进修和体味网站内容和构造编制 。
2 、便独霸户独霸
为用户供给前去各个层级的疾速出口 ，供给一个不雅不雅不雅不雅鉴赏网站的次要编制 ，不凡是斗劲除夜型的网站 ，计整洁个面包屑导航后 ，访客就可以更随便的定位到地址的栏目中 ，便独霸户独霸。
3 、加强了用户体验
面包屑导航如今在网站的独霸特别很是普及 ，可以汲引网站的用户体验 ，因为它是一个尽人皆知的界面元素 ，用户不雅不雅不雅不雅鉴赏独霸网页的时辰已构成习惯 。
4 、降低了跳出率
用户进进到网站的渠道是多样化的 ，这意味着您网站的每个部分都可以成为网站的出口，假定所选页面内容不吻合用户的期看值 ，经由过程面包屑导航可以带领用户访谒其他链接 ，从而降低网站的跳出率。
5 、添加网站内链
在网页中独霸面包屑导航 ，可以添加网站的内链 ，有助于内链的培养汲引 ，假定网站层级关头词独霸安妥 ，可以起到汲引关头词权重的感染。
6 、利于搜刮蜘蛛抓取
百度搜刮 、谷歌搜刮已将面包屑导航整合到搜刮下场里面 ，面包屑导航可让搜刮蜘蛛顺着面包屑导航举办页面抓取 ，利于进步搜刮蜘蛛蒲伏屈就 ，同时面包屑导航每个层级的称号 ，尽大年夜大年夜约独霸关头字，可以抵达SEO优化的终局 。
1 、面包屑是一种赞助导航，在页面中不睬应起放置感染 。面包屑和主导航比照起码要斗劲小 、或不太凹陷。
2 、面包屑导航 ，所谓导航就是可让用户点击的链接 ，不要做仅是网站筹划放置，必定要在非往后页面的指引中介入链接。
3 、不要给往后页面的导航文字添加链接 ，因为用户已处于这个页面了 ，再添加指神往后页面的链接是没有任何意义的 。
4、面包屑导航独霸文字链接 ，不要独霸图片或JS ，搜刮引擎对文字的辨认度是最好的 ，不随便辨认出图片或JS 。
5 、面包屑导航应尽大年夜大年夜约包含关头字 ，比如 ，在主页 > 部分页面 ，可以将文中的"主页"更调为中心关头字 ，汲引相干关头词的链接权重 。
6 、在"主页 > 列页 > 文本的正文" ，可以改成文章的问题，正文的问题经常会包含长尾关头词 ，多么将无益于长尾关头词的搜刮排名 。
7 、面包屑导航的末尾层级不要加链接 ，即往后页面标识层级不克不及加链接 ，倒运于搜刮引擎对层级相干的辨认 。
8、面包屑导航在挪动端的别验并不好 ，不凡是在层级斗劲宏壮的网站中。因手机屏幕斗劲狭隘 ，在挪动端上筹划面包屑导航会碰着良多问题 ，是以 ，在挪动端需求尽大年夜大年夜约地简化网站内容与筹划。
总结
优化猩SEO ：面包屑导航的方针是让用户可以更便外埠访谒网站，汲引用户体验 ，但面包屑导航属于赞助导航，在理论筹划时不宜太凹陷 ，更不克不及用面包屑导航来庖代主导航的感染 。
参考链接 ：
面包屑导航_百度百科
https://baike.百度.com/item/%E9%9D%A2%E5%8C%85%E5%B1%91%E5%AF%BC%E8%88%AA/358283
甚么是面包屑导航 ？ - 知乎
https://zhuanlan.zhihu.com/p/577833955
改削于2025-06-26
