當圖片實際上是圖片標簽時，如何定義圖片的微數據標記？

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>

但它似乎不被谷歌的結構化數據測試工具所接受。 將它添加到<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 ，但它需要具有src屬性。