Why is an image URL an invalid item type for an image in a BlogPosting?

Question

I have the following item on a webpage which I'm defining as a Scheme.org Article. The details have been obsfucated, but all of the genuine URLs work.

<div itemscope itemtype="http://schema.org/Article" class="large-6 columns related blog">
        <meta itemprop="publisher" content="My Company" />
        <meta itemprop="dateModified" content="February 4, 2016" />
        <meta itemprop="mainEntityOfPage" content="http://example.co.uk/main-page/" />      
        <div>
            <h2 itemprop="headline" class="stretch_this"><a itemprop="url" href='http://example.co.uk/main-page/'>Article title</a></h2>
            <p>Posted by <span itemprop="author">A N Other</span> on <span itemprop="datePublished">February 4, 2016</span></p>
            <img itemprop="image" class="post_preview" alt='Article title' class="hide-for-small" src="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg" /> 
            <p itemprop="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&hellip;</p>
        </div>
        <a itemprop="url" href="http://example.co.uk/main-page/" class="button readmore">Read More<span class="icon icon-arrow"></span></a>

</div>

When I run this through Google's Structured Data Testing Tool, it gives the following error on image:

The attribute itemtype has an invalid value.

But according to schema.org, image should accept an image object or a URL, and has in other instances, e.g. when defining a Person.

What's up with this?

Answer 1

While a URL is valid according to schema.org, Google will only accept an image object, and the tool you're using to validate your markup is produced by Google.

Try this instead:

<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="image" class="post_preview" alt="Article title" class="hide-for-small" src="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg" /> 
            <meta itemprop="url" content="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg">
            <meta itemprop="width" content="800">
      <meta itemprop="height" content="800">
            </div>

Don't forget to specify you own width and height. You need to have the full specifications. Going according schema.org while ignoring googles directives on the subject will make mistakes like that happen. Plus they may change those whenever they want.

It looks like you will have to provide them with more information on your snippet than you used to before.

For more you can always check https://developers.google.com/structured-data/rich-snippets/articles?hl=en

And at the same time i can find a mistake on you the publisher tag.

Try changing the meta tag for the publisher to this :

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="http://example.co.uk/logo.jpg"/>
      <meta itemprop="url" content="http://example.co.uk/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Company">
  </div>

So at the end what you would like to have as a final result is the microdata below:

<div itemscope itemtype="http://schema.org/Article" class="large-6 columns related blog">
        <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="http://example.co.uk/logo.jpg"/>
      <meta itemprop="url" content="http://example.co.uk/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Company">
  </div>
        <meta itemprop="dateModified" content="February 4, 2016" />
        <meta itemprop="mainEntityOfPage" content="http://example.co.uk/main-page/" />        
            <h2 itemprop="headline" class="stretch_this"><a itemprop="url" href='http://example.co.uk/main-page/'>Article title</a></h2>
            <p>Posted by <span itemprop="author">A N Other</span> on <span itemprop="datePublished">February 4, 2016</span></p>
            <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="image" class="post_preview" alt="Article title" class="hide-for-small" src="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg" /> 
            <meta itemprop="url" content="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg">
            <meta itemprop="width" content="800">
      <meta itemprop="height" content="800">
            </div>
            <p itemprop="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&hellip;</p>
        
        <a itemprop="url" href="http://example.co.uk/main-page/" class="button readmore">Read More<span class="icon icon-arrow"></span></a>
</div>