Why is my itemprop='image' markup incorrect?

Question

I've been experimenting with Microdata and thought I would try it on my blog. It turns out the template I was using already added some markup. It wasn't great and so I fixed up what I could.

To try and push my luck I have added more markup to my latest post but Google's Structured Data Testing Tool (SDTT) is unhappy about the itemprop='image' attributes and I'm not sure why.

Results page.

It is my understanding, ignoring all the code in between, that I have structured the data thus:

<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <div itemprop='articleBody'>
    <a href="1.png" itemprop="url"><img itemprop="image sharedContent" src="1.png" /></a>
    <a href="2.png" itemprop="url"><img itemprop="image sharedContent" src="2.png" /></a>
    <a href="3.png" itemprop="url"><img itemprop="image sharedContent" src="3.png" /></a>
  </div>
</div>

And this looks correct to me. BlogPosting can have the properties articleBody and image according to https://schema.org/BlogPosting, but according to the SDTT:

The attribute itemtype has an invalid value.

Indeed, I have just tried the SDTT with the above example code and it is failing to validate.

So I'm obviously missing something. What am I doing wrong?

Solution 1

schema.org/BlogPosting image permits ImageObject and URL, however Google only permits ImageObject, hence the error. The intended markup is:

<!-- my code -->
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
  <img src="image.jpg" itemprop="url">
</div>

               

Another discrepancy is schema.org/ImageObject recommends contentUrl, but Google recommends url, hence my usage above.

---

In response to your comment's code, your structure is still incorrect. I'll take it line by line:

<!-- your code -->
<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Minor point, but unless you're going for XHTML, itemscope='itemscope' is wrong. Use itemscope (as you did later on).

<!-- your code -->
  <div itemprop='articleBody'>
    <div itemscope itemtype="http://schema.org/ImageObject"/>

Your ImageObject is a child of the articleBody property, but you haven't associated it in this way. Like this, you have an articleBody with no associated properties and an unassociated ImageObject. You should use

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

Also, /> is incorrect, even if you are trying for XHTML as this element does have children and a closing </div>. Just use > as I included in the above snippet.

<!-- your code -->
      <a href="1.png" itemprop="url"><img itemprop="image sharedContent" src="1.png" /></a>

What is sharedContent doing here? sharedContent expects a CreativeWork when used as a property of SocialMediaPosting — never as a property of ImageObject and never on an img.

Your other code snippet which places the sharedContent property as below is also wrong.

<!-- your code -->
<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <div itemprop='articleBody'>
    <div itemprop='sharedContent'>
      <div itemscope itemtype="http://schema.org/ImageObject"/>
        …

Whilst sharedContent is now in the right place, it still needs to be a CreativeWork. Your ImageObjects are still not associated with the BlogPosting, as shown by the Structured Data Testing Tool.

                                          

The following is the correct code.

<!-- my code -->
<div itemscope itemtype="http://schema.org/BlogPosting">
  <div itemprop="articleBody">
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
      <a href="1.png" itemprop="url"><img itemprop="image" src="1.png"></a>
    </div>
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
      <a href="2.png" itemprop="url"><img itemprop="image" src="2.png"></a>
    </div>
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
      <a href="3.png" itemprop="url"><img itemprop="image" src="3.png"></a>
    </div>
  </div>
</div>

Solution 2

I had a similar problem with Google Structured Data Tester marking my images as invalid. Apparently it doesn't accept images where the source is a localhost domain. As soon as I deployed to the staging server the structured markup passed validation.

Comments

[Admin]

Some of the links in this questions were removed as they are not necessary for the question to be answered.

[Admin]

Why were the widely-used tags removed then?

[Ken Sharp]

I see. Adding ImageObject fails with sharedContent as a child of it: pastebin.com/cSgVZNyE . Removing sharedContent makes it happy: pastebin.com/rieWwSM6 . Wrapping each image in a parent sharedContent (pastebin.com/AmpBDqJs) validates happily, but is this because Google's STDD just ignores it? The STDD is quite happy if contentURL is used as well: pastebin.com/23wBvx8F . So it looks like I did it correct and Google did it incorrect? That's got to be a first. 😉 I guess I can appease them all by adding all the relevant tags. Thanks! 😀

[grg]

@Ken See my edit for my feedback on your code.

[MrH40XX]

TS uses a type of basic Blogger template, so he will be not able to use your code without to revamp the whole template. The changes must be done on the template level, not on the level of structured data.

[Ken Sharp]

Thanks again @grgarside. You're certainly correct about sharedContent - I've used that all wrong. I've removed it for now. Having another looking at the schema I see I don't think I need to use it in a CreativeWork. Just ignore the />, it was typed in a hurry 😉, and the original code is XHTML. I just mixed the two in my example (hence the two versions of itemscope). The final code is correct, honest! 😁

[Ken Sharp]

@Evgeniy The template is being edited or it wouldn't work at all. My original question contained links that anyone could have easily checked on, but two wallies now have edited away the links and I'm sick of editing it. So here I am explaining myself yet again, as I predicted I would have to.

[Ken Sharp]

On second thought if I just add schema.org/Blog to the relevant part of the template then that sharedContent possibly becomes useful, though I'll have to have another look at it's placement.

[Ken Sharp]

Yup. That works.

[BastianW]

adding <meta itemprop="height" content="50"/> and <meta itemprop="width" content="50"/> would improve that as well. Otherwiese you will get an A value for the height/width field is required. error

[grg]

@Bastian That's only required for AMP.