Sharing properties between parent and child itemscopes when using Microdata

Question

I am using Microdata to mark up a blog post. I have come across a problem and I am unable to find a solution with Google.

In short I want to use a property already specified in a nested itemscope for the parent itemscope too.

I've simplified my code to the example below, I want to use the author image as the image for the blog post.

<article itemscope itemtype="http://schema.org/BlogPosting">
  <meta itemprop="dateModified" content="2016-02-25" />
  <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="Test Organisation">
    <div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
        <link itemprop="url" href="#" />
    </div>
  </div>
  <link itemprop="mainEntityOfPage" href="#" />
  <div class="heading">
    <h2 itemprop="name headline">Imported Article 1</h2>
  </div>
  <div class="author-aside" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img itemprop="image" src="#" />
    <div class="name" itemprop="name">Author Name</div>
    <div class="role" itemprop="jobTitle">Job Title</div>
  </div>
  <span itemprop="articleBody">
    <p>Body Content</p>
  </span>
  <br />
  <span content="2016-06-30" itemprop="datePublished">Thursday 30th June 2016</span></article>

I've tried to use the answer indirectly suggested in this question under the comment "CODE I NOW HAVE" which does what I need it to but produces a new error:

The attribute itemtype has an invalid value.

I am using this service to validate the Microdata.

Answer 1

Here are two separate issues involved.

Solution for your Microdata

To add the image property from the Person item also to the BlogPosting item, you can use the itemref attribute:

1. Give the image property (in Person) an id attribute.
2. Add the itemref attribute to the element with the BlogPosting type, referencing the id value.

Example:

<article itemscope itemtype="http://schema.org/BlogPosting" itemref="author-image">

  <div itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img itemprop="image" src="#" id="author-image" />
  </div>

</article>

Solution for Google Rich Snippets

While the above mentioned markup is valid Microdata and appropriate use of the Schema.org vocabulary, Google has additional rules/restrictions for getting one of their Rich Snippets (or Knowledge Graph features) displayed.

In Schema.org, the image property can have a URL or an ImageObject item as value, but Google wants to see an ImageObject for their Rich Snippets.

(Just like you did it with your logo property.)