Вебинар: Сильные, продающие, завлекающие и прочие несуществующие типы текстов для соцсетей: рушим стереотипы и учимся писать заново - 8 ноября в 13:0 Узнать больше
Продвижение в социальных сетях с упором на рентабельность рекламной кампании
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!

Open Graph – это протокол, который формирует внешний вид внешней ссылки в социальной сети

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

Зачем нужна микроразметка Open Graph

Изначально протокол был разработан для Facebook, но сейчас используется во многих других соцсетях. Самый простой пример работы Open Graph – это ссылки на Google и Яндекс на странице ВКонтакте:

 

 

73339ac318
У Яндекса публикация выглядит более привлекательно благодаря использованию микроразметки. У Гугла пост получился совсем скромным. Но если данные сайты в представлении не нуждаются, то внешний вид ссылки на ваш ресурс имеет огромное значение.
Давайте представим, ваш посетитель решил поделиться вашим товаром или статьей, размещает ссылку у себя на странице и что мы видим?
0486959750

 

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

Что происходит, если вы используете протокол Open Graph:

  • на превью к ссылке пользователь видит релевантное изображение или видео;
  • пост можно сопроводить соответствующим текстом, слоганом и описанием;
  • публикация выглядит как полноценный самостоятельный объект.

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

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

Для того чтобы Open Graph работал, необходимо вписать дополнительные мета-данные в тегах <html> и <head>.

Основные теги Open Graph

  • <html prefix="og: ogp.me/ns#> — расскажем роботу о том, что мы используем протокол Open Graph;
    • og:title — данный тег указывает, какой заголовок будет у вашей ссылки в новостной ленте или статье;
    • og:description — по сути, это младший брат мета-тега <<meta description>>, но в нашем случае у нас нет ограничений и можно смело вместить больше 160 символов, хотя перегибать палку тоже не стоит;
    • og:type — этот элемент указывает какой тип у объекта, видео или статья (если объектов на странице несколько, то следует выбрать основной и указать его;
    • og:image — позволяет выбрать самостоятельно нужное изображение, просто указав URL;
    • og:url — канонический урл, который будет использоваться как постоянный идентификатор.

Также prefix="og: http://ogp.me/ns# можно указать в теге head

Теги для видео:

Вот основные теги для видеофайлов:

<html prefix="og: ogp.me/ns#

video: ogp.me/ns/video#

ya: https://yandex.ru/support/video/partners/open-graph.html >

 

Указываем используемые префиксы.

 
<head>
пишем название видео
  <meta property="og:title" content="Что такое Open Graph" />
url видео
  <meta property="og:url" content="http://site.ru/view/404/" />
указываем путь к видео плееру или файлу
  <meta property="og:video" content="http://site.ru/video/?clid=1111111&filmId=111111111" />
хорошо знакомый нам мета-тег, но тут мы можем не ограничивать себя 160 символами 
  <meta property="og:description" content="Open Graph” /> 

Теперь необходимо детально представить наше видео роботу:

указываем длительность ролика в секундах, при этом округляем до целого числа
  <meta property="video:duration" content="4878787787" />
пишем URL заставки видео
  <meta property="og:image" content="https://pp.vk.me/c625217/v625217969/1e4b/uFP6OCbCmjA.jpg" />
дата загрузки видео в формате ISO 8601
  <meta property="ya:ovs:upload_date" content="2016-03-22" />
 наличие возрастного ограничения 18+
 <meta property="ya:ovs:adult" content="false"/>
тип видео
  <meta property="og:type" content="video.other"/>
нужно указать какие кодеки доступны для формата видео
  <meta property="og:video:type" content="flash"/> 
</head>

Это не все доступные теги. С более полным списком можно ознакомиться на официальном сайте OpenGraph.

Также можно найти дополнительные настройки для каждой социальной сети отдельно (Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest) так.как иногда происходит сбой и может неверно отображаться картинка или часть текста.

Существуют также плагины, которые могут проверить валидность кода og. Если у вас нет желания самому ковырять html-код, то в этом могут помочь специальные плагины для CMS. Вот наиболее популярные варианты для WordPress:

А вот плагины для других CMS:

Как проверить разметку Open Graph

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

Также есть инструмент от Яндекс, который анализирует микроразметку. Работает также и для Open Graph. Валидатор разметки Yandex позволит вам отследить и исправить ошибки в настройках.

Экспертное мнение

Не секрет, что конкуренция во всех сферах и отраслях постоянно растет. И даже если у вас совсем новая идея, через некоторое время вы не будете одиноки. Получается, что Open Graph это протокол, который позволяет убить сразу двух зайцев (да, это возможно). Роботы поисковых систем видят ваши старания для пользователей, что, несомненно, скажется на «месте под солнцем», пусть и не совсем серьезно. И самое главное, для потенциального юзера ваша ссылка будет визитной карточкой, а их он видит достаточно, так почему бы не сделать её яркой, информативной?

Таргетированная реклама – Instagram – Вконтакте – Facebook – Одноклассники

Профессионально владеем таргетированной рекламой в социальных сетях и инструментами для запуска успешной кампании:

– Умеем привлекать подписчиков.
– Выгодно продаем товары и услуги.

Instagram – Вконтакте – Facebook – Одноклассники
– Привлекаем подписчиков на ваши страницы.
– Продаем ваши услуги и товары.

Достигаем обещанных показателей по договору!
Подпишись на обновления блога
Николай Эргашев SEMANTICA, менеджер по продажам бесплатный вебинар Чего ждать от 2019 года: каналы в интернет-рекламе для разных тематик Регистрируйся! 29 ноября в 13:00

Мы работаем не только в Моcкве, но и в других городах России: