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

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>标记中似乎不合适，因为它没有突出显示整个上下文，因此忽略了图像以各种分辨率存在的事实... < / p>

什么是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值

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

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