如何通过HTML itemtype属性实现嵌套数据标记-html教程-PHP中文网

itemtype 本身不支持嵌套，必须配合 itemscope 和 itemprop 使用；子结构需同时具备 itemscope、itemtype，并作为父级合法 itemprop 的值出现，且 URI 必须严格匹配 schema.org 规范。

如何通过html itemtype属性实现嵌套数据标记

itemtype 属性本身不支持嵌套，必须靠 itemprop + itemscope 配合

直接给某个元素加 itemtype 并不能让它“包含”另一个结构化数据块——itemtype 只是声明当前元素代表什么类型（比如 https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/Person），真正开启嵌套的是 itemscope，而子数据的字段绑定靠 itemprop 指向父级的属性名。

常见错误是这样写：

<div itemscope itemtype="https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/Person">
  <span itemprop="name">张三</span>
  <div itemtype="https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/Address">← 错！没加 itemscope，这行无效</div>
</div>

正确做法是：

子结构容器必须同时带 itemscope 和 itemtype
子容器需作为某个 itemprop 的值出现（即被父级的属性“引用”）
父级的 itemprop 名必须与 schema 定义一致（例如 address 是 Person 的合法属性）

嵌套时 itemprop 必须对应 schema 的属性层级关系

Google Structured Data Testing Tool 或 Rich Results Test 会严格校验属性路径。比如 Person 有 address 属性，其值类型是 PostalAddress，那你就不能把 itemprop="address" 指向一个 itemtype="https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/Organization" 的块。

典型有效嵌套示例：

<div itemscope itemtype="https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/Person">
  <span itemprop="name">张三</span>
  <div itemprop="address" itemscope itemtype="https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/PostalAddress">
    <span itemprop="streetAddress">花园路1号</span>
    <span itemprop="addressLocality">北京</span>
  </div>
</div>

关键点：

address 是 Person 的预期属性，且类型为 PostalAddress
子 div 同时满足：itemscope + itemtype + 被 itemprop="address" 包裹
子内部的 streetAddress、addressLocality 是 PostalAddress 的合法字段

多个同名 itemprop（如多个 sameAs）要分开包裹，不能合并写

遇到需要重复的属性（比如一个人有多个社交主页链接），不能这么干：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

<div itemscope itemtype="https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/Person">
  <span itemprop="sameAs">https://github.com/zhangsan</span>
  <span itemprop="sameAs">https://twitter.com/zhangsan</span>
</div>

这会被解析为单个 sameAs 字段含两个字符串值（部分工具接受，但语义模糊）。更稳妥、兼容性更好的写法是每个值独立成 scope：

<div itemscope itemtype="https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/Person">
  <div itemprop="sameAs" itemscope itemtype="https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/URL">
    <link itemprop="url" href="https://github.com/zhangsan">
</div>
  <div itemprop="sameAs" itemscope itemtype="https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/URL">
    <link itemprop="url" href="https://twitter.com/zhangsan">
</div>
</div>

注意：

sameAs 接收 URL 类型，所以子块用 itemtype="https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/URL"
用而非更干净，避免渲染干扰
每个 sameAs 单独一个 itemscope 块，确保结构清晰

浏览器不解析 itemtype，但搜索引擎和工具链对大小写、协议、末尾斜杠敏感

itemtype 的值是纯字符串 URI，浏览器完全忽略它，但 Google、Bing 等解析器会严格比对。这些细微差异会导致嵌套失效：

https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/Person ✅ vs http://schema.org/Person ❌（必须 https）
https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/Person ✅ vs https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/Person/ ❌（末尾斜杠非法）
https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/PostalAddress ✅ vs https://www.php.cn/link/9e18f95f1c259dbcc2388008c47d5d25/postaladdress ❌（大小写敏感）

建议：所有 itemtype 值直接从 schema.org 页面复制完整 URL，不要手敲或简写。嵌套越深，这类 URI 错误越难定位。

最常被忽略的是：子 itemscope 块漏掉 itemprop 绑定，导致它变成“游离 scope”，既不归属父级，也不被识别为独立实体——这种嵌套在测试工具里会直接消失。