Микроразметка для мессенджеров и социальных сетей или крутой шаринг страниц с помощью Open Graph

Согласитесь, сейчас все соцсети стремятся заставить пользователя как можно больше времени проводить там, получая различные развлечения. Но что стоит за этим? Конечно же, множество технологий. С одной стороны они используются для взаимодействия компонентов одного и того же сайта, а с другой - между сайтами. Одна из таких технологий - микроразметка.

Теги:

микро-разметка для мессенджеров, крутой шаринг, шаринг страниц, разметка open graph

Что такое «микроразметка» и как она помогает поднимать позиции сайта в поисковых системах?

Одним из способов структуризации вебсайта является добавление на его страницы микроразметки. Это технология, не требующая больших усилий от программиста, но значительно помогающая вашему ресурсу подняться в поисковой выдаче Яндекса или Google. Если кратко, то с помощью микроразметки можно в коде страниц явно указать, где находится телефон, почтовый адрес, часы работы компании. Или задать точное местоположение данных о товаре - название, цена, скидки, описание, изображения.

Помимо текстовых данных на сайте, с помощью технологии разметки можно установить картинку-обложку (или изображение превью) для каждой страницы. Тогда ссылки на эти страницы, отправленные в мессенджере или опубликованные в соцсети, будут выглядеть примерно так:

Пример предпросмотра отеля на сайте booking
Пример предпросмотра статьи на сайте habr

Такие «флажки», раскиданные в коде, и называются микро-разметкой. Самым распространенным стандартом является Open Graph, документация которого подробно описывает все доступные категории меток и их свойства. Находя эти флаги в коде сайта, поисковики извлекают из их значений точные данные, которые потом выводят в виде красивых виджетов в результатах поиска.

Но вернемся к предпросмотру ссылок, который рисуют мессенджере и соцсети при добавлении ссылки в текст. Наверняка, вы видели показанный вид ссылок, когда сами делились ими с кем-то в Telegram или WhatsApp.

Превью шаринга страницы в соцсетях имеет значение - захочет ли получатель ссылки открыть ее? Вызвать максимальное желание кликнуть по ней - основная задача изображения в блоке предпросмотра.

Как внедрить микроразметку Open Graph без программиста?

Рассмотрим возможности микроразметки подробнее. Допустим, у вас есть кулинарный блог или интернет-магазин мягких игрушек. Логично, что для каждой страницы с рецептом будет своя картинка-превью с блюдом. А для магазина - фотография плюшевой игрушки. Как правило, любая система управления сайтом позволяет добавить такую уникальную фотографию или картинку для каждой страницы через админку, а потом выводит ее в нужном месте кода со специальным meta-тегом микроразметки.

Если же на вашем сайте нет такой возможности, то это достаточно просто сделать вручную. Нужно найти файл, отвечающий за вывод «шапки» сайта (которая обычно одинаковая для всех страниц) и добавить в блок <head> специальный тег: <meta property="og:image" content="..." />. Как видите, здесь есть аббревиатура og, являющаяся сокращением Open Graph, а в качестве значения атрибута content указывается полный URL изображения превью (по-другому - тумбы).

Но как повысить узнаваемость вашего бренда и увеличить лояльность клиентов через технологию микроразметки? Попробуем сделать это за счет формирования изображения-превью на лету для сайта при публикации в соцсетях или мессенджерах. Сервис Thumber.ru позволяет создать эскиз изображений-превью, или другими словами - прототип, с помощью функционального онлайн-конструктора. Вам останется только добавить небольшой код в шапку всех страниц сайта! Теперь, когда кто-то отправит ссылку в Viber или опубликует ее во ВКонтакте, изображение будет взято из тега микро-разметки og:image и отображено у получателя ссылки. Внешний вид становится вот таким:

Пример информационной тумбы-превью на сайте rabota.ru
Пример информационной тумбы-превью на сайте meduza
Комбинация логотипа сайта, заголовка и описания представляет собой цифровую digital визитку страницы. Получая такую ссылку с большой тумбой-превью, адресат сразу узнаёт ваш бренд и принимает решение о клике осознанно.

Всего в 2 шага после регистрации на сервисе Thumber.ru вы сможете получить изменяемую картинку шеринга на сайте при отправке ссылки в любом мессенджере или публикации в соцсети.