必须用<nav aria-label="Breadcrumb">包裹<ol>，因<div>无导航语义、<ul>表无序集合而路径是线性顺序，仅<ol>能表达层级；aria-label不可省略或误用aria-labelledby；末项须用aria-current="page"且不加href；分隔符需用aria-hidden="true"的span包裹真实斜杠；JSON-LD须与HTML结构严格一致且内联输出。
必须用 <nav aria-label="Breadcrumb"> 包裹 <ol>，否则搜索引擎和读屏器根本识别不出这是面包屑——不是“看起来像”就行，是结构得对。
为什么不能用 <div> 或 <ul> 替代 <nav> + <ol>
语义错位直接导致辅助技术跳过整个区域，SEO 也收不到路径层级信号。<div> 没有导航含义；<ul> 表示无序集合，但路径是严格线性的（首页 → 分类 → 文章），只有 <ol> 能表达这种先后顺序。搜索引擎靠这个判断页面在站点树中的深度，错用等于主动放弃结构化索引。
-
aria-label="Breadcrumb"不能省略，也不能写成aria-labelledby—— 后者需要额外 ID 引用，易出错且无必要 - 别用
<p>套链接：会被读作普通段落，当前页状态无法传达 - 禁用
<span>+ CSS 拼接：纯视觉实现，对爬虫和读屏器完全不可见
aria-current="page" 必须加在末项，不能只靠 CSS 隐藏链接
屏幕阅读器依赖这个属性判断“这是当前页”，仅移除 href 或加 disabled 属性无效——disabled 不适用于 <a>，而没 href 的 <a> 仍可能被聚焦或误触发。不设 aria-current="page"，读屏器会把当前页当作可跳转链接朗读，用户反复点击却无反应。
- 末项用
<li aria-current="page">HTML路径导引实现</li>，不加href - 不要写
<a href="#">或<a href="javascript:void(0)">—— 这类链接会触发页面跳转或报错 - 若用 Vue/React 动态渲染，确保
aria-current在组件 mount 后真实存在，而非仅靠 class 控制显示
分隔符必须用真实 / 字符，别用 ::before 伪元素
很多教程教用 a::before { content: "/"; }，但屏幕阅读器会把它读出来，变成“首页 / 博客 / HTML路径导引实现”，严重干扰信息流。真实斜杠是文本内容的一部分，可被正确跳过或合并朗读。
立即学习“前端免费学习笔记（深入）”；
- 在
<li>之间插入<span aria-hidden="true">/</span>，既保持语义又避免被读 - 如果要用图标（如
>），同样需aria-hidden="true"，并设font-family: system-ui, sans-serif防字体加载失败后显示乱码 - 移动端注意
white-space: nowrap+overflow-x: auto，否则长路径折行会打乱层级视觉顺序
JSON-LD 结构化数据要和 HTML 结构严格一致
搜索引擎通过 JSON-LD 理解面包屑路径，但如果它和页面上实际渲染的 <ol> 内容不匹配（比如层级数不同、文字不一致、URL 错位），Google 可能直接忽略该标记，甚至视为误导性内容。
- JSON-LD 中的
@id必须是页面真实 URL，不能是相对路径或占位符 - 每个
itemListElement的position从 1 开始递增，且必须与<ol>中<li>的 DOM 顺序完全对应 - 动态生成时，确保 JSON-LD 在 HTML 中内联输出（
<script type="application/ld+json">），不要异步加载——爬虫不执行 JS
最常被忽略的是：HTML 结构、aria-current、JSON-LD 三者必须同步更新。改了一个，另外两个没动，就等于白做——搜索引擎和读屏器不会帮你脑补一致性。
