SEO 面包屑导航：Schema Markup 实施指南

发布: 3天前 (2025年12月22日 GMT+8 17:29)

13 min read

Source: Dev.to

理解面包屑导航和 SEO

面包屑导航是一种次级导航系统，向用户展示他们在网站层级结构中的当前位置。它的名称来源于童话《汉塞尔与格莱特》，面包屑在页面之间留下路径，帮助用户了解自己所在的位置以及如何返回上级页面。

从 SEO 的角度来看，面包屑提供了关键的好处：

结构感知 – 搜索引擎使用面包屑标记来理解站点的层级结构，从而影响页面的分类和排名。
丰富结果 – 当使用 schema 标记正确实现时，面包屑可以直接出现在 Google 搜索结果中，取代或补充页面标题下方的 URL 显示。

为什么面包屑 schema 标记对 SEO 如此重要？使用 BreadcrumbList schema 的结构化数据向搜索引擎明确说明内容的组织方式。Google 会利用这些信息在搜索结果中展示丰富的面包屑路径，提升用户在点击进入站点前的体验。这种增强的展示方式可以显著提升点击率，因为用户能够立即看到内容的上下文和相关性。

想了解在 Hugo 中的结构化数据标记中实现各种类型（包括 BreadcrumbList 以及其他 schema 类型）的完整指南，请查阅我们的详细实现指南。

Source: …

实现 BreadcrumbList JSON‑LD 架构

SEO 优化面包屑的技术基础在于使用 JSON‑LD（用于链接数据的 JavaScript 对象表示法）格式正确实现 BreadcrumbList 架构。JSON‑LD 是 Google 推荐的结构化数据格式，因为它易于实现和维护。

我该如何在网站上实现 BreadcrumbList JSON‑LD？
在页面的 <head> 部分或紧靠闭合的 </body> 标签前添加一个 type="application/ld+json" 的 <script> 标签。下面是完整的实现示例：

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://example.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO Guides",
      "item": "https://example.com/blog/seo-guides"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Breadcrumb Implementation",
      "item": "https://example.com/blog/seo-guides/breadcrumbs"
    }
  ]
}

关键组件

@context – 始终设置为 https://schema.org。
@type – 将对象定义为 BreadcrumbList。
itemListElement – ListItem 对象的数组，每个对象包含三个必需属性：
- position – 从 1 开始的数字顺序。
- name – 可见标签。
- item – 绝对 URL（包括协议）。

关键实现细节

使用 绝对 URL（包括 https://）。
确保 position 编号连续，从 1 开始。
页面上可见的面包屑导航必须 完全匹配 架构标记——任何不一致都可能导致搜索引擎困惑，甚至受到惩罚。

2025 年面包屑最佳实践

遵循当前最佳实践可确保您的面包屑在提供最大 SEO 价值的同时，带来出色的用户体验。

深度

最佳深度： 3–5 级。
浅层层级（1–2 级）提供的上下文不足；深层层级（6 级以上）可能让用户和搜索引擎感到不堪重负。

标签描述性

使用 包含关键词的、描述性的标签（例如“女款跑步鞋”，而不是“分类 2”）。
搜索引擎会解析这些标签以了解内容结构，用户也依赖它们进行导航决策。

当前页面的可点击性

不要将最后一个面包屑（当前页面）设为可点击链接。
使用不同的样式（不同颜色或字体粗细），并添加 aria-current="page" 以提升屏幕阅读器的可访问性。

移动端兼容性

将面包屑设计为 响应式且触控友好。
使用紧凑的分隔符（例如 / 或 >），在小屏幕上截断过长的标签，并确保触控目标至少为 44 × 44 px。

可见面包屑与结构化数据标记的一致性

向用户展示的面包屑路径 必须与 JSON‑LD 结构完全一致。
不一致可能被视为操纵，导致富搜索结果被从搜索列表中移除。

在 Hugo 静态站点中实现面包屑导航

Hugo 提供了内置功能，使面包屑的实现变得直截了当。以下是一份逐步指南。

1. 创建面包屑局部模板

在 layouts/partials/breadcrumbs.html 中加入以下标记：

<ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li class="breadcrumb-item" itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a href="{{ .Site.BaseURL }}" itemprop="item">
      <span itemprop="name">Home</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>

  {{ $position := 2 }}
  {{ range .Ancestors.Reverse }}
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
      <a href="{{ .Permalink }}" itemprop="item">
        <span itemprop="name">{{ .Title }}</span>
      </a>
      <meta itemprop="position" content="{{ $position }}" />
    </li>
    {{ $position = add $position 1 }}
  {{ end }}

  <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <span itemprop="name">{{ .Title }}</span>
    <meta itemprop="position" content="{{ $position }}" />
  </li>
</ul>

