Что такое разметка Open Graph и как эффективно ее использовать
Доброго времени провождения на нашем блоге! Предлагаю сегодня подробно поговорить о специальном протоколе Open Graph и о том, как можно эффективно использовать его в привлечении большого количества трафика из социальных сетей.
Для начала давайте разберемся, что же такое разметка Open Graph. Это протокол, который позволяет управлять и контролировать данные, формирующиеся в превью (структурирует информацию о странице) в посте, когда пользователь делиться ссылкой в социальных сетях. В реальности - это несколько строчек мета-тегов, которые нужно внедрить в код вашего сайта. Именно они и позволят сформировать желаемый вид для поста в социальных сетях.
Вот пример как выглядит в социальной сети Вконтакте структурированная информация о ссылке на статью с использование протокола Open Graph:
Так она выглядит в Facebooke:
Согласитесь, такой пост выглядит очень привлекательно и кликабельно, а это всего лишь ссылка, которой пользователь социальной сети поделился со своими друзьями, разместив ее у себя на стене или в сообществе.
Кстати, что делать если в коде вы все разместили верно, а при шейринге в Facebook отображается неправильная/устаревшая информация? Добро пожаловать в Facebook for developers - по этой ссылке вы сможете очистить старый кеш информации, который хранится у социальной сети для Вашей страницы и "скормить" ей новый красивый заголовок и описание.
Наверное теперь у вас родилась идея настроить разметку Open Graph для своего сайта, а после поспамить в тематических группах и сообществах социальных сетей?
Как настроить разметку Open Graph
Давайте же теперь разберемся как настроить протокол Open Graph для вашего сайта, чтобы воплотить эту идею в жизнь.
Здесь все предельно просто! Вот так выглядит исходный код протокола Open Graph:
который размещается в коде страницы, в разделе <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-оптимизатора при работе с биржами "лайков", которые хоть и не приносят ощутимого ссылочного эффекта, но позволяют несколько ускорить индексацию/переиндексацию при продвижении сайта. Например:
Open Graph для WordPress, Opencart, Joomla
Для самых популярных cms-систем существуют уже готовые плагины, помогающие реализовать внедрение разметки Open Graph без привлечения программистов.
Например для WordPress этот SEO-плагин можно скачать тут. Для Joomla вы найдете плагин по этой ссылке, ну а для OpenCart предлагаю взять его здесь.
Сделайте свой ресурс популярным не только в поиске, а и в социалках. Получайте безграничное количество трафика и не забудьте подписаться на нашу рассылку, чтобы регулярно получать свежие и полезные статьи на различные темы с рекомендациями по улучшению вашего сайта!
