Доброго времени провождения на нашем блоге! Предлагаю сегодня подробно поговорить о специальном протоколе Open Graph и о том, как можно эффективно использовать его в привлечении большого количества трафика из социальных сетей.

Для начала давайте разберемся, что же такое разметка Open Graph. Это протокол, который позволяет управлять и контролировать данные, формирующиеся в превью (структурирует информацию о странице) в посте, когда пользователь делиться ссылкой в социальных сетях.

Вот пример как выглядит в социальной сети Вконтакте структурированная информация о ссылке на статью с использование протокола Open Graph:

Open Graph Вконтакте

Так она выглядит в Facebooke:

Open Graph FaceBook

Согласитесь, такой пост выглядит очень привлекательно и кликабельно, а это всего лишь ссылка, которой пользователь социальной сети поделился со своими друзьями, разместив ее у себя на стене или в сообществе.

Кстати, что делать если в коде вы все разместили верно, а при шейринге в Facebook отображается неправильная/устаревшая информация? Добро пожаловать в Facebook for developers — по этой ссылке вы сможете очистить старый кеш информации, который хранится у социальной сети для Вашей страницы и «скормить» ей новый красивый заголовок и описание.

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

Как настроить разметку Open Graph

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

Здесь все предельно просто! Вот так выглядит исходный код протокола Open Graph:

Выделение_078

который размещается в коде страницы, в разделе <head>…</head>, может находиться, например, после основных мета-тегов.
Рассмотрим каждый тег Open Graph по отдельности и разберемся в их значениях:

  • «og:locale» — указывает локализацию (язык сайта), можно использовать значение «ru_RU» по умолчанию.
  • «og:type» — указывает тип страницы (статья, новость, видео, категория и т. д.), можно использовать по умолчанию «article».
  • «og:title» — указывает заголовок статьи.
  • «og:description» — указывает краткое описание, которое выводится при формировании превью ссылки.
  • «og:url» — ссылка на страницу сайта.
  • «og:image» — ссылка на картинку, которая будет отображаться в посте.
  • «og:site_name» — название сайта.

Значение каждого тега расписано, поэтому вам осталось только их заполнить и внедрить в код страниц вашего любимого интернет-ресурса.

В добавок хочется добавить, что с внедрением протокола Open Graph рекомендуется установить на страницы сайта кнопки «Поделиться» в социальных сетях. Это упросит возможность пользователя поделиться полезной информацией о вашем сайте в с другими юзерами. Ну и безусловно несколько упростит задачи SEO-оптимизатора при работе с биржами «лайков», которые хоть и не приносят ощутимого ссылочного эффекта, но позволяют несколько ускорить индексацию/переиндексацию при продвижении сайта. Например:

Кнопки в социальных сетях

Для самых популярных cms-систем существуют уже готовые плагины, помогающие реализовать внедрение разметки Open Graph без привлечения программистов.
Например для WordPress этот SEO-плагин можно скачать тут. Для Joomla вы найдете плагин по этой ссылке, ну а для OpenCart предлагаю взять его здесь.

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