什么是面包屑导航？
面包屑导航是一系列文本链接，向用户显示他们当前所在页面的路径。这允许用户导航到网站层次结构中的更高页面。
这些链接（或“面包屑”）通常出现在页面顶部附近。
以下是 Nordstrom 男士牛仔裤页面的面包屑导航示例：
请注意面包屑链接如何沿着页面路径 (/browse/men/clothing/jeans/)：
面包屑锚文本 | 面包屑目的地 |
家 | / |
Men | /浏览/男士/ |
衣服 | /浏览/男士/服装/ |
面包屑导航的名字来源于童话故事《汉塞尔和格蕾特》，其中的角色创建了一条面包屑路径，以便他们可以折回他们的脚步。
然而，面包屑并不一定反映用户访问该页面的旅程。
例如，用户可以通过直接链接访问 Nordstrom 男士牛仔裤页面。但他们仍然会看到相同的面包屑菜单。
什么是网站上的面包屑？
在网站上，面包屑是显示您所在页面路径的链接。它们共同构成了面包屑导航。
例如，其中每一个都是面包屑：
面包屑导航的好处
在网站设计中使用面包屑可以有利于用户体验 (UX) 和 SEO。
一般来说，面包屑导航对于站点架构较深的站点更有优势。因为它可以帮助用户在多个级别之间导航。
面包屑在非常小或平坦的网站上不太有用。因为大多数页面只需点击一下即可进入主页。
但我们仍然建议实施面包屑，因为潜在的好处超过了时间投入。
让我们探讨一下向网站添加面包屑的主要好处：
鼓励用户探索您的网站
面包屑可以提示用户导航到您网站上的其他页面。这可以带来更高的广告或销售收入。
假设用户登陆下面的阿迪达斯产品页面。但找不到他们要找的东西。
他们可能会注意到面包屑菜单，而不是退出（或弹跳）。决定探索“Originals”系列的其余产品。最终购买不同的物品。
建立有利于 SEO 的内部链接
与其他类型的内部链接一样，面包屑可以帮助搜索引擎访问您网站上的页面。并了解您的网站结构。
下面的插图进一步解释了 Google 如何通过内部链接查找页面：
换句话说，内部链接可以提高网站的可抓取性。
这可能会导致您的更多网页出现在 Google 索引（潜在结果数据库）中。并且相关关键词的排名更高。
改善用户体验 (UX)
面包屑可以减少在网站架构中向上移动（例如，从子类别到其父类别）所需的点击次数。从而改善用户体验。
在没有面包屑的网站上，用户可能需要多次点击后退按钮。或者浏览多个菜单。
但通过面包屑导航，用户可以单击面包屑路径中的单个链接。
此外，许多用户已经开始期待网站上有面包屑导航。如果你的没有它们，可能会产生一些挫败感。
从搜索引擎产生更多点击
面包屑可以出现在 Google 搜索结果中。丰富的结果（称为丰富的摘要）通常更具吸引力和信息量，因此可能会吸引更多的点击。
例如，这是一个带有面包屑的片段：
与没有的比较：
为了确保 Google 可以找到并显示面包屑，您需要在页面代码中使用面包屑架构。
它看起来像这样：
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/home",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/category",
"name": "Category"
}
}
]
}
</script>
要检查您的网站是否已经有架构标记并确保其正常工作，您可以使用 Semrush 的网站审核工具。
设置完成后，打开“标记”报告。
向下滚动到“结构化数据项”以查看是否列出“面包屑”。
如果您有任何无效项目，请单击链接查看受影响的页面。
然后，单击“原因以及如何修复它”以获取有关继续操作的建议。
确保修复 SEO 面包屑后重新运行审核。
不同类型的面包屑
虽然基于层次结构的面包屑是最常见的，但面包屑也有不同类型。
让我们逐一探讨：
基于层次结构的面包屑
基于层次结构的面包屑遵循您网站的网站架构（或“层次结构”）。
考虑 Target 中的面包屑示例：
在此示例中，跟踪从顶级类别开始。在本例中，Target 是一个整体。
然后继续浏览更具体的嵌套子类别，然后到达当前页面“数码单反相机”。
这种类型的面包屑对于通过 Google 搜索结果登陆您网站的用户特别有用。
如果他们愿意，它允许他们快速返回层次结构以探索更多选项。
基于属性的面包屑
基于属性的面包屑根据用户可能在页面上应用的不同过滤器生成动态轨迹。
基于属性的面包屑主要用于电子商务网站。它们与基于层次结构的面包屑配对。
例如：
在电子商务网站上，当用户想要查看具有相同属性的所有产品时，这种面包屑导航非常有用。
基于路径的面包屑
基于路径的面包屑显示用户到达特定页面所采取的唯一路径。
但这种类型的面包屑导航通常以后退按钮的形式实现，而不是列出整个路径。这可以帮助用户返回上一页。
这是阿迪达斯的一个例子：
基于路径的面包屑在许多情况下没有帮助。它们仅提供与浏览器中的“后退”按钮相同的功能。
这就是为什么你不经常看到这些类型的面包屑。网站设计者通常喜欢具有更多功能的面包屑导航类型。
面包屑导航的 5 个最佳实践
为您的网站设计面包屑导航时，请遵循以下最佳实践。
1.使用面包屑来支持主要导航
网站面包屑不应取代您的主导航菜单。
将面包屑视为用户浏览您网站的另一种方式。它们应该链接到高度相关的页面并帮助用户了解您的网站结构。
在下面的示例中，戴尔的主菜单出现在面包屑的正上方。这意味着用户可以轻松访问各种导航选项。
面包屑导航中的描述性锚文本使用户可以轻松了解链接将把他们带到哪里。
2. 在各个级别之间使用分隔符
将面包屑路径中的每个链接分开以提高可读性。
许多网站使用大于号 (>)、箭头 (→) 或正斜杠 (/)。
这是沃尔玛的一个例子：
3. 不要包含当前页面的链接
面包屑导航不应包含当前页面的链接。
指向当前页面的链接没有任何作用。并且会给用户造成混乱。
但是，最佳实践是在面包屑路径中命名当前页面。
就像百思买在这里：
包含当前页面名称有利于：
面包屑用户体验，因为它可以帮助用户了解他们所在的位置以及路径显示的内容
面包屑搜索引擎优化，因为它允许您向页面添加自然关键字提及
4. 保持设计简单
面包屑网站设计应该尽可能简单且不引人注目。这样它既有用又不会分散读者对页面主要内容的注意力。
例如，以下是 Slack 在其网站上设计面包屑的方式：
Slack 的面包屑出现在网站的右上角，采用小但易读的字体，与网站的其他部分一致。
甚至类别之间的分隔符也很简单。
这些面包屑很容易找到和理解。但它们不会引起不必要的关注。
5.定期检查您的链接是否正常工作
损坏的链接对搜索引擎优化和用户体验不利，因此确保面包屑正常工作非常重要。
使用 Semrush 的站点审核工具，您可以立即检查所有内部链接。
设置后，导航至“内部链接”报告。
查看“错误”部分，看看是否有损坏或格式错误的链接。
如果是这样，请单击“# 问题”按钮查看受影响的页面。
您可以使用“发送到…”按钮在 Trello、Zapier 或 Semrush CRM 中创建任务。
应用修复后，单击“重新运行活动”并确保问题消失。
最后，前往“问题”选项卡查看其他错误、警告和通知。并提高网站的技术搜索引擎优化。
如何向 WordPress 网站添加面包屑导航
由于 WordPress 是最流行的内容管理系统 (CMS)，让我们看看如何在 WordPress 中添加面包屑。
一些 WordPress 主题支持开箱即用的面包屑导航。
如果您的主题不适合您，您可以使用 Yoast SEO 等插件。
转到“插件”>“添加新插件”。
搜索“Yoast”并单击“立即安装”。
安装完成后，点击出现的“激活”按钮。
接下来，您需要将一小段代码添加到主题的 header.php 文件部分。
如果您缺乏技术实力，我们建议您向团队中的开发人员寻求帮助。如果您犯了错误，更改主题文件可能会给您的网站带来大问题。
如果您愿意继续，请复制下面的代码。
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '</p><p id="breadcrumbs">','</p><p>' );
}
?>
并从侧边栏导航至“外观”>“主题文件编辑器”。
在主题编辑器中，将您复制的代码粘贴到主题的“header.php”部分中。
然后，单击“更新文件”保存更改。
之后，从侧边栏转到“Yoast SEO”>“设置”。
然后，滚动到“高级”>“面包屑”。
将出现一个表单，您可以在其中根据您希望面包屑在网站上的显示方式来配置面包屑。
最后，打开表单下方的“为您的主题启用面包屑”选项。
