面包屑结构化数据必须使用breadcrumblist类型，json-ld中需严格满足@type: "breadcrumblist"、itemlistelement数组、每个listitem含@type: "listitem"、position从1连续递增、item为含@id（绝对url）或name的对象；script须置于head或body顶部、type为"application/ld+json"、json正确转义；动态页面需服务端注入，多语言站点@id须与hreflang一致。
面包屑结构化数据必须用 BreadcrumbList，不是 Breadcrumb
Google 和其他主流搜索引擎只认 BreadcrumbList 类型的 Schema，写成 http://schema.org/Breadcrumb 或随便起个类型名（比如 MyBreadcrumbs）都没用，页面不会被识别为面包屑，也不会在搜索结果中显示层级路径。
常见错误是抄错文档旧链接、或把微数据（Microdata）写法套到 JSON-LD 上。JSON-LD 中必须用 @type: "BreadcrumbList"，且 itemListElement 是必填数组，每个元素必须含 @type: "ListItem"、position 和 item。
-
position必须从 1 开始连续递增（不能是 0 或跳号） -
item必须是对象，至少含@id（推荐用绝对 URL）或name；仅写字符串会校验失败 - 如果首页用
/，确保@id是完整 URL（如"https://example.com/"），否则 Google Rich Results Test 会报 “missing field @id”
JSON-LD 写法比 Microdata 更稳，但要注意 script 标签位置和转义
Microdata 容易因 HTML 结构变动（比如面包屑被 JS 动态插入、或包裹 div 被删）而断掉；JSON-LD 放在 或 顶部更可靠，只要 script 标签没被移除，数据就始终存在。
实操时容易漏掉两点：一是 script 类型必须写 type="application/ld+json"（写成 text/json 或漏掉不生效）；二是 JSON 内部的双引号、反斜杠必须正确转义——尤其当 name 含单引号或 HTML 实体时，直接插变量可能崩 JSON 结构。
- 用服务端模板渲染时，务必调用
json_encode()（PHP）、JSON.stringify()（JS 后端）、或对应语言的安全序列化函数 - 避免手写 JSON 字符串拼接，比如
'"name": "' + title + '"'—— 标题含"就会提前闭合 - 测试前先粘贴到 Google Rich Results Test，看是否解析出
BreadcrumbList及各ListItem
动态页面（React/Vue）里加 Schema，别等 DOM 渲染完再塞 script
SEO 抓取的是首屏 HTML（SSR 或静态生成的内容），不是浏览器执行 JS 后的最终 DOM。如果在 useEffect 或 mounted 里动态创建并 append script 标签，爬虫根本看不到这个结构化数据。
正确做法取决于你的渲染模式：
- 用 Next.js / Nuxt 等框架：在页面组件内用
next/head或useHead注入 JSON-LD script，确保它随 HTML 一起下发 - 纯 CSR（客户端渲染）站点：只能靠 SSR 代理或预渲染（prerendering），否则无法被索引为面包屑
- 如果必须前端注入，请用
document.head.insertBefore(script, document.head.firstChild)并确保在DOMContentLoaded前执行——但这仍不可靠，不推荐
多语言或区域站点要加 hreflang 对应，否则面包屑可能错乱
如果你的面包屑链接指向不同语言版本（比如中文页的「首页 > 产品 > API」对应英文页的 /en/products/api），但 JSON-LD 里的 @id 写的是中文站域名，Google 可能判定为误导性导航，降低富媒体结果展示概率。
解决方式不是改 @id，而是确保每个面包屑项的 @id 和当前页面的 hreflang 属性一致，并在 中声明对应关系：
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/en/",
"name": "Home"
}
}]
}
注意：这里 @id 必须是英文版首页 URL，和当前页面的 <link rel="alternate" hreflang="en" href="https://example.com/en/..."> 匹配。混用中英文路径是实际项目中最常被忽略的兼容点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
