如何将 itemscope 拆分为多个 HTML 元素？答案

【问题标题】：How to split itemscope over multiple HTML elements?如何将 itemscope 拆分为多个 HTML 元素？
【发布时间】：2015-03-19 00:49:02
【问题描述】：

我有以下 HTML：

<body itemscope itemtype="http://schema.org/WebPage">
  <header itemscope itemtype="http://schema.org/WPHeader">
    <nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    </nav>
    ...
    <div itemscope itemtype="http://schema.org/Organization" itemref="objectDetails">
      <span itemprop="name">Org name</span><br>
      <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        ...
      </span>
    </div>
  </header>
  <ul itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">..</li>
    ...
  </ul>
  <div id="objectDetails">
    <div itemprop="description">...</div>
    <div itemprop="foundingDate">...</div>
    ...
  </div>
</body>

此网页显示有关某个特定组织的信息。有关组织的一些信息应显示在页眉中，其他信息应显示在页面中心。在itemref 属性的帮助下，我可以拆分有关组织的信息并将其放在两个单独的 div 中。

如果我使用 google 结构化数据测试工具测试上述 HTML - 它可以正确提取有关组织的信息 - 两个 div 的属性都会显示，但它会在 WebPage 对象上显示验证错误：

Google 无法识别 WebPage 类型的对象的属性 foundingDate。

告诉 Google objectDetails div 中的属性不属于外部 itemscope (WebPage) 的正确方法是什么？如果我将 itemscope itemtype="http://schema.org/Organization" 添加到 objectDetails div - 那么 Google 会在我的网页上看到两个独立的组织。

【问题讨论】：

您能否通过根据其逻辑结构将数据分组在一起并使用格式（例如绝对定位）使其显示在您想要的视觉位置来解决此问题？

标签： html schema.org microdata

【解决方案1】：

这是不可能的。

可能的“解决方案”：

不要在“容器”上使用物品，例如 html 或 body。在不跨越整个内容的元素上使用它，并在需要时使用itemref。
使用多个项目并在itemid 中为它们指定相同的URI。不过不清楚if/when/how Schema.org supports itemid，消费者的支持恐怕不好。

（使用RDFa instead of Microdata 自然会允许这样做。）
向包含您不想添加到原始父项的所有属性的元素添加一个无类型项（通过添加不带itemtype 的itemscope）。示例：1、2、3。

【讨论】：