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

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

Андрей Батурин,
Андрей Батурин

Андрей Батурин

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

Что такое Open Graph и в чем его польза для сайта?

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

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

Зачем нужен Open Graph?

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

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

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

Без Open Graph

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

Open Graph

Как Open Graph работает в наших сайтах?

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

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

Open Graph в Umbraco

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

Несколько особенностей Open Graph

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

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

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

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

Open Graph in Twitter

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

Другие статьи по тегам

сайты разработка сайтов

на эту тему

Зачем нужна темная тема на сайте
Главный вопрос SMM: почему надо продвигаться в соцсетях?
О методах и инструментах продвижения в соцсетях
Искусство заголовка в соцсетях и на сайте
Оформление аккаунтов компании в соцсетях
Продвижение малого бизнеса в интернете: сайт, соцсети и другие способы