该模板使用 Hugo 的 .Ancestors 函数遍历页面层级。Reverse 方法确保面包屑从站点根目录到当前页面的顺序。Microdata 属性直接嵌入 HTML，部分开发者相较于 JSON‑LD 更倾向这种写法。

2. 在基础模板中引用局部模板

在想要显示面包屑的地方加入局部模板，例如在 layouts/_default/baseof.html 中：

{{ partial "breadcrumbs.html" . }}

3. （可选）添加 JSON‑LD 面包屑结构

创建 layouts/partials/breadcrumb-schema.html：

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ .Site.BaseURL }}"
    }{{ $position := 2 }}
    {{ range .Ancestors.Reverse }},{
      "@type": "ListItem",
      "position": {{ $position }},
      "name": "{{ .Title }}",
      "item": "{{ .Permalink }}"
    }{{ $position = add $position 1 }}{{ end }},{
      "@type": "ListItem",
      "position": {{ $position }},
      "name": "{{ .Title }}",
      "item": "{{ .Permalink }}"
    }
  ]
}

在视觉面包屑旁边一起引用该结构：

{{ partial "breadcrumbs.html" . }}
{{ partial "breadcrumb-schema.html" . }}

4. 为面包屑添加样式

将以下 CSS 添加到样式表（例如 assets/css/main.css）：

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 0.5rem;
  color: #6c757d;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

/* 响应式微调 */
@media (max-width: 768px) {
  .breadcrumb {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 0.25rem;
  }
}

5. 验证与测试

为什么要验证？

正确的验证可以确保搜索引擎识别你的面包屑标记，并在搜索结果中正确展示。

工具

工具	使用方法
Google Rich Results Test	粘贴页面 URL 或 HTML，检查是否有错误或警告。
Google Search Console – Enhanc	在 “增强功能” 部分查看面包屑报告，确认已被成功检测并无问题。

（后续内容请参见本节的第 2 部分。）

Source: …

要点	说明
检查	爬取完成后，检查 “Breadcrumb” 报告，查看标记是否有效、是否有错误以及对搜索外观的影响。

常见错误

缺少必需属性（position、name、item）。
position 值非顺序（必须从 1 开始并递增 1）。
使用相对 URL 而非绝对 URL。
可见面包屑与 schema 标记不匹配。

最佳实践测试工作流

在任何模板更改后运行 Rich Results Test。
部署到预发布环境，并在实际 URL 上重新运行测试。
生产部署后，监控 Search Console 的 “Breadcrumb” 报告。
每当修改站点结构、添加新章节，或发现面包屑在搜索结果中消失时，重新验证。

6. 常见实现模式

站点类型	典型面包屑结构
E‑commerce	首页 > 分类 > 子分类 > 产品
Blog / Content	首页 > 博客 > 分类 > 文章标题
Documentation	首页 > 文档 > 章节 > 子章节 > 页面

选择最能体现站点信息架构的模式；上述 Hugo 部分模板适用于任何层级结构。

进一步阅读

Submitting Forms in Hugo – 了解如何在静态 Hugo 站点中添加动态表单。

高级考虑

动态面包屑 由 JavaScript 生成，需要特别注意。搜索引擎已改进了 JavaScript 渲染能力，但服务器端渲染或静态生成仍然是更可靠的 SEO 方案。如果必须使用客户端生成，请确保 JSON‑LD 架构仍在服务器端或构建时渲染。
单页上的多个面包屑路径 在技术上是可行的，但通常不建议。如果有合理的使用场景（例如同时显示基于分类和基于日期的导航），可以实现多个 BreadcrumbList 架构，但需注意这可能会让用户感到困惑。
国际化 增加了复杂性。对于多语言站点，确保面包屑标签已正确翻译，且 URL 指向相应语言版本。架构标记应反映当前语言的导航结构。

衡量影响

跟踪点击率 在 Google Search Console 中在实施前后进行——正确实现的面包屑导航可以将 CTR 提高 20‑30 %。
监控跳出率和网站停留时间；改进的导航通常会降低跳出率并提升参与度。
定期检查 Google Search Console 的增强报告，关注面包屑相关问题。目标是在符合条件的页面上实现 100 % 覆盖。
使用 Google Analytics（或注重隐私的替代方案） 来跟踪面包屑的使用情况。对面包屑点击实现事件跟踪，以了解用户如何在站点层级中导航。

有关分析工具的比较，请参阅我们的文章 Matomo, Plausible, Google and other web analytics systems。

实现带有正确 schema 标记的面包屑导航是一项高影响、低成本的 SEO 改进。遵循本指南中概述的模式和最佳实践，您可以提升搜索引擎的理解和用户体验，从而获得更好的排名和更高的参与度。虽然 Google 主导了搜索引擎市场并决定了大部分 SEO 最佳实践，但考虑 alternative search engines 也是值得的，因为它们可能以不同方式索引和展示您的结构化数据——多元化的 SEO 策略有助于您触及更广泛的受众。