CODEWITHSUNDEEP
htmlschema.orgmicrodatagoogle-rich-snippets
Christopher Thomas
Christopher Thomas

Reputation: 372

Sharing properties between parent and child itemscopes when using Microdata

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.

Upvotes: 1

Views: 205

Answers (1)

unor
unor

Reputation: 96527

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.)

Upvotes: 1

Related Questions