Как определить разметку микроданных для изображения, когда на самом деле это тег изображения? - PullRequest
0 голосов
/ 21 февраля 2019

В пределах 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?

1 Ответ

0 голосов
/ 22 февраля 2019

Если вам нужно значение 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...