面包屑导航和结构化数据：让搜索引擎理解你的网站

如何实现面包屑 schema 标记，使其与导航菜单对齐，并改善搜索结果的富媒体展示。

面包屑是那种看起来微不足道的界面元素，直到你明白谷歌有多重视它们。它们出现在产品和分类页面的顶部（首页 → 女性 → 连衣裙 → 夏季连衣裙），帮助用户理解他们在网站层级中的位置。这是用户体验的好处。SEO 的好处更大：面包屑创建内部链接，将权重流向你的网站各处，当用标记化数据注释时，它们会直接在谷歌搜索结果中显示为富媒体片段。

带有面包屑的搜索结果更突出。与其显示纯 URL（example.com/products/12345），谷歌会显示完整的面包屑路径（示例商店 → 女性 → 连衣裙）。用户在点击前就能看到上下文。这个结果看起来更权威，获得更多点击，并向谷歌表明你的网站有清晰的层级，值得特别展示。

但面包屑只有在正确实现时才能发挥这些好处：真实的 HTML 链接（不仅仅是视觉样式）、结构化数据标记（JSON-LD）以及与主导航结构的对齐。许多商店将面包屑作为设计元素添加，但没有添加标记，从而完全错过了 SEO 价值。

快速要点

面包屑创建从产品到分类的内部链接，将链接权重向上传递。
结构化数据（JSON-LD BreadcrumbList）告诉谷歌在搜索结果中展示面包屑。
面包屑路径应与你的 URL 结构和主导航层级一致。
使用谷歌的富媒体结果测试工具测试，并在搜索控制台中监控错误。

面包屑对 SEO 为何重要

面包屑有三个 SEO 功能：

1. 内部链接架构

每个面包屑都是一组内部链接。一个包含面包屑”首页 → 女性 → 连衣裙 → 产品”的产品页面包含三个内部链接：一个指向首页，一个指向女性分类，一个指向连衣裙分类。

这些链接将链接权重从产品页面传回分类页面。如果产品页面获得外部反向链接（一篇博文评论该产品并直接链接到它），部分权威会通过面包屑链接流向分类页面。这与正常的导航流向相反（首页 → 分类 → 产品）。面包屑创建了双向流。

面包屑还为谷歌提供了发现页面的多条路径。谷歌可以沿着面包屑向上爬行（从产品到分类到首页），也可以向下爬行（从首页到分类到产品），提高爬行效率，降低页面孤立的风险。

2. 网站层级信号

面包屑明确地告诉谷歌你的网站是如何组织的。路径”首页 → 女性 → 连衣裙 → 夏季连衣裙”告诉谷歌夏季连衣裙是连衣裙的子分类，连衣裙是女性的子分类，女性是顶级分类。

谷歌使用这一层级来理解哪些页面是枢纽（被许多面包屑链接的分类），哪些页面是叶子（单个产品）。枢纽页面被认为更重要，爬行频率更高。

没有面包屑，谷歌必须从 URL 结构、内部链接模式和导航菜单推断层级。面包屑使层级明确，减少歧义。

3. 搜索中的富媒体结果

当你为面包屑添加结构化数据标记时，谷歌可以直接在搜索结果中展示它们。用户看到的不是纯 URL，而是完整的面包屑路径。

没有面包屑的搜索结果示例：

example.com › products › 12345-summer-dress

带有面包屑的搜索结果示例：

示例商店 › 女性 › 连衣裙 › 夏季连衣裙

第二个结果更具信息性，更容易获得点击。用户在访问页面前就能看到分类背景。这提高了点击率 (CTR)，而更高的 CTR 对谷歌来说是正面的排名信号。

如何实现面包屑：HTML 结构

面包屑必须是真实的 HTML 链接，不仅仅是样式化的文本。面包屑路径的每个级别都应该是指向相应分类页面的锚标签。

基本 HTML 结构

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/collections/women">女性</a></li>
    <li><a href="/collections/dresses">连衣裙</a></li>
    <li><a href="/collections/summer-dresses">夏季连衣裙</a></li>
  </ol>
</nav>

关键元素：

<nav aria-label="Breadcrumb">：包装器是一个带 ARIA 标签的 nav 元素，这样屏幕阅读器会将其宣布为面包屑路径（而不仅仅是通用导航）。
<ol>：有序列表，因为面包屑是一个序列（顺序很重要）。
<a href="...">：真实的锚标签和真实的 URL。每个面包屑级别都可点击且可爬行。

最后一项（当前页面）可以是链接或纯文本。谷歌两者都接受。一些 UX 准则建议使其为纯文本（因为点击它没有作用——你已经在该页面上了），而其他人建议保持为链接以保持一致性。两者对 SEO 都有效。

CSS 样式

面包屑通常样式为内联水平列表，项目之间有分隔符（/ 或 › 或 >）。分隔符可以用 CSS 伪元素添加：

nav[aria-label="Breadcrumb"] ol {
  list-style: none;
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: #999;
}

分隔符仅是视觉的——它们不是 HTML 结构的一部分。谷歌忽略它们。

如何添加结构化数据标记

