Как выглядит ваш сайт в социальных сетях? Open graph разметка - что это и зачем она нужна

2925
Как выглядит ваш сайт в социальных сетях? Open graph разметка - что это и зачем она нужна

Очень часто можно встретить кнопки «расшаривания/лайков» на сайтах, но крайне редко встречаются правильно расшаренные страницы при пролистывании ленты в социальных сетях. По мере увеличения влияния социальных сетей в мире создания и продвижения сайтов, был разработан словарь, который помогает управлять данными сайта, при добавлении его в социальные сети.

Что же такое Open Graph?

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

В настоящее время такие социальные сети как Вконтакте, Гугл+, Твиттер и другие, поддерживают разметку сайта Open Graph.

Ниже, мы подробней расскажем об основных мета-тегах Open Graph:

  • og:title - название объекта;
  • og:image - URL изображения, описывающего его;
  • og:description - описание объекта, по умолчанию используется содержимое meta description тэга, которое не должно превышать лимита в 160 символов, для og:description лимит увеличен примерно до 295 символов. Хорошая возможность, написать более интересное и развернутое описание, которое поможет привлечь большее число посетителей к вам на сайт.

Как использовать Open Graph?

Для того чтобы социальные сети выводили нужную вам информацию необходимо в html - разметку страницы между тегами head добавить несколько строк кода. К примеру:

/* код, указывающий на картинку, которая появится в анонсе на страницах социальной сети */

/* мета-тег описывающий заголовок выводимого анонса */

Практика

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

Вот что мы увидели Вконтакте, при добавлении главной страницы:

А вот что было при добавлении статьи из блога:

Согласитесь что с изображением страницы выглядят более привлекательно и интересно. Аналогичный эксперимент мы провели с фейсбуком:

Разница лишь в осутствии картинки, ещё из за того что у нас на большинстве страниц прописаны такие важные мета-теги как title и description, в их отсутствии выводилось было совсем непонятно что:

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

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

Open Graph Дорабоки

Вам может быть интересно

Студия SP-Artgroup Золотой сертифицированный партнер компании 1С-Битрикс Студия SP-Artgroup участник программы качества внедрений Студия SP-Artgroup компетенция Комозитный сайт Студия SP-Artgroup компетенция «Битрикс24»

г. Благовещенск, ул. 50 лет Октября, 28, оф. 306

8(4162) 21-23-17