当图像实际上是图片标记时，如何定义图像的微数据标记？

Question

在http://schema.org/Product范围内，我想定义图像的标记。通常看起来如下：

<img itemprop="image" src="/path-to-image.suffix" alt="image-description" />

但是，现代响应页面使用<picture>标记。我试过了...

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

但它似乎不被Google's structured data testing tool接受。将它添加到<img>中的<picture>标签对我来说似乎不对，因为它不突出整个上下文，因此忽略了图像存在于各种分辨率中的事实......

什么是picture标签的微数据图像标记？

Answer 1

如果你想要一个URL值

你必须在itemprop元素上指定img属性，而不是在picture元素上：

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

原因是，如果Microdata属性应该具有URL作为值，即只有具有href或src属性的所有元素，则只能使用某些元素。

如果你想要一个ImageObject值

您必须在contentUrl元素上指定img属性：

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

---

在itemprop元素（而不是source元素）img上指定is allowed，但它需要具有src属性。