面包屑导航必须用<nav aria-label="Breadcrumb">包裹，路径项用<ol><li>结构，末项加aria-current="page"；Schema.org标记需用https://schema.org/BreadcrumbList，@context不可省略且必须为https，position从1严格递增。
面包屑导航的HTML结构必须用<nav>包裹并包含aria-label
不加语义化容器或可访问性属性，屏幕阅读器会把面包屑当成普通文本读出，用户无法识别这是导航路径。实际开发中常见错误是直接用<div>或<p>包一层<span>，这等于没做。
正确结构要满足三点：
-
<nav>元素必须带aria-label="Breadcrumb"（值可为"Breadcrumb"或"您当前的位置"，但英文 Schema 更认Breadcrumb） - 路径项之间用
<ol>有序列表，每项是<li>，末项不加链接 - 分隔符不能用纯文本
/或>，要用<span aria-hidden="true">包裹，否则会被朗读出来
示例片段：
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/products">商品</a></li>
<li><a href="/products/electronics">数码</a></li>
<li aria-current="page">手机</li>
</ol>
</nav>
Schema.org标记必须用https://schema.org/BreadcrumbList且@context不可省略
Google Structured Data Testing Tool 会直接报错如果漏掉@context，或者用了http而非https。很多开发者复制旧文档代码，里面还是http://schema.org，现在已不被支持。
立即学习“前端免费学习笔记（深入）”；
关键点：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
@context必须是"https://schema.org"（注意是https） -
@type必须是"BreadcrumbList"（大小写敏感，不能写成breadcrumblist或Breadcrumb） -
itemListElement数组里每个对象必须含@type: "ListItem"、position（从1开始）、name和item（URL） - 当前页的
item可以是相对路径，但必须能被解析为绝对URL（比如"./phone"在https://example.com/products/electronics/下会被补全）
内联JSON-LD示例（推荐方式）：
<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/products"
},{
"@type": "ListItem",
"position": 3,
"name": "数码",
"item": "https://example.com/products/electronics"
},{
"@type": "ListItem",
"position": 4,
"name": "手机",
"item": "https://example.com/products/electronics/phone"
}]
}</script>
动态生成时position必须严格递增且从1开始
后端模板或前端React/Vue组件里拼接itemListElement时，最容易出错的是position值重复、跳号，或从0开始。Google Search Console会静默忽略整个BreadcrumbList，不会报错提示。
检查逻辑是否可靠：
- 不要依赖URL层级数推算
position（比如/a/b/c就设为3），因为路径可能有重定向或别名 - 必须由真实渲染的面包屑数组索引决定：第1个元素
position: 1，第2个position: 2…… - 当前页节点也要计入
position，不能只给链接项赋值 - 如果页面无面包屑（如404页），整个
<script type="application/ld+json">块应完全不输出
CSS样式不影响Schema解析，但aria-current="page"影响可访问性体验
视觉上用箭头、斜杠或CSS伪元素做分隔，对搜索引擎完全无影响——它只看HTML结构和JSON-LD。但aria-current="page"这个属性，决定了屏幕阅读器能否准确告知用户“这是当前页”，而不是念成“手机 链接”。
几个易忽略细节：
-
aria-current="page"只能加在最后一项的<li>上，不能加在<a>里（当前页通常无链接） - 如果当前页仍有链接（比如分类页支持筛选参数），仍需保留
<a>，但必须同时加aria-current="page"和aria-disabled="true"，否则会被当作可点击项 - 不要用
display: none隐藏某一级（如首页），而应从HTML结构中移除对应<li>，否则position序号会断层
复杂路径下容易漏掉的是多语言站点：不同语言版本的面包屑，name字段必须用对应语言，但item URL 必须是该语言版本的实际地址（比如/en/products/phones），不能复用中文URL。