HTML 面包屑创建内部链接并改善用户体验。结构化数据标记告诉谷歌这些链接代表面包屑路径，应显示为富媒体结果。

谷歌支持 JSON-LD 格式的 BreadcrumbList schema 标记。这是一个包含描述面包屑结构的 JSON 数据的脚本标签。

JSON-LD BreadcrumbList 示例

在每个有面包屑的页面（产品页面、分类页面、文章页面）的 <head> 或 <body> 末尾添加此脚本：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "女性",
      "item": "https://example.com/collections/women"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "连衣裙",
      "item": "https://example.com/collections/dresses"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "夏季连衣裙",
      "item": "https://example.com/collections/summer-dresses"
    }
  ]
}
</script>

关键字段

@context 和 @type：标准 schema.org 声明。这些告诉谷歌这是一个 BreadcrumbList。
itemListElement：面包屑项目的数组，按从首页到当前页面的顺序。
position：每项的顺序（首页为 1，第一个分类为 2，子分类为 3，等等）。
name：面包屑的可见文本（用户看到的）。
item：页面的完整 URL（必须是绝对路径，以 https:// 开头）。

最后一项（当前页面）必须包含 item 字段。较旧的谷歌文档建议省略它，但当前最佳实践是为所有项目都包含它。

常见面包屑 schema 错误

错误 1：相对 URL 而非绝对 URL

谷歌要求结构化数据中使用绝对 URL。这会验证失败：

"item": "/collections/women"

这通过验证：

"item": "https://example.com/collections/women"

如果你的 Shopify 主题使用 Liquid 生成面包屑标记，确保使用带 absolute_url 的 url 过滤器：

"item": ""

错误 2：HTML 和 JSON-LD 不匹配

HTML 面包屑和 JSON-LD 标记应该描述相同的路径。如果 HTML 显示”首页 → 女性 → 连衣裙”，但 JSON-LD 显示”首页 → 服装 → 连衣裙”，谷歌可能会忽略标记或将其标记为错误。

当主题基于 URL 结构动态生成面包屑但硬编码 JSON-LD 标记时，会发生这种情况。始终从同一数据源生成两者。

错误 3：包含非面包屑链接

某些主题将当前页面标题包含在面包屑路径中，即使它不是可导航的链接：

<li>产品：夏季棉质连衣裙</li>

这对 HTML 是可以的（为用户提供背景），但对应的 JSON-LD 项目应该仍然代表分类或部分页面，而不是产品本身。最后一项应该是父分类：

{
  "position": 3,
  "name": "连衣裙",
  "item": "https://example.com/collections/dresses"
}

如果你将产品作为最后的面包屑项目，确保它有一个真实的 URL：

{
  "position": 4,
  "name": "夏季棉质连衣裙",
  "item": "https://example.com/products/summer-cotton-dress"
}

错误 4：面包屑与导航不匹配

如果你的主导航有一个名为”女性服装”的分类，但你的面包屑显示”女性”，谷歌可能会困惑这些是否是同一分类。

在导航、面包屑和 URL 中使用一致的命名。如果导航说”女性服装”，面包屑也应该这么说。如果 URL 是 /collections/womens-clothing，结构化数据中的分类名称应该匹配。

如何测试面包屑标记

谷歌富媒体结果测试

谷歌提供了一个免费工具来验证结构化数据：富媒体结果测试（搜索”Google Rich Results Test”并输入你的 URL）。

该工具爬行你的页面，提取结构化数据，并显示它是否有效。对于面包屑，它应该显示：

检测到”BreadcrumbList”
项目数量
每项的名称和 URL

如果工具显示错误（”缺少必需字段：item”或”无效 URL”），在部署前修复它们。

手动查看源码检查

在浏览器中打开你的产品或分类页面，查看源码（Ctrl+U / Cmd+Option+U），搜索 BreadcrumbList。你应该看到包含所有面包屑项目的 JSON-LD 脚本。

验证：

所有 URL 都是绝对的（以 https:// 开头）。
面包屑路径与页面上可见的 HTML 面包屑匹配。
position 值是连续的（1、2、3、…）。

谷歌搜索控制台

部署面包屑标记后，检查谷歌搜索控制台 → 增强 → 面包屑。此报告显示：

有多少页面有有效的面包屑标记
有多少页面有错误或警告
谷歌发现了哪些具体错误

谷歌可能需要几天来爬行你的页面并填充此报告。如果出现错误，点击错误详情以查看哪些页面受影响以及错误消息是什么。

面包屑和 URL 结构

面包屑与你的 URL 结构对齐时效果最好。如果产品的 URL 是：

https://example.com/collections/women/products/summer-dress

面包屑应该反映该路径：

首页 → 女性 → 夏季连衣裙

如果 URL 与面包屑路径不匹配（URL 说 /collections/women 但面包屑显示”服装 → 女性”），用户和搜索引擎对网站层级获得相互矛盾的信号。

对于 Shopify 商店，这可能很复杂。Shopify 产品 URL 默认是扁平的：

https://example.com/products/summer-dress

