Within the http://schema.org/Product scope, I want to define the markup for an image. Usually it looks as follows:
<img itemprop="image" src="/path-to-image.suffix" alt="image-description" />
However, modern responsive pages use the <picture>
tag. I tried...
<picture itemprop="image">
<source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
<source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
<img src="/fallback-path-to-image.suffix" alt="image-description">
</picture>
But it appears not to be accepted by Google's structured data testing tool. Adding it to the <img>
tag within the <picture>
doesn't seem right to me, as it doesn't highlight the whole context and hence neglects the fact that the image exists in various resolutions...
What is the right Microdata image markup for picture
tags?
You have to specify the itemprop
attribute on the img
element, not on the picture
element:
<picture>
<source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
<source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
<img itemprop="image" src="/fallback-path-to-image.suffix" alt="image-description">
</picture>
The reason is because only certain elements can be used if the Microdata property should have a URL as value, i.e., all elements with href
or src
attribute.
ImageObject
valueYou have to specify the contentUrl
property on the img
element:
<picture itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
<source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
<img itemprop="contentUrl" src="/fallback-path-to-image.suffix" alt="image-description">
</picture>
Specifying the itemprop
on a source
element (instead of the img
element) is allowed, too, but it would need to have a src
attribute.