面包屑需用服务端注入的json-ld结构化数据才能触发rich snippets，必须为@type:"breadcrumblist"，每个itemlistelement含@type:"listitem"、position、item（含@id和name），且html与json-ld内容严格一致。
只写
Google 不解析 DOM 层级推断语义，<nav><ol></ol></nav> 再标准的 HTML 结构，只要没带明确的结构化数据，对 Rich Snippets 就完全无效。它对可访问性和样式有用，但对爬虫来说只是普通列表。
常见错误包括：用 aria-label="Breadcrumb" 代替语义标记、把 <li> 里文字当 name 直接复用、漏掉当前页的 item 对象（哪怕没链接）。
-
@type必须是"BreadcrumbList"，不是"Breadcrumb"或自定义类型 - 每个
itemListElement必须含@type: "ListItem"、position（从 1 开始连续）、item -
item至少要有@id（绝对 URL）和name；只写字符串如"首页"会校验失败
JSON-LD必须服务端注入，不能靠JS动态生成
Googlebot 几乎不执行客户端 JS，你在 useEffect 或 mounted 里拼的 <script type="application/ld+json"></script>，源码里就是空的——爬虫抓不到，等于没写。
真正有效的只有两种方式：
- 服务端直出：Koa/Next.js SSR/Nuxt 在响应头发出前就把 JSON-LD 写进
- 构建时固化：Next.js SSG、Hugo 等静态生成时，根据路由路径预计算并注入
用 location.pathname 在浏览器里解析再拼 JSON-LD？SEO 视为不存在。
动态面包屑最容易翻车的三个点
电商、文档站这类多级路径场景下，硬编码不现实，但动态生成极易失效：
- 直接把 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 里第 2 项却是“首页 > 电子产品”，
name字符串不完全一致（空格、标点、大小写全敏感），整个标记就挂掉
验证必须用Rich Results Test，别信“语法没错就行”
即使 JSON-LD 格式合法、字段齐全，也可能因内容不可见、嵌套错位或时间格式不对被 Google 拒绝。Rich Results Test 是唯一模拟 Googlebot 实际处理逻辑的工具。
它不只是语法检查器，而是四步闭环：
- 抓取页面，提取所有结构化数据块（支持 JSON-LD/Microdata/RDFa）
- 按
@type匹配对应规则集（如FAQPage要求每个问题有acceptedAnswer） - 校验数据类型（ISO 8601 时间）、文本长度、必填字段、层级合法性
- 生成移动端预览图，并精确定位到出错的 JSON 路径或 HTML 行号
没过这个测试，就别指望搜索结果出现任何富增强——哪怕你标记写了十年。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
