Блог о SEO
Telegram-канал
БлогТехническая оптимизацияМикроразметка изображений

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

2020-03-06
136
Микроразметка изображений
Содержание

Поисковые системы учитывают содержимое атрибута 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>

Используете ли вы микроразметку изображений? Если да, то как?

Комментарии
Оставить комментарий
Отправить
Подпишитесь на новые статьи блога