itemtype必须为绝对url（如https://schema.org/book），相对路径、缺协议或纯字符串均无效；spa中js动态插入的microdata不被搜索引擎抓取，需ssr/ssg确保其存在于首屏html源码中。
itemtype 必须写成绝对 URL，不能用相对路径或本地协议
在 SPA 中动态渲染内容时，itemtype 值如果写成 "Book"、"./schema.org/Book" 或 "http://schema.org/Book"（缺 s），搜索引擎和结构化数据测试工具会直接忽略该 Microdata 节点。
原因在于 Microdata 规范强制要求 itemtype 是一个有效的、可解析的绝对 URL，且必须指向公开可访问的词汇表文档（如 Schema.org）。
- ✅ 正确：
itemtype="https://schema.org/Book" - ❌ 错误：
itemtype="schema.org/Book"（缺协议） - ❌ 错误：
itemtype="/schema/Book"（相对路径） - ❌ 错误：
itemtype="Book"（纯字符串，无上下文）
SPA 路由切换后，itemtype 不会自动重载或校验
单页应用靠 JavaScript 动态插入 DOM，但 Google Search Console 的结构化数据测试工具、Rich Results Test 等只在初始 HTML 加载时抓取一次 Microdata —— 它们**不执行 JS 渲染后的 DOM 变更**。这意味着：
- 如果你在
router.push("/book/123")后用 JS 插入带itemtype的<div itemscope itemtype="https://schema.org/Book">，该标记大概率不会被索引 <li>服务端渲染（SSR）或静态生成（SSG）才能保证 <code>itemtype出现在首屏 HTML 源码中 - 客户端 hydrate 后的 DOM 变动，对 SEO 无效
与 React/Vue 等框架共存时，itemtype 容易被 JSX/模板语法意外破坏
比如在 React 中写：
<div itemscope itemtype='{"https://schema.org/Book"}'>
<h1 itemprop="name">{title}</h1>
</div>
看起来没问题，但实际编译后可能变成：
<div itemscope itemtype="https://schema.org/Book" data-reactroot=""> <p>多数情况下不影响，但某些 SSR 框架（如 Next.js App Router）若未正确 escape 属性值，或使用了自定义渲染器，<code>itemtype</code> 可能被转义为 <code>"https://..."</code>，导致解析失败。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>建议做法：</p> <ul> <li>避免在 JSX 中拼接 <code>itemtype</code> 字符串，直接写死（<code>itemtype="https://schema.org/Book"</code>）</li> <li>Vue 模板中禁用 <code>v-html</code> 注入含 Microdata 的字符串，防止双引号/尖括号被破坏</li> <li>用 Lighthouse 或 Rich Results Test 工具验证最终输出的 HTML 源码，而非浏览器开发者工具里的“Elements”面板（后者显示的是 JS 修改后的 DOM）</li> </ul> <h3>itemtype 和 itemscope 必须成对出现，且 scope 不能跨组件断裂</h3> <p>Microdata 是基于作用域（scope）的嵌套模型。在 SPA 中常见错误是：把 <code>itemscope</code> 放在一个组件里，<code>itemprop</code> 放在子组件里，但父子组件之间存在条件渲染、异步加载或 Portal 挂载（如弹窗、Tooltip），导致 DOM 树上 <code>itemprop</code> 节点脱离了 <code>itemscope</code> 的父容器。</p> <p>例如：</p> <pre class="brush:php;toolbar:false;"><div itemscope itemtype="https://schema.org/Event"> <span itemprop="name">前端大会</span> <modal><span itemprop="description">...</span></modal> </div>
如果 <modal></modal> 用 createPortal 挂载到 下，itemprop="description" 就不再属于那个 itemscope 范围 —— 结构化数据解析器会丢弃它。
解决方式只有两个：
- 确保所有
itemprop都在同一个物理 DOM 子树内，不跨 Portal、不延迟挂载 - 对必须分离的内容（如弹窗详情），单独声明完整
itemscope+itemtype，不要依赖父级 scope
真正麻烦的不是写对 itemtype，而是让它的语义作用域在 SPA 的动态 DOM 生命周期里始终稳定 —— 这需要你既懂 Microdata 规范，又清楚自己框架的渲染边界。
