Все сайты, которые мы создаем, поддерживают Open Graph

Open Graph — это специальные данные (картинки и тексты) для парсеров мессенджеров и социальных сетей, благодаря которым автоматически создается красивый сниппет, если кто-то делится ссылкой на ваш сайт.

Изначально разметка Open Graph разрабатывалась только соцсетью Facebook, Но затем польза ее стала очевидна и для других соцсетей и мессенджеров, и они тоже стали ее поддерживать.

На многих сайтах есть кнопки для шеринга страниц в соцсетях — это один из способов привлечь на сайт аудиторию. И если на сайте реализована технология Open Graph, то ссылки на него будут выглядеть более привлекательно: с внятным заголовком и подходящей картинкой, которую задает владелец сайта.

Если же Open Graph нет на сайте, то соцсети и мессенджеры будут сами “подтягивать” зачастую произвольные изображения и текст со страницы сайта — из-за этого ссылка выглядит как спам, переходить по ней нет никакого желания.

Вот несколько примеров того, как может выглядеть ссылка с сайта, на котором не реализован протокол Open Graph. Картинка обрезана и не отцентрована, на превью много лишней информации

А вот так выглядит ссылка, если на сайте есть Open Graph. Все ровно, красивый фон и заголовок:

Мы создаем сайты на CMS Umbraco, куда дополнительно добавили технологию Open Graph.

С ее помощью мы можем добавлять картинки для шеринга в соцсетях, управлять ими, выбирать, как они будут выглядеть в прямоугольнике и квадрате. Для этого не нужны сторонние сервисы — все делается парой кликов в CMS. Вот, как просто это выглядит:

Если на странице уже заполнены данные для поисковиков (Title, Description), то можно не заполнять аналогичные поля в Open Graph — он сам подтянет их из блока SEO (эти данные в большинстве случаев и так дублируются, так что просто нет смысла дважды их заполнять).

В разных соцсетях и мессенджерах могут быть некоторые отличающиеся детали. Например, Telegram очень долго хранит кэш, поэтому если вы сразу не добавили нужную картинку через Open Graph или добавили не ту, а затем отредактировали ее, придется долго ждать, пока она обновится в Telegram.

Но тут есть выход — специальный бот @webpagebot, с помощью которого можно обновить ссылки вручную.

Еще одна важная особенность Telegram — для него не получится сделать широкую картинку.

А в Twitter вместе со ссылкой отображается только маленький формат картинки. Но это все равно лучше, чем ее отсутствие.

Разметка Open Graph сделает ваш сайт более привлекательным для шеринга в соцсетях — превью ссылок, которыми делятся пользователи, выглядят ровными, оцентрованными, с корректной картинкой и названием.