面包屑导航可帮助网站访客根据层次结构、用户轨迹或两者确定访客在站点内的当前位置。在本指南中，我们将讨论面包屑导航的类型以及最佳实施方法和一些常见错误。

什么是面包屑导航？

面包屑通常位于网站顶部，在顶部导航和内容标题之间。它们通常由一组链接组成，从网站的最高级别开始，逐级下降。

Schema.org 将其定义为：

“一组可以帮助用户理解和导航网站层次结构的链接。”

示例 - 面包屑：

Home > Furniture > Tables > Kitchen Table

面包屑导航的优点：

l附加导航元素

l更短的点击路径让访客在网站的各个级别之间导航

l引起对网站层次结构中较高层元素的兴趣

l可以带来更强的用户参与度

技术优势

l添加额外的导航路径，占用的网站空间很小

l可用于降低网站上的抓取级别数量

l通过面包屑列表增强SERP中的片段

何时使用面包屑导航？

面包屑导航可以使面包屑中具有两个以上元素的任何网站上的用户和网站结构受益。

明确定义的面包屑在具有大量内容级别的大型复杂网站中有重要作用。常见的是具有大量产品、分类和分面搜索的电商网站，以及分类较多的信息网站。

如何实现面包屑导航

可以使用简单的 HTML/XHTML 标记来实现面包屑。假设您想创建如下所示的面包屑导航：

Home > Furniture > Tables > Kitchen Table

创建它的简单 HTML 标记可能如下所示：

<a href="/">Home</a> >
<a href="/furniture/">furniture</a> >
<a href="/furniture/tables/">Tables</a> > Kitchen Table

用简单的字符分开

为了分隔面包屑项，建议使用简单的字符，例如

l> 或 >> 或类似的变体，例如 ? 和 ?

l/ 或者 //

使用这些字符可以增加熟悉度，从而提高用户体验。

最好使用单个字符。选择这些分隔字符中的哪一个并不重要。在实施面包屑导航时要考虑用户。

结构化数据和面包屑

如果您想确保搜索引擎理解您的面包屑，您应该使用schema.org 词汇和以下结构化数据格式之一来帮助搜索引擎理解您的面包屑：

lMicrodata

lRDFa

lJSON-LD

将其应用于面包屑的优点是搜索引擎更有可能将您的面包屑添加到搜索结果中您网站的摘要中。

示例 - 搜索结果片段中的面包屑

面包屑导航中可用的结构化数据属性

面包屑的结构化数据格式属性由schema.org BreadcrumbList定义。

搜索引擎通常使用以下属性在搜索片段中生成面包屑列表：

l面包屑项

l名称

l位置

使用微数据的面包屑标记示例

面包屑示例：

Home > Furniture > Kitchen
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/">
<span itemprop="name">Home</span></a>
<span itemprop="position" content="1">></span>
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/furniture/">
<span itemprop="name">Furniture</span></a>
<span itemprop="position" content="2">></span>
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/arts/furniture/kitchen/">
<span itemprop="name">Kitchen</span></a>
<span itemprop="position" content="3"></span>
</li>
</ol>

使用RDFa 的面包屑标记示例

面包屑示例：

Home > Furniture > Kitchen
<ol vocab="http://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/">
<span property="name">Home</span></a>
<span property="position" content="1">></span>
</li>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/furniture/">
<span property="name">Furniture</span></a>
<span property="position" content="2">></span>
</li>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/furniture/kitchen/">
<span property="name">Kitchen</span></a>
<span property="position" content="3"></span>
</li>
</ol>

使用JSON-LD 的面包屑标记示例

面包屑示例：

Home > Furniture > Kitchen
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/",
"name": "Home"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/furniture/",
"name": "Furniture"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.com/furniture/kitchen/",
"name": "Kitchen"
}
}]
}
</script>

如何测试您的结构化数据实施

无论您选择哪种结构化数据格式来指定面包屑，您都可以使用Google 结构化数据测试工具进行验证。

它将验证您的结构化数据标记并指出错误。无效的结构化数据标记可能会导致搜索引擎忽略您的面包屑规范。

面包屑导航的类型

关于面包屑的技术思考

在研究面包屑导航的可能逻辑之前，让我们先看一下不同站点结构和URL结构的技术差异。

要规划你的面包屑，你必须做出以下决定：

l您想要一致的面包屑导航吗？

l您想要为每个产品使用唯一的URL还是根据分类使用多个URL？

l用户路径会与面包屑轨迹同步吗？

一致和不一致的面包屑导航

如果面包屑导航不“跳跃”，那么它就是一致的。这意味着，每次点击链接进入更深层次的内容时，面包屑都会增强一级。

一致的面包屑导航示例

用户进入网站的kitchen页面。面包屑像这样

home > furniture > kitchen

下次单击您将进入“kitchen tables”产品页面。现在面包屑像这样

