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

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 接受。将它添加到 <picture> 内的 <img> 标签对我来说似乎不正确，因为它没有突出显示整个上下文，因此忽略了图像以各种分辨率存在的事实......

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

Answer 1

如果您想要 URL 值

您必须在 img 元素上指定 itemprop 属性，而不是在 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>

---

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