Блог3 мин. чтения1143 просмотра

Как работает Open Graph?

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

Как работает Open Graph?

Доказано: семантическая разметка облегчает взаимопонимание между администраторами сайтов и их посетителями.

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

  • ВКонтакте,
  • Skype,
  • Google+,
  • Twitter,
  • Pinterest,
  • LinkedIn и др.

Зачем нужны красивые ссылки

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

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

Привлекательная ссылка – явный критерий успеха кликабельности и эффективности продаж.

Использование Open Graph

Внедрив в код страницы метатеги Open Graph, можно получить корректное и красиво оформленное превью ссылки.

Сайт разработчика предлагает широкий ряд тегов (лишь 5 из которых обязательны). Так, информативное превью выглядит следующим образом:

Как работает Open GraphКак работает Open Graph

Рассмотрим каждый тег 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Как работает Open Graph

Open Graph аналоги

На выбор представлены и другие разметки микроданных, так, наиболее известные и востребованные словари:

  • Microformats.org (узкоформатный словарь);
  • Schema.org (широкие возможности микроразметки);
  • Dublin Core (стандартизированный ГОСТ Р 7.0.10-2010 словарь).
Подпишитесь на полезные материалы по интернет-маркетингу
Нажимая на кнопку, вы даете согласие на обработку ваших персональных данных согласно политике конфиденциальности
Комментарии
  • Гость

    Познавательная статья! Попробуем установить один из плагинов и протестить.

  • Гость

    Спасибо за хороший материал, разложено все по полочкам. Слежу за вашими статьями уже давно)