Наш телефон 8 800 555 36 60

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

Евгения
Евгения
SEO-специалист

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

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

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

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

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

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

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

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

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

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

Рассмотрим каждый тег 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 аналоги

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

  • Microformats.org (узко форматный словарь);
  • Schema.org (широкие возможности микроразметки);
  • Dublin Core (стандартизированный ГОСТом Р 7.0.10-2010 словарь).