微数据和 div

Question

我的两个 div（article-tag-summary 和 article-date-summary）属于 article-image-summary div。这很好，不能改变。

一切都属于 schema.org/Article，因此也属于 <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">。

问题：

1 - 如果我关闭 <div class="article-image-summary" itemprop="image">，那么两个 div 就会落在图像之外，并且这对我的 CSS 造型不利。
2 - 如果我不关闭它，那么 itemprop="articleSection 和 itemprop="datePublished 不是在 schema.org 中得到认可，因为它们与 ImageObject 相关，并且不是 schema.org/Article 这也很糟糕。

这纯粹是一个 HTML 问题...我需要的是 date-summary 和 tag-summary 属于 image-summary（所以不要关闭 div 在他们之前），并且这两个 div 具有与 schema.org/Article 而不是 ImageObject 相关的项目道具。

下面的示例显示了日期和标签之前的两个结束 div，这意味着 schema.org 验证有效。但在这种情况下，我对这两个元素的 CSS 样式不起作用，因为它们落在 image-summary div.

之外

<div itemscope itemtype="http://schema.org/Article">
        <div itemprop="image" itemscope itemtype=
        "http://schema.org/ImageObject">
            <div class="article-image-summary" itemprop="image">
                <meta content="auto">
                <meta content="100"><a href="#"><img alt=
                "#" itemprop="url" src=
                "#"></a>
            </div>
        </div>
        <div class="article-tag-summary" itemprop="articleSection">
            <a href="#>tag</a>
        </div><!--<div class="article-data">-->
        <div class="article-date-summary" itemprop="datePublished">
            date
            <div class="page-views">
                <i class="fa fa-eye"></i> count
            </div>
        </div><!--</div>-->
        <h2 class="title-article-masonry" itemprop="headline"></h2>
    </div>

Answer 1

您也许可以使用 Microdata 的 itemref 属性解决此问题。

要使其生效，您必须将 article-tag-summary 和 article-date-summary（可能还有其他后续属性）移到 schema:Article 元素之外。

给每个属性一个 id，并在 itemref 属性中引用这些 id 值（我的 "foo1" 和 "foo2"示例）：

<div itemscope itemtype="http://schema.org/Article" itemref="foo1 foo2">

  <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
  </div>

</div>

<div id="foo1" class="article-tag-summary" itemprop="articleSection">
</div>

<div id="foo2" class="article-date-summary" itemprop="datePublished">
</div>

如果您需要对所有这些部分进行分组 div，您当然可以添加它。当您使用 Schema.org 的 Article 类型时，article 元素很可能比 div.

更合适

微数据和 div

Microdata and divs

html

microdata