HTML5 Microdata - itemref to another itemscope (CollectionPage containing all the blogs)

Question

On the Google structured testing tool, it shows that they are all separate instances. I'm trying to have them list to each other.

This is what I have now:

<section class="primary content-area" itemscope itemtype="http://schema.org/CollectionPage">
    <meta itemprop="name headline" content="Stepanie Schaefer" />
    <div itemid="http://www.cheapflights.com/news/author/stephanieschaefer/" itemscope itemtype="http://schema.org/Person">
       <h1 itemprop="headline"><span itemprop="name">Stephanie Schaefer</span></h1>
       <p itemprop="description">Stephanie is a Boston native who loves to find ways to escape New England winters. She’s thrown a coin in the Trevi Fountain, sipped wine on a vineyard in Northern Spain and swam in the Mediterranean Sea. Although she hasn’t been everywhere, it’s definitely on her list.</p>
    </div>

        <div itemscope itemtype="http://schema.org/BlogPosting">
            <h1 itemprop="headline">Top 10 booze-infused getaways</h1>
            <link itemprop="author" href="http://www.cheapflights.com/news/author/stephanieschaefer/" />
            <p itemprop="description">Description of Blog</p>
        </div>

        <div itemscope itemtype="http://schema.org/BlogPosting">
            <h1 itemprop="headline">Top 10 booze-infused getaways</h1>
            <link itemprop="author" href="http://www.cheapflights.com/news/author/stephanieschaefer/" />
            <p itemprop="description">Description of Blog</p>
        </div>
</section>

I tried to link them together with itemref but it still doesn't seem to work.

    <section class="primary content-area" itemscope itemtype="http://schema.org/CollectionPage" itemref="blogs1 blogs2">
    <meta itemprop="name headline" content="Stepanie Schaefer" />
    <div itemid="http://www.cheapflights.com/news/author/stephanieschaefer/" itemscope itemtype="http://schema.org/Person">
       <h1 itemprop="headline"><span itemprop="name">Stephanie Schaefer</span></h1>
       <p itemprop="description">Stephanie is a Boston native who loves to find ways to escape New England winters. She’s thrown a coin in the Trevi Fountain, sipped wine on a vineyard in Northern Spain and swam in the Mediterranean Sea. Although she hasn’t been everywhere, it’s definitely on her list.</p>
    </div>
        <div itemscope itemtype="http://schema.org/BlogPosting" id="blogs1">
            <h1 itemprop="headline">Top 10 booze-infused getaways</h1>
            <link itemprop="author" href="http://www.cheapflights.com/news/author/stephanieschaefer/" />
            <p itemprop="description">Description of Blog</p>
        </div>

        <div itemscope itemtype="http://schema.org/BlogPosting" id="blogs2">
            <h1 itemprop="headline">Top 10 booze-infused getaways</h1>
            <link itemprop="author" href="http://www.cheapflights.com/news/author/stephanieschaefer/" />
            <p itemprop="description">Description of Blog</p>
        </div>
</section>

How do we link the two objects "CollectionPage" and "BlogPosting" together?

Answer 1

You need to use properties (itemprop) if you want to relate items.

The itemref attribute can be used if you can’t nest the elements, but you still need to use properties. In your example, it seems that you can nest the elements, so there is no need to use itemref.

As described in my answer to your previous question, you could use mainEntity with an ItemList value (and in the ItemList, itemListElement for each BlogPosting).

Another option is to use hasPart. It’s less expressive than the mainEntity/ItemList way, and using blogPost (in a Blog) might be preferable, but it’s very simple, so it can illustrate the way how it works in Microdata.

Nesting (without itemref)

<section itemscope itemtype="http://schema.org/CollectionPage">

  <article itemprop="hasPart" itemscope itemtype="http://schema.org/BlogPosting">
  </article>

  <article itemprop="hasPart" itemscope itemtype="http://schema.org/BlogPosting">
  </article>

</section>

itemref (without nesting)

<section itemscope itemtype="http://schema.org/CollectionPage" itemref="blogs1 blogs2">
</section>

<!-- don’t nest this 'article' inside another element with 'itemscope' -->
<article itemprop="hasPart" itemscope itemtype="http://schema.org/BlogPosting" id="blogs1">
</article>

<!-- don’t nest this 'article' inside another element with 'itemscope' -->
<article itemprop="hasPart" itemscope itemtype="http://schema.org/BlogPosting" id="blogs2">
</article>

(Google’s SDTT will output an @id value for this example, using the id values, but this is likely a bug. You can "overwrite" it by giving each BlogPosting an itemid value.)