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

Продвижение по трафику от 50 копеек за переход. Заказать

Open Graph или как привлечь трафик из социальных сетей

Подписаться
Больше интересностей из блога студии SEMANTICA
Получайте эффективные советы по интернет-рекламе и SEO-оптимизации вашего сайта
ВКонтакте:
Facebook:
Twitter:
 open graph разметка

Изначально социальные сети позиционировались как площадки для общения между людьми. С течением времени разработчики стали внедрять новые возможности, сайты стали более удобными, а это, безусловно, сыграло огромную роль в популярности их в повседневной жизни людей. Темпы роста пользователей продолжают бить рекорды. Узнать новости на интересующие тематики, найти курсы вязания или обучиться оригами, рецепты, семинары, заказ товаров, все это осуществимо в социальных сетях. Большинство компаний имеют свою страницу (зачастую на нескольких соц сетях), где делятся новостями со своей целевой аудиторией.

Не имеет значения, информационный или коммерческий у вас сайт, соц сети являются крупным и важным источником трафика.

Привлекает, прежде всего, как количество пользователей, так и возможность искать по возрасту, географическим параметрам и интересам.

Практически на всех сайтах есть специальные кнопки, позволяющие поделиться информацией с друзьями или в тематической группе. Этим уже давно никого не удивить. Но задумывались ли вы о том, что есть инструмент, позволяющий редактировать вашу внешнюю ссылку. Нет? тогда встречайте…

 

Что такое Open Graph

Open Graph— это протокол, который формирует внешний вид внешней ссылки в социальной сети. Самый простой пример — это поисковые строки Google и Яндекс (ya.ru).

73339ac318

 

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

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

0486959750

 

Сайт самостоятельно «выдергивает» любую картинку и текст, чаще всего то, что первое под руку попадет. Вероятность того, что ваша ссылка останется на странице, начнет приближаться к нулю, ровно с того момента, как только человек увидит результат. Что уж говорить о том, что кто-то её увидит вообще. Такие моменты нельзя пускать на самотек. Давайте разберемся, как же настроить отображение и внешний вид ссылки.

 

Open Graph разметка: от теории к практике

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

<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

 

 

Open Graph мета-теги для видео

Стоит упомянуть про мета-теги для видео, т.к. робот Яндекса индексирует страницы, где есть разметка Open Graph и использует это видео для выдачи в поиске (а это + к карме сайта). Вот основные мета-теги для видео:

 

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

 
<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>

 

open graph protocol

 

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

Также можно найти дополнительные настройки для каждой социальной сети отдельно (сам Open Graph используется такими сайтами, как Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest), т.к. иногда происходит сбой и может неверно отображаться картинка или часть текста. Существуют также плагины, которые могут проверить валидность кода og. Если у вас нет желания самому ковырять html-код, то в этом могут помочь специальные плагины для CMS — Joomla и Wordpress.

 

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

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

Задать вопрос по статье
Подпишись на нашу группу в VK и получай экспертные статьи прямо в ленту!

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