html面包屑是位置导航而非路径导航，仅表示当前页面层级；必须用包裹，末项加aria-current="page"，分隔符用css生成，层级用，json-ld需严格同步且@id为绝对url。
有区别，而且本质不同——HTML 面包屑不是路径导航，它不记录用户怎么来的，只说明“你现在在哪一层”。想靠 <nav aria-label="Breadcrumb"></nav> 自动还原点击历史？做不到。
面包屑是位置导航，不是访问路径
用户从搜索结果直接点进 /blog/2026/april/seo-tips，面包屑该显示「首页 > 博客 > 2026年 > 四月 > SEO优化技巧」，而不是「首页 > 搜索页 > 分类页 > 当前页」。后者才是路径导航，但 HTML 面包屑不负责这个。
常见错误现象：
- 用 JS 监听
history.pushState动态拼接面包屑，结果刷新页面后层级全乱 - 把 URL 路径段（如
april）直接当栏目名，但实际后台没这个独立页面，点进去 404 - 在单页应用里混用路由参数和面包屑层级，比如
/user/:id/profile渲染出「首页 > 用户 > 123 > 个人资料」，但「123」根本不是可跳转的语义层级
面包屑必须用 <nav></nav> 包裹，否则不算导航
只写 <ol>
<li>首页</li>
<li>博客</li>
</ol>，对屏幕阅读器和搜索引擎来说就是普通列表。必须加 <nav aria-label="Breadcrumb"></nav> 才能被识别为辅助导航区域。
实操要点：
- 末项必须用
aria-current="page"标记，不能加<a></a>链接 - 分隔符（如 “>”）必须用 CSS
::before或::after生成，不能写死在 HTML 里 - 层级必须用
<ol></ol>，不是<ul></ul>—— 因为顺序有意义，position 值要对应 JSON-LD 的position字段 - 每级
<li>内必须是可跳转链接，且href必须指向真实存在的、语义正确的上层页面
动态生成面包屑时，别直接解析 URL 路径
URL 是地址字符串，不是网站结构。比如 /api/v2/users/123 是接口地址，但你不能把它拆成「首页 > API > V2 > Users > 123」放进面包屑——这既无页面，也无导航意义。
正确做法是绑定到路由配置或服务端数据：
- React Router：用
useRoutes配置里的handle.breadcrumb字段注入层级信息 - Vue Router：在
meta.breadcrumb中声明每条路由对应的面包屑项，含text和to - 服务端渲染（如 Next.js / Nuxt）：优先在
getServerSideProps或asyncData中解析当前路径对应的逻辑层级，查数据库或 CMS 获取真实父级标题和链接 - 避免硬编码正则匹配，例如
/blog/(\d{4})/(\w+)/→ 「博客 > $1 > $2」，这种写法在 URL 改版后立刻失效
JSON-LD 的 BreadcrumbList 必须同步更新
Google 搜索结果里展示的面包屑，完全依赖 JSON-LD 结构化数据，不是 HTML 本身。如果 HTML 面包屑写了「首页 > 产品 > 笔记本电脑」，但 JSON-LD 里 itemListElement[2].name 是「笔记本」，SEO 就会错位。
关键约束：
-
@id字段必须是绝对 URL（如https://example.com/products/），不能是相对路径 -
position从 1 开始计数，且必须严格连续，不能跳号 - 每一项的
name必须和 HTML 中对应<li>的文本完全一致（包括空格、标点） - 如果某级没有真实页面（如纯过滤页
/products?brand=apple），就不该出现在 JSON-LD 里
最容易被忽略的一点：移动端四层以上面包屑必须截断或折叠，但截断逻辑不能只看字符数——得按 <li> 元素个数来，否则 JSON-LD 和可视层就对不上了。一旦不对齐，Google 可能直接忽略整段结构化数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
