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

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

Оглавление:
  1. Микроразметка Google
  2. Разметка для изображения
  3. Заключение

Микроразметка 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.

к меню ↑

Заключение

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