什么是面包屑导航？

什么是面包屑导航？

面包屑导航（breadcrumb navigation）是一连串内链，称为“面包屑（breadcrumbs）”，用以标示用户当前在网站页面层级中所处的位置。

“面包屑”一词源自沿途留下踪迹的思路，与格林兄弟童话《糖果屋》（Hansel and Gretel）中的情节相似。

面包屑属于辅助导航，通常以水平一行的形式出现在当前页面顶部、主站导航下方。每个层级均带超链接，彼此以符号分隔。

面包屑标记（markup）正确实现后，面包屑踪迹也会显示在 Google 的 SERP 上。

面包屑踪迹可按页面被访问的顺序排列，更常见的是按当前页面的层级及其与高层级父页面的关系排列。

面包屑分为几种类型，其中三种主要类型如下：

• 基于层级的面包屑，又称基于位置的面包屑，最为常见，向用户显示其所处的网站层级位置。
• 基于属性的面包屑按特定页面的属性，或用户选择的标签、筛选条件组织，在电商网站上使用最广。
• 历史（或基于路径）的面包屑按访问者为到达当前页面所经历的步骤排列。

面包屑踪迹的用途在于，让访问者能轻松返回起始位置或本次会话中此前访问过的页面，并引导其浏览同一类别下的相关内容。

面包屑导航为什么重要？

面包屑导航能改善用户体验，让网站更易浏览，因而至关重要。

借助辅助导航提供指引，可帮助访问者找到所需内容，减少返回更高层级页面所需的点击次数。面包屑还能改善移动端的使用体验。

面包屑导航在 SEO 中同样发挥关键作用：

Google 倾向于奖励重视用户体验的网站；同时，实现面包屑踪迹有助于 Google 理解网站层级结构，并更有效地分配 PageRank，进而改善排名。

Google 的指南指出，面包屑有助于在特定搜索查询的语境中对页面内容加以归类。自 2018 年起，面包屑已被纳入搜索结果，帮助用户理解 SERP 中所显示页面在网站结构中的位置。

实现得当的面包屑踪迹还能带来更低的跳出率：

为用户在浏览落地页之后提供导航网站的另一条路径，可引导其浏览更多内容。当原始页面无法满足用户需求时，面包屑踪迹会引导用户点击更高层级的页面，而非返回 SERP。

如何实现面包屑导航？

实现面包屑导航的步骤并不复杂。

若网站基于 WordPress，Yoast SEO 一类插件可简化这一过程，只需几个步骤即可完成设置。部分 WordPress 主题还默认支持面包屑。

若未使用 WordPress，也可借助 HTML 与 CSS 代码手动实现，可使用以下 HTML 模板：

<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Category</a></li>
<li>Current Page</li>
</ul>

上述代码只会生成一个项目符号链接列表，还需用 CSS 自定义面包屑导航的样式。

若希望面包屑出现在 SERP 中，应在网站上实现相应的结构化数据。

面包屑导航最佳实践

面包屑踪迹对用户和搜索引擎都是有用的导航元素。不过，视网站结构而定，面包屑导航并非总是适用。

例如，单层级网站通常无法从面包屑导航中获益。主导航已覆盖全部内容，用户往往只需点击一次即可返回首页，面包屑的价值有限。

若确定网站能从辅助导航元素中获益，请遵循以下面包屑导航最佳实践：

• 面包屑是一项额外的导航功能，并非主导航菜单的替代品。面包屑应当支撑主导航，为用户浏览网站提供另一种方式。
• 面包屑踪迹中的文本链接必须用特定字符分隔。最常用的是“>”符号，也可使用正斜杠（/）或箭头等其他字符分隔踪迹中的内链。
• 无论用户是从首页逐级导航到该页面，还是通过搜索结果发现它，都应包含完整的导航路径。
• 面包屑踪迹应从左到右阅读，首页位于最左端，层级较低的页面位于右侧，每次一个文本链接。
• 面包屑踪迹的最后一项应为用户当前所在的页面。用户通常不会与最后一项交互，因此无需为其添加链接。
• 从设计角度看，面包屑导航应尽量不显眼、简洁，避免分散访问者对当前页面内容的注意力。可将其放在网站右上角，并选用小巧但清晰的字体。