只写无法触发富片段，因google不解析dom推断层级，必须用服务端注入的json-ld breadcrumblist标记，且@type须为"breadcrumblist"、position从1连续递增、@id为绝对url、name与html文本完全一致、当前页item不可省略。
为什么只写 <nav><ol></ol></nav> 不会让搜索结果出现富片段
搜索引擎（尤其是 Google）不从 DOM 结构里“猜”面包屑层级。你写了 <nav aria-label="Breadcrumb"><ol>
<li>首页</li>
<li>分类</li>
</ol></nav>，对屏幕阅读器和 CSS 样式有效，但对爬虫来说只是普通导航区块。它没有明确语义信号告诉 Google：“这是面包屑，且第 1 项是首页，第 2 项是当前页的父级”。没有这个信号，就不会生成富片段。
BreadcrumbList 的 JSON-LD 必须满足哪些硬性条件
Google 只认严格符合 Schema.org 规范的 BreadcrumbList，漏掉任意一条，整个标记就失效：
-
@type必须是"BreadcrumbList"（不是"Breadcrumb"，也不是"ItemList"） -
position必须从1开始连续递增（1, 2, 3），不能是0起始或跳号（如1, 2, 4） -
@id必须是绝对 URL（含https://和完整域名），写/products/或#top会被直接忽略 -
name必须与 HTML 中对应链接或文本**完全一致**（空格、标点、大小写全敏感） - 当前页的
item字段不能省——哪怕没链接，也要有@id和name，否则末尾语义断裂
服务端渲染 vs 客户端 JS 注入 JSON-LD，哪个能被爬虫看到
绝大多数搜索引擎爬虫（包括 Googlebot）不会执行客户端 JavaScript 渲染逻辑。如果你用 React/Vue 的 useEffect 或 mounted 动态插入 JSON-LD，首屏 HTML 源码里就是空的，爬虫抓到的就是无效标记。
真正可靠的做法只有两种：
- 服务端直出：Node.js/Koa/Nuxt 等在响应头发出前就把 JSON-LD 写进
- 构建时固化：静态站点（如 Next.js SSG、Hugo）在生成 HTML 时，根据路由路径预计算并注入
用 location.pathname 在浏览器里解析再拼 JSON-LD？那对 SEO 来说等于没写。
动态生成面包屑时最容易踩的三个坑
电商、文档站这类多级路径场景下，硬编码 JSON-LD 不现实，但动态生成极易翻车：
- 把 URL 路径段（如
electronics/headphones/wh-1000xm5）直接当name用——wh-1000xm5不是用户语言，必须查表映射为“WH-1000XM5 降噪耳机” - 过滤查询参数（如
?color=red&size=m）后，没同步校验<link rel="canonical">——带参数的 URL 若未设 canonical，可能被当成重复页面，连带面包屑标记失效 - HTML 面包屑和服务端 JSON-LD 不同步：比如 HTML 显示“首页 > 数码 > 耳机”，而 JSON-LD 里写成“首页 > 电子产品 > 无线耳机”——搜索引擎会判定你前后矛盾，降低可信度
真正起作用的不是“写了结构化数据”，而是 URL 路径、HTML 面包屑、JSON-LD 三者构成的闭环是否稳定且可验证。其中任意一环在不同设备、不同渲染时机、不同抓取环境下表现不一致，增益就会打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
