Микроразметка для изображений

Сделать микроразметку для изображения в содержании сайта без ошибок и предупреждений в валидаторе Google и Яндекс.

Микроразметка Google

После проверки страницы сайта инструментом Structured Data Testing Tool в результатах для изображения мы получим следующие ошибки:

  • image: отсутствует (обязательное)
  • name: отсутствует (обязательное)
  • url: отсутствует (обязательное)
  • Для image указан недопустимый URL.

Нажимаем кнопкой мыши на строку ошибки и видим подсказку с ссылкой (Что это?) на страницу Enabling Rich Snippets for Articles. Где перечислены все типы для статьи и таблица рекомендуемых и обязательных свойств разметки.

Ссылка на страницу где перечислены все объекты для статьи
Ссылка на страницу где перечислены все объекты

Разметка для изображения

Рассмотрим структуру которую предлагает google для изображения внутри статьи.

<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
</div>

Первая строка указывает на объект изображения. Вторая строка указывает на само изображение, с ней тоже проблем нет. Третья строка meta, значение которой ссылка на изображение — это не правильно. Валидатор микроразметки Яндекс увидит ошибку:

ОШИБКА: В свойстве content тега meta не может содержаться ссылка

Чтобы не было ошибки убираем строку полностью:

<meta itemprop="url" content="https://google.com/thumbnail1.jpg">

Мета теги с шириной и высотой оставляем, и заполняем реальными размерами изображения.

Полностью валидный HTML и микроразметка без ошибок для изображения в статье на сегодняшний день имеет такой вид:

<figure itemscope itemprop="image" itemtype="http://schema.org/ImageObject">
<picture>
      <source srcset="http://site.ru/images/image.png" media="(min-width: 900px)">                         
      <source srcset="http://site.ru/images/image-240-180.jpg, 
                      http://site.ru/images/image.jpg 2x" media="(min-width: 450px)">                                                           
      <img itemprop="url contentUrl" src="http://site.ru/images/image-120-90.jpg" 
              srcset="http://site.ru/images/image-240-180.jpg 2x" 
              alt="Альтернативный заголовок изображения" 
              title="Заголовок изображения">
</picture>
<meta itemprop="width" content="120">
<meta itemprop="height" content="90">
<meta itemprop="datePublished" content="2015-05-07T09:00-04:00"/>
<figcaption itemprop="caption description">Подпись под изображением</figcaption>
</figure>

Подробно о элементе HTML5 picture.

Заключение

После выполнения обязательных и рекомендуемых свойств для микроразметки, вы получите парсер микроразметки для изображения без ошибок и предупреждений.