URL 中没有分类。产品可能出现在多个集合中（女性、连衣裙、夏季促销），所以没有单一的规范面包屑路径。

解决方案：

1. 选择一个主要集合。 如果产品属于多个集合，指定其中一个为主要集合。对面包屑使用该集合。Shopify 主题通常通过检查用户来自哪个集合（通过 HTTP referrer）来做到这一点，但这对直接从搜索结果登陆产品页面的用户不起作用。

2. 使用 URL 参数。 一些主题向产品 URL 追加集合参数：/products/summer-dress?collection=women。然后面包屑可以从该参数生成。

3. 使用 Shopify 的基于集合的产品 URL。 在 Shopify 管理员中，你可以为产品启用基于集合的 URL：设置 → 通用 → 产品 URL 格式。这会将产品 URL 更改为 /collections/women/products/summer-dress。集合现在是 URL 的一部分，使面包屑生成变得直接了当。

分面导航的面包屑

分面导航（按大小、颜色、品牌等属性过滤分类页面）创建动态面包屑，反映当前过滤状态：

首页 → 女性 → 连衣裙 → 尺码：中号 → 颜色：蓝色

这些过滤选择应该出现在面包屑结构化数据中吗？

谷歌的指导：面包屑应该代表网站层级，而不是临时过滤状态。结构化数据应该显示：

首页 → 女性 → 连衣裙

HTML 面包屑可以显示完整路径包括过滤器（用于用户体验），但 JSON-LD 应该省略过滤器。过滤器不是稳定的 URL（它们随每次用户交互而改变），它们也不代表可导航的层级。

例外：如果过滤组合被提升为独立分类页面（例如，一个带有自己的 URL 和内容的”女性蓝色连衣裙”集合），那是一个真实分类，应该出现在面包屑中。

面包屑与主导航的互动

面包屑不是替代主导航——它们补充主导航。主导航（头部菜单）提供顶级分类和对关键部分的快速访问。面包屑提供层级背景和从深页面的向上导航。

两者应该对齐：

如果你的主导航有一个”女性”分类，该分类下的产品页面上的面包屑应该包含”女性”。
如果你的主导航使用”男性服装”作为标签，面包屑应该使用”男性服装”，而不是”男性”。

不一致的命名会让用户困惑（”‘女性’和’女性服装’是同一个吗？”），并削弱 SEO 信号（谷歌看到同一分类的两个不同标签，必须推断它们是相同的）。

快速实现检查在你的商店中打开一个产品页面。查看源码并搜索"BreadcrumbList"。如果没有出现，你没有面包屑结构化数据。添加它——标记的实现需要 10 分钟，几天内就可能改善点击率。

面包屑作为爬行效率工具

除了富媒体结果和内部链接外，面包屑还帮助谷歌更高效地爬行你的网站。当谷歌爬行产品页面时，它提取所有链接，包括面包屑链接。如果面包屑包含三个链接（首页、女性、连衣裙），谷歌现在有三个额外的 URL 要爬行。

对于大型商店，这很重要。谷歌分配有限的爬行预算——它不会每天爬行每个页面。更频繁地链接的页面（从更多页面）爬行频率更高。出现在数百个产品页面的面包屑中的分类爬行频率比仅在主导航中链接的分类高得多。

这对低库存或季节性产品尤为重要。如果产品缺货，你希望谷歌快速重新爬行分类页面以更新搜索结果。从产品页面到分类页面的面包屑链接增加了谷歌在几小时或几天内而非几周内重新爬行分类页面的可能性。

在 Shopify 中实现面包屑

大多数现代 Shopify 主题包括面包屑支持，但不是所有都包括结构化数据标记。检查你的主题文档或检查主题 Liquid 文件中的面包屑代码。

如果你的主题不包括 JSON-LD 标记，你可以手动添加。在主题的 theme.liquid 文件中（或在产品和集合页面上包含的片段中），添加如下脚本：

{% if template contains 'product' %}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "首页",
        "item": "{{ shop.url }}"
      }
      {% if collection %}
      ,{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title | escape }}",
        "item": "{{ collection.url | absolute_url }}"
      }
      {% endif %}
      ,{
        "@type": "ListItem",
        "position": {% if collection %}3{% else %}2{% endif %},
        "name": "{{ product.title | escape }}",
        "item": "{{ product.url | absolute_url }}"
      }
    ]
  }
  </script>
{% endif %}

这为产品页面生成面包屑标记。通过用 collection 替换 product 并相应调整面包屑路径来为集合页面调整它。

对于使用 Navi+ AI Menu Builder 等应用的商店，面包屑标记通常作为导航包的一部分自动处理——检查你的应用设置或文档。

面包屑是你能做的最高回报率的结构化数据实现之一。标记简单，验证工具免费，影响（富媒体结果、内部链接、爬行效率）是即时的。如果你的商店还没有面包屑，添加它们。如果它有面包屑但没有结构化数据，添加 JSON-LD。增量工作量很低，SEO 效益随时间复合。

This article is part of the larger guide on Navigation SEO: making sure Google can crawl your menu structure.

导航 SEO：确保谷歌能爬取你的菜单结构