面包屑HTML结构必须用<nav aria-label="Breadcrumb">包裹<ol>，且aria-current="page"须置于当前页<li>内；SEO路径映射应手写或构建时注入，JSON-LD需与HTML顺序及文本严格一致，href须为绝对路径且真实可访问。
面包屑 HTML 结构必须用 <nav aria-label="Breadcrumb"> 包裹 <ol>
搜索引擎和读屏器只认这个组合，换掉任何一个都等于没写。用 <div> 或 <ul> 看起来一样，但 Google 不会把它当路径结构抓取，JAWS 也读不出“第2项：产品 → 第3项：详情页”。
常见错误包括：
-
<nav>漏掉aria-label="Breadcrumb"—— 屏幕阅读器只会说“导航”，不知道这是路径 - 用
<ul>替代<ol>—— 语义上表示“项目无顺序”，而路径是严格线性的 - 把
aria-current="page"加在<nav>或<ol>上 —— 必须落在当前页对应的<li>标签内
SEO 路径映射不能靠 window.location.pathname 自动推导
纯静态 HTML 页面（如 index.html）没有服务端逻辑，前端 JS 解析 URL 极易出错：多级子目录、i18n 前缀（如 /zh/blog/）、重写规则、大小写差异都会让 split('/') 返回错乱层级。
真正可靠的做法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 手写结构（页面少时最稳，比如整个站就 5 个页面）
- 构建时注入结构化数据（如 Hugo 的
.Parent、Jekyll 的page.url，或 Webpack/Vite 构建阶段生成BREADCRUMB变量）
如果硬要用 JS 解析，至少做到：
- 先用
new URL(window.location.href)替代直接读pathname，避免 base href 影响 - 显式维护路径到标题的映射表，例如
{ "/blog/guide/breadcrumb": ["首页", "文档", "HTML 面包屑"] } - 过滤空段、标准化结尾斜杠、处理
.html后缀（别让/product.html显示成 “product.html”）
JSON-LD 结构化数据必须匹配 HTML 中的 <ol> 实际顺序
Google 的 BreadcrumbList 不会自动从 HTML 提取路径，你得手动写 JSON-LD，并确保每项 @id 和 name 与 <ol> 里链接的 href 和文本完全一致，否则会被判为不一致结构化数据，失去 SEO 加成。
关键点：
-
itemListElement数组顺序必须和<ol>的<li>顺序严格对应 - 每项的
@id必须是绝对 URL（如"https://example.com/blog/"），不能是相对路径或# - 当前页项的
item字段不能省略，且name要和<li aria-current="page">内文本一字不差
示例中错配常见于：HTML 里写 “博客”，JSON-LD 写 “Blog”，或漏掉首页的 / 导致协议+域名缺失。
href 必须全部用绝对路径，且指向真实可访问页面
相对路径（如 ./products.html）在子目录下极易错位；# 或空 href 会让键盘用户 Tab 到这儿卡住，也破坏历史栈。
检查清单：
- 所有中间节点的
href值以/开头（如/products/），不是products/或../products/ - 每个
href对应的 HTML 文件必须真实存在，否则 Google 抓取时会记为 404 - 当前页项不写
href，也不设为href="#"—— 它就是纯文本，aria-current="page"已足够传达状态
最容易被忽略的是路径大小写和后缀一致性：服务器默认区分大小写，/Blog/ 和 /blog/ 是两个路径；/product 和 /product.html 在未开启自动后缀补全时也互不等价。