home > furniture > kitchen > kitchen table

不一致的面包屑导航示例

用户进入网站的kitchen页面。面包屑像这样

home > furniture > kitchen

下次点击将进入产品页面“kitchen tables”。现在面包屑像这样

home > products > kitchen table xy

具有多分类架构的一致面包屑导航示例

用户点击了"furniture", "kitchen" 和 "tables" 分类，然后选择了产品

home > furniture > kitchen > tables > kitchen table xy

用户通过其他方式找到该产品

home > products > kitchen table xy

唯一的还是多个URL？

当产品属于多个分类时，创建一个对搜索引擎友好的信息架构比较复杂。

此时，该产品可以通过以下两种方式访问

l一个唯一的URL

l根据不同的分类有多个URL

这两种方法都可以创造积极的用户体验 - 取决于您想要做什么。但这两种方法也都有缺点，如果您想提供最佳的用户体验并同时迎合搜索引擎，则需要以不同的方式解决这些缺点。

示例：唯一URL

如果您的产品具有唯一的URL，则可以避免重复内容问题。这种方法的缺点是，如果您不实现更复杂的算法来使面包屑对用户表现一致，您的面包屑可能会跳动。

分类 URL：

http://example.com/furniture/kitchen/
http://example.com/furniture/tables/

产品网址：

http://example.com/procuct/kitchen-table-xy

示例：不同分类的多个URL

如果某个产品有多个URL，则可能会导致重复内容问题。在这种情况下，您需要定义一个默认版本，分配 rel=canonical并指向所有产品页面上的产品默认URL的目标URL。

分类 URL：

http://example.com/furniture/kitchen/
http://example.com/furniture/tables/

产品 URL：

http://example.com/furniture/kitchen/kitchen-table-xy
http://example.com/furniture/tables/kitchen-table-xy

用户路径与面包屑导航同步

如果将用户路径合并到面包屑导航中，则可以实现最一致的用户体验。

例如：

用户查看了特色商品，然后选择了产品

home > kitchen > featured items > kitchen table xy

用户使用“Best Tables Inc”的制造商过滤器，然后选择了产品

home > kitchen > Best Tables Inc > kitchen table xy

用户通过任何其他方式找到该产品

home > products > kitchen table xy

面包屑的概念差异

定义面包屑逻辑有三种基本方法： 基于位置、路径或属性。

基于位置的面包屑导航

面包屑的常见用法是基于位置的面包屑。基于位置的面包屑显示站点层次结构中的当前位置，并使用户能够快速浏览站点的各个级别。

在基于位置的面包屑中，层次结构与面包屑同步。

例如：

网址

http://example.com/tables/kitchentable-oak/

面包屑导航

Home > tables > kitchen table oak

优点：

l易于实施

l用户可以轻松确定站点层次结构中的当前位置

缺点：

根据站点结构，面包屑导航可能会变得不一致

要求：

要求以逻辑方式组织信息结构

基于属性的面包屑导航

基于属性的面包屑允许使用当前内容的属性来增强面包屑导航。

基于属性的面包屑的行为独立于站点的层次结构，因此需要更多的技术支持才能正确实施。

例如：

网址

http://example.com/tables/kitchentable-oak/

面包屑导航

Home > oak > large > kitchen table oak

优点：

可以提供比基于位置的面包屑更好的可用性

缺点：

l可能会导致很长的面包屑导航

l可能会导致面包屑的顺序不同

要求：

需要在多个分类中定义默认分类

混合面包屑导航

混合面包屑是基于位置的面包屑和基于属性的面包屑的组合。基于位置的部分通常取自主分类，基于属性的部分取自选定的过滤器或内容属性。

例如：

网址

http://example.com/tables/kitchentable-oak/

面包屑导航

Home > furniture > kitchen > tables > oak (x) > large (x) > kitchen table oak

优点：

l在大型电子商务网站上提供比基于位置的面包屑更好的可用性

l更多内部链接指向属性页面

缺点：

l根据站点的结构，面包屑导航可能会变得不一致

l可能会导致更长的面包屑导航

l可能会导致面包屑的顺序不同

基于路径的面包屑导航

设置面包屑的一种不太常见的方法是使其基于路径。在简单的基于路径的面包屑中，面包屑导航是历史轨迹，显示用户浏览网站的路径。

这种类型的面包屑的根目录是将用户带入网站的着陆页面。

例如：

用户进入标题为“Best kitchen furniture”的博客文章，然后点击进入tables分类，选择oak，返回tables并选择产品。

网址

http://example.com/tables/kitchentable-oak/

面包屑导航

Best kitchen furniture > tables > oak > tables > kitchen table oak

优点：

不需要任何特定的网站结构

缺点：

l不可预测的面包屑路径

l面包屑无法缓存

