痕迹导航是网站导航的一个重要元素。“面包屑”一词来自经典的格林兄弟故事，孩子们将面包屑撒在树林里寻找回家的路。站点痕迹导航具有相同的用途;它们可帮助用户了解他们在网站页面层次结构中的位置，甚至帮助他们返回到前面的部分。
本文介绍了各种现有的痕迹导航类型。我们还将讨论您的网站是否需要它们以及如何正确设置它们。
什么是痕迹导航？
痕迹导航或痕迹导航是一个图形用户界面 （GUI） 元素。它可以帮助用户跟踪他们在网站或应用程序上的当前位置。
痕迹导航在网页设计中的用例是让它们以用户友好的方式展示网站的层次结构。它们通常显示在网页（或应用程序）顶部附近，作为一行水平可点击链接，每个链接代表站点层次结构中的一个级别。最左边的链接表示主页或根级别，而后续链接表示逐渐特定的子类别。例如，在电子商务网站上，痕迹导航跟踪可能以“Home > Women > Accessories > Bags”开头，以显示用户在网站类别层次结构中的当前位置。
面包屑有哪些不同类型？
有几种类型的痕迹导航，每种类型都取决于跟踪中包含的元素。
基于层次结构的痕迹导航
基于层次结构的痕迹导航是最普遍的。 这些选项为网站用户提供了一条延伸到主页的路径，使用户能够轻松导航到网站层次结构中各个级别的类别页面。痕迹导航跟踪通常如下所示：Homepage > Category > Subcategory > Page。
此痕迹导航示例是基于层次结构的痕迹导航的变体。该路径始终从顶级类别开始，并引导用户沿着网站结构前进。此示例中的痕迹导航是静态的，这意味着无论用户如何导航到每个页面，它们对每个用户的外观都相同。
这不是唯一可能的选择。一些痕迹导航是基于路径的，甚至是基于属性的。
基于路径的痕迹导航
基于路径（或基于历史记录）的痕迹导航包括一个路径，指示用户访问过的实际页面。它看起来像这样：Home > Previous page > Previous page > Current page。这些痕迹导航类型很少使用，因为浏览器的 Back （返回） 按钮执行相同的工作。从 Google 等外部来源到达的访问者也对他们没有任何用处。
基于历史记录的痕迹导航通常与其他痕迹导航类型结合使用，以帮助用户返回之前的页面。
基于属性的痕迹导航
与传统痕迹导航显示的网站分层显示不同，基于属性的痕迹导航显示用户在上一页面上选择的过滤器或属性。
例如，假设您正在电子商务网站上购买鞋子。您首先选择 “men’s shoes” 类别，然后按尺码和颜色进行筛选。使用基于属性的痕迹导航时，您会看到类似于“men’s shoes > size: 9 > color: black”之类的传统痕迹导航轨迹，而不是“home > men’s shoes > size > color”之类的内容。这使用户更容易记住他们以前的选择，并在必要时快速修改或删除它们。
下面的屏幕截图显示了 Sephora 如何组合基于层次结构和基于属性的痕迹导航。通常，基于属性的痕迹导航与传统痕迹导航一起使用，为用户提供更全面的导航体验。
如果您查看 “shampoo” 类别，您可以看到面包屑轨迹显示了用户选择的特定头发类型、关注点和配方。这些属性充当可点击的碎屑，可以删除或更改这些碎屑，以根据用户的偏好显示不同的页面或内容。
基于属性的痕迹导航的一个优点是，它们提供比传统痕迹导航更精细的导航级别。用户可以通过选择或取消选择属性来快速缩小搜索结果范围。这样就无需返回上一页，从而避免了他们必须从头开始搜索的需要。这改善了用户体验，并使网站更令人满意。
这表明面包屑有各种形状和大小，可以满足不同网站的需求。这也证明了它们很有用，但它们到底有多重要呢？
您的网站真的需要面包屑导航吗？
这取决于网站的结构和用户的需求。尽管痕迹导航非常有用并且能够增强用户体验，但它们也可能令人困惑且不必要。
痕迹导航对于具有多级结构的网站（如电子商务或新闻网站）非常有用。假设用户浏览包含许多类别、子类别和产品页面的在线商店。痕迹导航使用户能够快速导航回上一页或跳转到更高级别的类别。他们不再需要反复单击后退按钮。
痕迹导航效果最好的示例
例如，世界上最大的在线零售商之一 eBay 使用面包屑导航来帮助用户浏览其庞大的产品目录。当用户搜索产品并选择特定类别时，他们可以使用痕迹导航轨迹返回到类别页面或主页。
同样，U.S. News 使用面包屑导航来帮助用户筛选其新闻版块：Education、Health、Money、Travel 等。用户可以使用其 breadcrumb trail 功能返回主页（或上一篇文章）。
痕迹导航不起作用的示例
对于具有平面结构的小型网站，痕迹导航可能不是必需的。如果网站只有几个页面，并且所有页面都可以从主导航菜单轻松访问，那么痕迹导航跟踪可能不会增加太多价值。用户使用主页或菜单查找其他页面不会有太大问题。
考虑一下一个名为罗马国际舞蹈学院的意大利舞蹈学校和工作室的网站。它只有几个部分（主页、关于我们、培训课程、Mandragora 舞蹈团、新闻和联系方式）。用户可以通过网站的主菜单或页脚链接导航到任何页面。
如果您在可从多个入口点访问的较低级别页面上包含痕迹导航，用户可能会感到困惑。一个很好的例子是 IMDb，这是一个流行的电影和电视节目数据库。IMDb 在其电影页面上不使用面包屑导航。
这是因为一部电影可以属于多个类别或流派，使用痕迹导航菜单可能会使用户感到困惑。相反，用户可以通过 IMDb 的推荐和搜索功能导航到其他相关电影。
面包屑导航的 SEO 优势
在你的网站上包含面包屑是一种 UX 设计最佳实践和有效的 SEO 策略。它可以帮助搜索引擎了解您网站的结构并提高其在搜索结果中的可见性。有效的面包屑导航也与 UX SEO 最佳实践保持一致。
下一节将探讨痕迹导航的 SEO 优势，以及它们如何增强用户体验、改善用户行为、优化内部链接结构和改进搜索片段。
增强的用户体验
痕迹导航简化了网站页面导航。它们指示用户的位置，并使其易于访问以前的页面或不同的类别。面包屑对于从 SERP 到达但对您的网站结构一无所知的用户特别有用。
请考虑以下场景：您正在寻找沙发。您点击了 Google 代码段，并想探索商店的其他选项。借助 breadcrumbs，您只需单击一下即可访问整个沙发目录或查看同一品牌的其他产品。
从网站的类别页面开始搜索产品时，面包屑也很有帮助，尤其是当您设置颜色或大小等过滤器时。如果您使用痕迹导航从产品页面返回类别页面，您的筛选条件将保持不变，以便您从上次中断的地方继续。但是，如果您改用浏览器的 Back 按钮，则可能会丢失您的过滤器首选项。
痕迹导航还可用于在网站类别和多步骤流程（如表单、结帐和调查问卷）之间导航。当用户参与复杂的任务时，例如使用分页填写划分为多个页面的冗长表格或调查问卷，痕迹导航可帮助他们跟踪进度并在页面之间来回移动。这可以减少挫败感，提高用户满意度，并提高参与度和忠诚度。
改进了用户行为
面包屑导航鼓励用户浏览网站并访问更多页面，从而降低跳出率。当用户可以轻松地在网站上移动时，他们更有可能浏览其内容。用户在网站上花费的时间越长，他们对网站所有者的价值就越大。换句话说，痕迹导航有助于保持用户的参与度，从而提高电子商务转化率和收入。
更好的内部链接结构
除了页眉菜单和页脚，痕迹导航还可以帮助您在整个网站上传播链接资产。指向您网站上页面的链接数量表明其突出程度，页面在网站层次结构中的位置越高，指向它的链接就越多。类别应该链接到主页，子类别应该链接到类别，产品页面应该链接到子类别。
除了改进内部链接结构外，痕迹导航还可以增强网站的可抓取性，帮助搜索引擎了解网站的架构。通过跟踪面包屑提供的链接，搜索引擎爬虫可以发现网站上的更多页面并更有效地为它们编制索引。这可以导致更高的搜索引擎排名和增加自然流量。
SE Ranking 的网站诊断工具可以通过确保将链接汁传递到正确的页面来帮助您优化网站的链接结构。与搜索爬虫类似，此工具会跟踪您网站上的链接，检测并帮助您解决 Google 可能不满意的任何链接问题。
在该工具的 问题报告 部分，您可以访问网站审核期间发现的所有问题的完整列表。该报告将问题分类为错误、警告或通知，以便您确定必要修复的优先级。单击问题名称可查看建议解决方案的描述和详细分类。
查看报告的抓取和索引以及链接部分，以确保您的网站页面被正确抓取和链接。
引人注目的搜索片段
使用适当的面包屑标记会在您的 Google SERP 代码片段中包含您的面包屑跟踪。
如果您不使用实际的面包屑，或者没有用 Google 能理解的语言告诉 Google 您拥有的面包屑，Google 将根据你的 URL 生成自己的面包屑版本。以下示例说明了如果您未在 URL 中包含 webpage 类别，痕迹导航将如何显示：
使用架构标记确保 Google 在代码段中显示痕迹导航，而不是修改后的 URL。Google 将根据它们与搜索查询的相关性独立决定将哪些网站类别包含在跟踪中。
在查看页面的 SERP 片段时，您有几个选择。一种方法是对您选择的所有页面进行手动 Google 搜索（一个接一个）。您还可以使用 SE Ranking 在单个选项卡中检查所有内容。创建项目后，您可以在 Analytics and Traffic 部分中评估每个跟踪关键字的片段。
该工具存储超过 30 天的数据，因此您可以选择此范围内的任何日期或时间段，并查看您的 SERP 片段在任何给定时间的外观。
Google 摘要中的痕迹导航提供了页面类别和网站上可用的相关产品/信息的快速概览。这就是为什么拥有适当的面包屑是使用户在 SERP 中选择您的网站而不是其他网站的另一个因素。
请遵循 Google 的指南，确保结构化数据标记有效。为了改善用户体验，Google 建议提供表示用户网页的常见路径的痕迹导航，而不仅仅是复制 URL 结构。URL 路径的某些组件可能对用户了解网页在您网站上的排名没有帮助。
然后，您需要使用 Google 的 Schema Markup Validator 验证结构化数据标记。使用此工具可测试和确认标记代码的准确性，确保它符合最佳实践，并且不包含任何可能影响网站在搜索结果中的外观的错误。
简而言之，面包屑向 Google 发送更好的行为信号，并在你的网站上正确分配链接汁。两者都是积极的排名信号，这意味着包含面包屑可以帮助您获得更高的搜索引擎排名。
让我们探索一些使用流行的内容管理系统 （CMS） 向您的网站添加面包屑的方法。
痕迹导航最佳实践
向您的网站添加痕迹导航需要仔细考虑。以下是有效使用痕迹导航的一些提示：
保持痕迹导航小巧且不引人注目
为了保持视觉设计平衡并避免用户混淆，请在主网站导航下方以较小的尺寸显示痕迹导航。
如果痕迹导航过大，则可能会破坏页面的整体平衡，并使用户难以浏览您的网站。
保持面包屑痕迹较小的一种方法是使用与网站其他部分融合的简单设计。实施微妙的配色方案或将痕迹导航轨迹放置在不太显眼的位置。
保持面包屑痕迹干净整洁
整洁的痕迹导航可以帮助用户专注于页面标题和导航路径等基本信息。它还可以防止用户被不必要的设计元素分散注意力。这可以改善整体用户体验，并使用户更容易进行网站导航。
为此，网站设计师可以与真实用户一起测试痕迹导航跟踪。这包括进行可用性测试或通过调查、用户评论或反馈表收集用户反馈。
对痕迹导航使用一致的格式
确保痕迹导航中的页面标题与网站页面的标题匹配，使用户更容易键入其位置并浏览网站。
使用一致的格式（如箭头或斜杠）分隔痕迹导航跟踪中的链接。此外，请确保导航的字体、颜色和样式与网站的整体设计保持一致。
包括完整的导航路径
如果用户在浏览时迷路，这有助于他们回溯他们的步骤。某些网站可能会隐藏主页或顶级页面，但您应该始终在痕迹导航中提供尽可能多的信息。这有助于用户了解他们在网站上的当前位置。
避免链接到当前页面
将页面链接到自身对 SEO 不利。虽然您可以将当前页面包含在痕迹导航跟踪中，但不要提供指向该页面的直接链接。您也不应该将痕迹导航添加到主页，因为这会导致一个链接回自身的单元素跟踪。如果用户不小心点击了痕迹导航链接并最终进入了同一页面，这可能会使用户感到困惑。相反，将当前页面显示为不带链接的纯文本。这使用户更容易了解他们在网站结构中的位置。从 SEO 的角度来看，这是自然而然地提及关键词的好方法。
例如，如果用户正在查看 iphone 16，则痕迹导航可以是：Home > Electronics > Smartphones > iphone 16（其中“iphone 16”显示为纯文本）。或者就像 Target 所说的那样：
如何正确地将痕迹导航添加到您的网站
以下是在添加痕迹导航之前需要考虑的其他一些因素：
将痕迹导航放在页面顶部主导航的正下方。这是用户的常见和预期位置。尽管如此，一些网站（如 Apple）将面包屑放在页面底部。
这是因为 Apple 的产品页面具有冗长的描述，否则用户将难以滚动到页面顶部。与 Apple 类似的网站（无休止滚动）也可以从页面底部的面包屑跟踪中受益。您还可以使用两个痕迹导航路径，一个在顶部，另一个在底部。
- 在启用痕迹导航之前，将架构标记添加到您的网站代码中。 架构标记是添加到 HTML 代码的标记的语义词汇表。它可以帮助 Google 理解您的内容，并清楚地表明您页面顶部的链接是面包屑。
让我们通过回顾向您的网站添加面包屑的各种方法来总结这一点。
在 WordPress 中添加面包屑导航
如果您的网站在 WordPress 上运行，您可以使用特殊插件来添加面包屑。您也可以自己编写所有内容。
让我们仔细看看 Yoast SEO 插件作为示例，因为它被广泛使用。
此插件的免费版本包括面包屑功能，但您也可以以 99 欧元的价格获得 Yoast SEO Premium 版本。要使用此插件，您需要 WordPress 6.0 版。或更高版本，并且您的托管服务必须支持 PHP 版本 7.2.5 或更高版本。
安装并激活插件后，请执行以下步骤：
-
单击 WordPress 仪表板中的“Yoast SEO”选项卡并选择“Settings”，转到 Yoast SEO 设置。
-
单击“Advanced”，然后单击“Breadcrumbs”选项卡。
-
选择痕迹导航分隔符。这用于分隔痕迹导航，例如 “»” 或 “/”。
-
根据需要自定义痕迹导航设置。您可以在主页上显示痕迹导航，选择痕迹导航跟踪的前缀等。
-
将“Enable Breadcrumbs”选项切换为“On”。
-
单击“保存更改”以保存您的设置。
即使您已完成所有设置，痕迹导航也不会立即出现在您的网站上。将几行代码添加到您的主题或子主题的 header.php 文件中以启用它们。
<?php
if ( function_exists('yoast_breadcrumb') ) {yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
就是这样。痕迹导航现在应该在您的网站上可见。
自行编写面包屑导航
对痕迹导航进行编码可能是一项具有挑战性的任务。它需要一些编码知识和经验。如果您具备所需的技能和时间，则可以创建自己的面包屑导航。否则，请将此任务委托给开发人员。
创建痕迹导航涉及编写 HTML 和 CSS 代码来设计视觉布局，以及编写 JavaScript 代码以实现交互性。仔细规划痕迹导航结构并对其进行全面测试，以确保它在不同的设备和浏览器上运行良好。
实施不当的痕迹导航可能无法按预期运行，从而导致用户体验不佳和网站参与度降低。要创建健壮且安全的痕迹导航代码，您必须对 Web 开发和安全实践有深入的了解。
最后
痕迹导航对于导航至关重要，各种插件和模块可以使它们易于实现。如果您的网站具有包含大量页面的多级结构，那么没有理由没有面包屑。
此导航跟踪将在您的网站和 SERP 中为您的用户提供帮助。
就是这样！下一步是采取行动并开始为您的网站创建适当的痕迹导航跟踪。如果您需要更多帮助，请随时返回并再次阅读本文！如果您密切关注每个步骤，随着时间的推移，您会看到您的排名有明显的提高！
)
