面包屑结构化数据与 HTML 生成器

根据页面名称和 URL 列表，创建 BreadcrumbList 结构化数据和无障碍的面包屑 HTML（nav、ol、aria-current），可直接复制 JSON-LD。

面包屑条目（从首页到当前页面）

<nav> 元素的 aria-label

JSON-LD (BreadcrumbList)

<script type="application/ld+json">
{
  "@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": "Cold Brew Guide",
      "item": "https://example.com/blog/cold-brew"
    }
  ]
}
</script>

HTML

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com/">Home</a></li>
    <li><a href="https://example.com/blog/">Blog</a></li>
    <li aria-current="page">Cold Brew Guide</li>
  </ol>
</nav>

JSON-LD 遵循 schema.org BreadcrumbList；最后一项是当前页面，可以省略 URL。HTML 使用 <nav> 内的有序列表，并为当前页设置 aria-current="page" 以提升无障碍性；分隔符请用 CSS 设置样式。

什么是面包屑生成器？

这个生成器把面包屑项目列表（名称 + URL，从首页一直到当前页面）转换为两种输出：供搜索引擎使用的 schema.org BreadcrumbList JSON-LD，以及供访客使用的无障碍 HTML 标记。

如何使用面包屑生成器

编辑各项：每一级一行，填写名称和绝对 URL。
添加或删除行；最后一行是当前页面，可以不填 URL。
用你网站的语言设置导航元素的 aria-label。
把 JSON-LD 块和 HTML 复制到你的页面中。

示例

输入

Home → Blog → Cold Brew Guide

输出

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com/">Home</a></li>
    <li><a href="https://example.com/blog/">Blog</a></li>
    <li aria-current="page">Cold Brew Guide</li>
  </ol>
</nav>

何时使用面包屑生成器

适合显示面包屑导航的页面，尤其是商店或文档这类层级较深的网站结构。结构化数据应与页面上可见的面包屑一致。分隔符请用 CSS 设置样式，而不要往标记里添加字符。

面包屑生成器的工作原理

每个非空行都会变成一个 ListItem，包含从 1 开始的 position、name 和 item URL（为空时省略）。HTML 是包含有序列表的 <nav aria-label>；前面的项目是链接，最后一项带有 aria-current="page"，遵循 WAI-ARIA 面包屑模式。名称和 URL 会经过 HTML 转义；相对 URL 会触发警告，因为结构化数据应使用绝对 URL。