什么是面包屑导航？SEO 影响与最佳实践

什么是面包屑导航？

面包屑导航是一种导航元素，以一条路径帮助用户和搜索引擎爬虫理解当前页面及其在网站中的位置，通常出现在网页顶部。

面包屑导航大致呈现如下：

面包屑导航得名于童话《糖果屋》（Hansel and Gretel），故事中的角色沿途撒面包屑标记路径，以便原路返回。

面包屑导航未必反映用户到达该页面的路径。例如，用户可能通过直接链接进入上图的 Eddie Bauer 男裤页面，看到的仍是同一组面包屑链接。

大多数网站都应实现面包屑导航，包含多个子版块的网站尤其如此。

为什么面包屑导航对 SEO 很重要？

面包屑导航不会直接影响排名，但对 SEO 仍有帮助。以下是它对网站的影响：

改善内链和可抓取性

面包屑导航借助内链为用户和搜索引擎引导路径，让页面更容易被发现并出现在搜索结果中。

SEO 机构 AUQ 的创始人 Kirill Sajaev 表示，对于服务页和工具页数量庞大、难以妥善纳入顶部导航或页脚的客户，他的团队会用面包屑导航改善导航与可抓取性。

每个单独的工具页归入某一分类，每个分类再归入主工具列表（该列表加入网站页脚）。结构如下：

• 主工具列表页
  • 工具分类页
    • 单独的工具页

Kirill 指出，这种做法对让页面被 Google 索引很有帮助：

“这些面包屑导航的主要用户是 Google 爬虫。这很有用，因为我们还能为这些面包屑添加 schema 标记。因此，即使 URL 结构并不理想，我们也能始终明确指定 Google 应如何看待我们的内容。”

使用 BreadcrumbList schema 实现面包屑导航，还可能影响网站在 AI 搜索中的曝光度。

Semrush 的 SEO 内容策略师 Zach Paruch 解释，结构化数据似乎在 LLM 阅读和理解内容的能力中起到一定作用。

“这些‘链条’让 LLM 更容易理解和回忆内容，并在用户提出相关问题时将其呈现出来。”

改善用户体验

面包屑导航让用户快速确定自己在网站中的位置，从而简化导航、改善用户体验（UX），并降低跳出（bounce）的可能性。

这同样影响 SEO。

Google 的Navboost 是排名算法的一部分，利用真实用户行为影响排名，其中包括用户是否会从网页快速返回搜索结果。

用户在网站上停留更久，说明网站内容有用，因而可能获得更高的排名。

更好的互动并非必然。若对是否在全站实现面包屑导航犹豫不决，可做一次 A/B 测试，观察它对用户互动是否有实质影响。

MEDvidi 的 SEO 负责人 Anton Shaban 发现，面包屑导航对 MEDvidi 博客并没有太大帮助。

“点击面包屑链接的访客不足 0.5%，所以我们把它们移除了。”

网站面包屑导航的类型

为网站添加面包屑导航之前，先考虑要实现哪种类型：

基于层级的面包屑导航

基于层级的面包屑导航依据你的网站结构，告诉用户其所处位置。这种类型通常显示当前页面、当前页面所属的子页面，依次上溯至首页。

以下是 ASOS 的一个例子：

层级式面包屑导航对来自自然搜索的用户很有帮助，能让他们轻松发现其他相关内容。

基于属性的面包屑导航

基于属性的面包屑导航展示页面上各商品的共同点，常与层级式面包屑导航一起出现在电商网站上。

以下是一个例子：

基于路径的面包屑导航

基于历史记录或路径的面包屑导航显示你到达某一具体页面的独特路径。它不勾勒网站层级，只显示你目前访问过的页面。

如今很难找到使用基于路径的面包屑导航的网站。即便有，通常也只是作为返回按钮，带你回到上一个访问的页面。

这两种做法都不推荐，因为用户用浏览器就能完成同样的操作。

这也是这类面包屑导航不常见的原因。网站设计师更青睐功能更多的面包屑导航类型。

面包屑导航的 5 项最佳实践

为网站设计面包屑导航时，可遵循以下最佳实践。

1. 让它们易于被看到

面包屑导航应易于看到又不显突兀，通常放在页面的左上角。

以下是 Plaid 博客的一个例子：

2. 包含完整路径

面包屑导航应包含从首页或主分类页到当前目标的完整路径（具体层级可能随网站结构更多）。这能让访客原路返回，快速回到网站的重要部分。

移动端尤为重要，因为主导航常隐藏在汉堡菜单后面。以下是一个例子：

移动端用户只需轻点一下就能返回“Women”分类。

3. 使用一致的格式

面包屑导航应以一致的格式呈现，为用户营造轻松的浏览体验。

让面包屑导航保持一致的方式：

• 各层级使用相同的分隔符（例如“/”“>”或“→”）
• 确保字体和链接颜色符合视觉规范，并在各页面保持一致
• 整个网站都使用同一种面包屑导航类型（例如基于层级或基于属性）

4. 不要链接到当前页面

面包屑导航不应链接到当前页面，这类链接没有意义，还可能让用户困惑，因为它们不会把用户引向别处。

但应在面包屑路径中列出当前页面，帮助用户了解自己所处的位置。

这对 SEO 也有好处，可以自然地提及一个主关键词（核心关键词）。自然地融入所要定位的词，有助于搜索引擎理解你的页面与某些查询相关。

5. 添加并验证面包屑 schema

添加面包屑 schema 能帮助搜索引擎理解网站结构以及各页面之间的相互关系。

为网站添加面包屑 schema 标记后，运行一次审计，检查格式是否正确。

可以使用 Semrush 的 Site Audit 工具完成。

设置好项目并扫描网站后，会看到一个包含各类专题报告的仪表盘。点击“Markup”下方的“View details”。

在“Structured Data Items”下找到“Breadcrumb”，检查“Invalid”列中是否有无效项。

看到错误时，点击带链接的数字即可查看错误列表和受影响的 URL。在此可点击“Affected Fields”列中的下拉箭头，找出需要修复的具体字段。

如何在 WordPress 中实现面包屑导航

WordPress 用户可安装原生支持面包屑导航的主题来实现它。

也可以使用 Yoast SEO 之类的插件。

安装方式：前往“Plugins”>“Add Plugin”。

搜索“Yoast”，然后点击“Install Now。”

插件安装完成后，点击“Activate”。

接下来要向主题添加一段代码。若不习惯对网站做技术性改动，请找开发者帮忙。

继续操作时，复制下面的代码，粘贴到主题中希望显示面包屑导航的位置。

之后，在侧边栏前往“Yoast SEO”>“Settings”，再选择“Advanced”>“Breadcrumbs”。

在这里可以配置面包屑导航，并自定义它们在网站上的显示方式。

准备把更改上线时，点击“Enable breadcrumbs for your theme”旁边的开关。

实现面包屑导航，改善 UX 和 SEO

面包屑导航消除了访客的导航障碍，让他们在网站上停留更久。网站对搜索引擎而言因此显得更有用，从而获得更高的排名。

面包屑导航只是 SEO 的一小部分。反向链接、主题权威、技术表现等同样需要考虑。

Semrush 提供 AI 驱动的 SEO 和内容营销工具包，帮助你优化网站的每一个部分。用免费账号即可探索这些工具。