Как определить разметку микроданных для изображения, когда на самом деле это тег изображения?

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. Добавление его в <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 элемент) тоже разрешено, но для этого потребуется src приписывать.