l面包屑需要存储在每个用户的会话中

l当机器人获得会话（例如基于IP）时，搜索引擎机器人会抓取随机路径的不稳定且不可预测的内部链接

l用户无法确定在站点层次结构中的当前位置

实用的解决方案

我们建议选择一种在工作量和估计收益方面平衡且对搜索引擎友好的面包屑实现方案。这意味着：

技术观点

从技术角度我们建议：

l面包屑应该一致

l每个产品的唯一 URL

l没有与面包屑的用户路径同步

该解决方案具有以下优点

l良好的用户体验

l无重复内容

l努力与收获之间的良好平衡

如果您想使用多个URL，请确保

l为每个产品定义一个默认URL

l使用rel=canonical防止重复内容问题

如果你想将用户路径与面包屑同步

花点时间定义可能的面包屑导航，不要使用简单的历史记录

概念观点

从概念的角度来看，我们建议：

l面包屑应该有一个基于位置的根

l面包屑应该有基于属性的中间部分

l如果您使用路径，请定义入口点以创建基于位置的根

实践面包屑的最佳方法

面包屑可降低爬行级别数

面包屑与最低级别的深层链接相结合可以非常有效地降低爬网级别数量，从而创建更密集的网站结构。

例如：

面包屑导航的层级架构

您有一个根级别有 6 个级别的站点。如果您通过面包屑放置从根级别到第 6 级内容的链接，则可以降低第 3-6 级所有内容的爬网级别和点击深度。

面包屑搜索结果片段

如上所述，如果搜索引擎可以在网站上识别面包屑，则它们可能会在搜索结果中显示面包屑。但搜索结果片段仅提供有限的空间。因此，如果面包屑太长，搜索引擎必须在搜索结果中缩短它们。通常，根页面下的踪迹的第一个元素会被省略，只显示最后两个元素。保持最后两项与用户相关非常重要，可以提高搜索结果的点击率。

我们建议对面包屑中的最后两个可抓取项目使用分类而不是归因。

搜索片段中分类面包屑的示例：

Home > … > Kitchen > Tables

搜索结果片段中基于属性的面包屑示例：

Home > … > oak > large

分页和面包屑导航

分页也应该在面包屑中显示。如果您有分页内容，则应在面包屑中添加分页内容的第一个元素和当前元素。

例如：

Home > Furniture > Kitchen > Tables > Page 3

链接“Tables”链接到分页内容“Tables”的第一个元素，并允许用户跳回到分页的开头。

将分页添加到面包屑还会创建指向分页内容的起始文档的相关内部链接。这有助于使其与搜索引擎更加相关。

面包屑导航的常见错误

使用短面包屑进行深层站点结构

如果在具有许多合法信息级别的站点上面包屑导航太短，则面包屑将无法有效地创建更密集的站点结构。

我们建议您以有助于降低抓取级别的方式设计面包屑。这可以帮助您优化抓取速度。

在网站标题中使用反向面包屑导航

在某些情况下，技术会在网站HTML标题中添加面包屑导航。这很容易失控，导致搜索引擎不支持标题长度，在搜索结果中会缩短标题。

我们不建议在站点的HTML标题中使用面包屑导航。

面包屑常见问题解答

我应该在面包屑导航中链接主页吗？

如果您的面包屑导航中显示了主页，我们建议您链接到它，以保持用户体验一致。

从SEO的角度来看，为了在大型网站上保持面包屑更短，您还可以省掉主页元素并从第一级开始。这可以让您在搜索引擎中更多显示最相关的面包屑。

我应该在面包屑导航中显示当前项吗？

从技术SEO的角度来看，无论是否在面包屑中显示当前项，都没有区别。

如果你网站拥有大量访客,可以进行 A/B 测试，哪种方式可以带来更好的用户交互。

我应该链接面包屑导航中的当前项吗？

如果您决定在面包屑导航中显示当前项，下一个问题通常是当前项是否应该加链接。

这个问题可以从技术和可用性两个角度来回答：

从可用性的角度来看，用户在单击再次指向同一文档的链接时可能会感到困惑。这基本上是网站的刷新，即使您获得了额外的页面印象，也可能会导致用户跳出。

从SEO的角度来看，链接不会给内部链接图增加任何价值。

此外， W3C 的《Web 内容可访问性指南 2.0 的技术和失败》中还提供了提供面包屑的指南（https://www.w3.org/TR/WCAG20-TECHS/G65.html），建议不要将当前位置实现为面包屑中的链接。

我们建议不要在面包屑导航中的当前项上加链接！

更多阅读:

Google SEO：15个网站架构技巧[长文警告，建议先收藏]

网站建设：最佳网站页脚设计指南和7个顶级案例

网站架构：如何使用适当的 SEO 筒仓结构以更少的链接击败高权威网站

内容来源于微信公众号：SINE独立站品牌运营