Поисковые системы учитывают содержимое атрибута alt изображения при формировании его сниппета в поиске по изображениям. Но иногда возникает необходимость в более значительном влиянии на их сниппет и позиции. Особенно если в вашей нише выбирают товар по внешнему виду или ваш основной контент - изображения.
Если же вы задумались о внедрении микроразметки изображений ради сниппета в обычном поиске, то лучше лучше укажите изображение в разметке Product для товаров или Article/NewsArticle для статей, новостей.
Обозначения полей
Основные поля
В разметке имеются три поля указывающих на источник изображения, наличие хотя бы одного поля из этих является обязательным условием:
contentUrl (или image) - ссылка на изображение;
thumbnail - миниатюра изображения для предпросмотра.
Дополнительные поля
Использование данных полей не является обязательным, тем не менее рекомендуется для того чтобы лучше продвигаться в вертикали поиска по картинкам:
name - название изображений;
description - описание изображения;
caption - подпись к изображению;
width - ширина изображения;
height - высота изображения.
Свойства отражающие размеры изображения необходимо указывать в формате числа с единицей измерения (например, "200px").
Пример разметки
Для примера возьмём изображение с заголовком и описанием выводимых в коде.
<div itemscope itemtype="http://schema.org/ImageObject">
<h3 itemprop="name">Пингвины</h3>
<img src="penguin.gif" itemprop="contentUrl">
<span itemprop="description">Пингвин делает “подножку”.</span>
</div>
Если вы не хотите выводить информацию на странице, используйте тег meta для скрываемых полей:
<div itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="name" content="Пингвины">
<img src="penguin.gif" itemprop="contentUrl">
<meta itemprop="description" content="Пингвин делает “подножку”">
</div>
Проверку валидаторами Яндекса и Google обе микроразметки проходят успешно:
Ответы на популярные вопросы
Как сделать микроразметку изображений в WordPress
Лучше всего делать ее точечно и вручную. Решить проблему того что редактор TinyMCE вырезает микроразметку можно любым из двух вариантов:
- написать свой шорткод, который формирует изображение с нужной микроразметкой;
- отключить в TinyMCE проверку нужных нам атрибутов (например, itemscope, itemtype и itemprop если разметка формата microdata, как в примере).
Что делать если изображение размещено без тега <img>
Не стоит так размещать значимый для страницы контент, рекомендую все-таки переверстать изображение через тег <img>.
Что делать с изображениями загружаемыми через JavaScript
Для того чтобы поисковые системы учитывали ваши изображения загружаемые средствами JavaScript, нужно добавить их в xml карту сайта.
Пример разметки изображений в такой карте сайта:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://site.ru/page/</loc>
<image:image>
<image:loc>https://static.site.ru/img/one.jpg</image:loc>
</image:image>
<image:image>
<image:loc>https://static.site.ru/img/two.jpg</image:loc>
</image:image>
</url>
</urlset>
Используете ли вы микроразметку изображений? Если да, то как?
Продвигал основные сайты таких компаний как ВТБ, Альфа-Банк, Газпром АГНКС, Технопарк и BMW Борисхоф.
Спикер конференций Optimization в Сколково, Merge в Иннополисе, SEO без воды и многих других.
Если на самом фото один пингвин делает подножку другому, то второй вариант.