Как настроить микроразметку ImageObject?

Как настроить микроразметку ImageObject?

Что такое микроразметка ImageObject?

ImageObject - это семантическая разметка для "Изображений" (картинок), которая позволяет передавать больше данных в поисковые системы и более корректно "сообщить" роботам, что есть что и где находится. Данная микроразметка позволяет в сниппете поисковой системы показывать расширенные результаты и более привлекательно оформить изображения с вашего сайта. Чем более красиво смотрится ваш материал в выдаче поисковика, тем больше шансов, что это привлечет потенциальных посетителей сделать клик и перейти на ваш сайт.

Чтобы понять как работает данная разметка, много примеров наводить не нужно, при поиске как в Яндексе так и в Google, думаю вы видели в сниппете справа рядом с описанием картинку с материала, вот это именно пример работы разметки ImageObject.

Как установить микроразметку ImageObject?

Для установки достаточно перейти в "Панель управления - Дизайн - Управление дизайном" - Страница материала и комментариев в модулях:

  • Блог
  • Новости
  • Каталог файлов
  • Каталог статей
  • Каталог сайтов
  • Каталог объявлений
  • Онлайн игры
  • Фотоальбомы

в шаблоне "Страница материала и комментариев к нему", перед закрывающим тегом </body> установить такой скрипт:

 <script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "ImageObject",
 "author": "$USER$",
 "contentLocation": "Ukraine",
 "contentUrl": "<?if($IMG_URL1$)?>$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?><?else?><?if($IMG_URL2$)?>$HOME_PAGE_LINK$<?substr($IMG_URL2$,1)?><?else?>$HOME_PAGE_LINK$<?substr($SOCIAL_IMAGE_SRC$,1)?><?endif?><?endif?>",
 "datePublished": "$ADD_DATE$",
 "description": "<?if($
IMG1_ALT$)?>$IMG1_ALT$<?else?><?if($SEO_DESCRIPTION$)?>$SEO_DESCRIPTION$<?else?>$SOCIAL_DESCRIPTION$<?endif?><?endif?>",
 "name": "<?if($IMG1_TITLE$)?>$IMG1_TITLE$<?else?><?if($MODULE_ID$='blog' or $MODULE_ID$='news')?><?$JSENCODE$($ENTRY_NAME$)?><?else?><?$JSENCODE$($ENTRY_TITLE$)?><?endif?><?endif?>"
}
</script> 

вот так просто все настраивается.

Как установить микроразметку ImageObject в модуле Фотоальбомы?

Для установки достаточно перейти в "Панель управления - Дизайн - Управление дизайном" - Фотоальбомы - Страница с полной фотографией и комментариями, перед закрывающим тегом </body> установить такой скрипт:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "ImageObject",
 "author": "$USER$",
 "contentLocation": "Ukraine",
 "contentUrl": "<?if($FULL_PHOTO_DIRECT_URL$)?><?substr($HOME_PAGE_LINK$,0,-1)?><?substr($FULL_PHOTO_DIRECT_URL$,0,strpos($FULL_PHOTO_DIRECT_URL$,"?"))?><?else?>$HOME_PAGE_LINK$<?substr($FULL_PHOTO_URL$,1)?><?endif?>",
 "datePublished": "$ADD_DATE$",
 "description": "$PHOTO_DESCR$",
 "name": "<?$JSENCODE$($PHOTO_NAME$)?>"
}
</script> 

В коде выше выделил красным, там пропишите свою страну в которой вы проживаете, нужно это для корректной работы данного типа разметки.

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

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

Лицензия: CC BY-SA 4.0

Похожие материалы:
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar
Я уже начинаю путаться. В предыдущих статьях вы рассказывали о других разметках. Например я установил NewsArticle, SearchAction, Review для комментариев, а теперь ImageObject. Получается что все их надо ставить в районе перед тегом </body>. Или есть одна какая то разметка позволяющая охватить все случаи, кроме, разве что Review для комментариев???
avatar
Да, все перед тегом </body>. Важно именно перед так как они не мешают загрузке сайта и стоят в самом низу шаблона. Нет, нет такой одной единой которая все охватывает, так как чего-нибудь такого шаблонного (сборной солянки разметок нет).
avatar
А для фото альбома какую разметку можно установить?
avatar
Спасибо за идею для будущей статьи, я посмотрю что можно сделать для фото!
avatar
Буду ждать, а то гугл ругается на разметку в фотоальбоме smile
avatar
Дополнил материал! По сути другой никакой разметки для этого не нужно, просто адаптировал ее под модуль "Фотоальбомы".
avatar
Благодарю! Будем устанавливать.
avatar
Как вы считаете надо дополнить этот скрип строкой "license": "https://indexoid.com/license" в связи с тем что Google изменит дизайн выдачи в поиске по картинкам.
Это вроде бы как пока тестируется, но может быть стоит подготовиться? Надо ли внедрять разметку licensable?

Полная документация для разработчика сайта — Image License Metadata.(https://developers.google.com/search/docs/data-types/image-license-metadata)
avatar
Имеет смысл использовать в будущем, лишь в том случае, если вы используете свои авторские фото. Если вы используете фото с сети интернет, вы сами нарушаете эти лицензии, и добавлять лицензии на чужие фото нет необходимости.

Если же у вас все авторские фото, можно сделать так:

Код
<script type="application/ld+json">
{
       "@context": "http://schema.org",
       "@type": "ImageObject",
       "author": "$USER$",
       "contentLocation": "Ukraine",
       "contentUrl": "<?if($IMG_URL1$)?>$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?><?else?><?if($IMG_URL2$)?>$HOME_PAGE_LINK$<?substr($IMG_URL2$,1)?><?else?>$HOME_PAGE_LINK$<?substr($SOCIAL_IMAGE_SRC$,1)?><?endif?><?endif?>",
       "license": "https://example.com/license",
       "acquireLicensePage": "$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>",
       "datePublished": "$ADD_DATE$",
       "description": "<?if($IMG1_ALT$)?>$IMG1_ALT$<?else?><?if($SEO_DESCRIPTION$)?>$SEO_DESCRIPTION$<?else?>$SOCIAL_DESCRIPTION$<?endif?><?endif?>",
       "name": "<?if($IMG1_TITLE$)?>$IMG1_TITLE$<?else?><?if($MODULE_ID$='blog' or $MODULE_ID$='news')?><?$JSENCODE$($ENTRY_NAME$)?><?else?><?$JSENCODE$($ENTRY_TITLE$)?><?endif?><?endif?>"
}
</script>

Соответственно вместо ссылки example.com/license прописать свою ссылку на страницу лицензии. Пример выше для всех основных модулей каталогов блога и новостей.

Так же стоит добавить, что Яндекс пока не поддерживает этих доп полей лицензий, при проверке валидатором разметки он будет ругаться:

Цитата
ПРЕДУПРЕЖДЕНИЕ: поле schema.org/acquireLicensePage не определено в спецификации schema.org/ImageObject
 Если гугл для себя внес правки и поддерживает эти поля, то яндекс сам по себе не поддерживает разметки, он смотрит напрямую в стандартны schema.org и сам по себе ничего не изменяет и не добавляет.
avatar
У меня уже накопилось несколько страниц на которые гугл ругается: Ошибка анализа: отсутствует символ "," или "}"
Сейчас попробую переустановить код. может где ошибка закралась.

А вот так навскидку не можете сказать причину такой ошибки?
avatar
Обновите код разметки, в материале выше он обновлен. Ошибка из-за того, что в названии материалов используются кавычки "", на это ругается робот, но в обновленном коде это пофикшено.
avatar