Перезвоните мне
  1. Главная страница
  2. Блог
  3. SEO-блог
  4. Что такое OpenGraph и как его настроить?
OpenGraph - как правильно настроить

Голосов: 1, Рейтинг: 5

02.10.2017

Что такое OpenGraph и как его настроить?

С развитием распространения интернета не стояли на месте поисковые системы и социальные сети. Эти вещи с каждый годом становятся все более взаимосвязаны. Например, SEO и SMM, стоит только посмотреть на различные издательства Republic, Cossa, VC.

Часто встречали такое, что когда копируете ссылку в определенную социальную сеть: Facebook, VK, Twitter, Одноклассники ссылка заменяется на какой-либо подставляемый заголовок, текст и картинку. Но откуда он берется? Сегодня я поведую вам об этой тайне.

Что такое Open Graph?

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

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

На сегодняшний день Open Graph используется в Facebook, Вконтакте, Google+, Twitter, Linkedin, Pinterest. Например, Яндекс использует Open Graph для формирования заголовка сниппета и передачи данных в сервис Яндекс Видео.

Часто на многих сайтах встречается серия кнопок поделиться в различных соц сетях. Например, мы поделились Вконтакте, что произойдет?

OpenGraph Вконтакте

Вконтакте не подтягивает Open Graph потому что он не указан сайте

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

Open Graph во Вконтакте

Так выглядит Open Graph при вставлении ссылки вручную

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

Open Graph как использовать?

Итак, чтобы вашу страницу смогли считывать социальные сети необходимо добавить определенные мета-теги. Эти мета-теги будут размещаться в разделе <head></head> и теге <meta>. Давайте разберем базовую Open Graph разметку, то есть 4 основных атрибута для каждой страницы.

  • og:title – в атрибуте указывается заголовок страницы, который вы хотите видеть при отображении в превью социальных сетей;
  • og:type – атрибут указывает тип объекта: страницы или видео. В зависимости от типа, можно задать другие свойства которые могут быть необходимы;

  • og:description – Краткое описание вашей страницы или видео. Чем-то напоминает Meta-tag description, но без символьных ограничений;
  • og:image - URL-адрес изображения, которое можно указать самостоятельно просто добавить в этот атрибут ссылку;
  • og:url - URL-адрес страницы, который использоваться в качестве постоянного ID.

Пример:

<meta property="og:title" content="Как настроить Яндекс Директ"/>

<meta property="og:description" content="В этой статье я расписал 10 способов как настроить Яндекс Директ."/>

<meta property="og:image" content="http://site.ru/images/yandex_direct.jpg&quot; />

<meta property="og:type" content="article"/>

<meta property="og:url" content= "http://site.ru/blog/nastroyka_yandex_direct/&quot; />

Читайте в нашем блоге: SEO специалист: что нужно знать о нем

Дополнительные атрибуты Open Graph

Разберем следующие виды атрибутов, которые не обязательны и зависят от спецификации вашего объекта.

  • og:audio — URL звукового файла, который относится к описываемому объекту;
  • og:determiner — слово, которое должно быть перед названием объекта в предложении. Оно может быть указано как: a, an, the, "", auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать;
  • og:locale — язык описания объекта в формате язык_страна. По умолчанию используется значение en_US;
  • og:locale:alternate — массив дополнительных языков, на которых доступно описание объекта;
  • og:site_name — название сайта, на котором размещена информация об объекте;
  • og:video — URL видео файла, который относится к описываемому объекту.

<meta property="og:audio" content="http://site.com/intro.mp3&quot; />

<meta property="og:description" content="Directed by Christopher Nolan.  With Matthew McConaughey, Anne Hathaway, Jessica Chastain, Mackenzie Foy. A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.." />

<meta property="og:determiner" content="a" />

<meta property="og:locale" content="en_GB" />

<meta property="og:locale:alternate" content="fr_FR" />

<meta property="og:locale:alternate" content="es_ES" />

<meta property="og:site_name" content="IMDb" />

<meta property="og:video" content="http://site.com/trailer.mp4&quot; />

Существует и другие специфичные атрибуты разметок для различных типов объектов (type): Image (Изображения), Music(Музыки), Video(Видео), Article(Статьи). Но на них мы не будем более подробно останавливаться, основную суть я уже подчеркнул.

Лучше покажу примеры оформления микроразметки Open Graph у популярных сайтов:

Open Graph СМИ Republic

Пример Open Graph СМИ Republic

Популярное издательство Republic тоже не обходит социальные сети. Мне понравилось, что ребята подходят отдельно к оформлению в соцсетях. Помимо микроразметки они используют еще картинку с текстом, благодаря чему кликабельность может увеличиться в 2, а то и более раз. Все-таки людям свойственно обращать внимание на большие заголовки, вспомните газеты, журналы, где писали большими печатными буквами так же и тут.


Всем советую многое подчеркнуть из того, как публикуют СМИ ссылки на новости в группах и пабликах.

Как проверить Open Graph?

Здесь все просто – рассмотрит 2 самых популярных способа.

Проверяем вручную


Проверка OpenGraph

Проверка OpenGraph ручным способом

Для этого заходим на сайт, где мы хотим проверить разметку OpenGraph и нажимаем “Посмотреть исходный код” или в Google Chrome это клавиши CTRL+U. Мы попадем в код страницы, далее нам необходимо нажать CTRL + F и написать в появшейся строке 3 символа: “og:”, где og – означает Open Graph. Нам подсветятся значения если они используются на сайте.

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

OpenGraph Checker

Использование сервиса OpenGraph Checker

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

Читайте в нашем блоге: Что такое Геозависимость?

Аналоги Open Graph

Микроразметка Schema.org и OpenGraph

Помимо OpenGraph, также есть Schema.org

Помимо Open Graph существует много других микроразметок данных. Разберем самые популярные виды микроразметок:

  • Микроформаты (Microformats.org). Данный вид разметки по большей части используется для определённых нужд (например, для разметки товаров используется микроформат hProduct, для кулинарных рецептов – свой hRecipe). Минус разметки Microformats –сложное внедрение, поэтому этот словарь применяется сегодня все реже;
  • Schema.org – вид микроразметки, который активно используется в поисковых системах Google и Яндекс. Плюс такой разметки в том, что она содержит более миллиона характеристик и свойств.

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

Читайте так же про:

Что такое геозависимость?

Что такое noindex, nofollow?

Зачем нужен meta name robots?

Что такое пузомерки сайта?
Все про алгоритм БМ25
Что такое ТИЦ?
Что такое Мета-тег Description?
Что такое Мета-тег Keywords?


Заключение:

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

Так что не ленитесь, все в ваших руках! Успехов вам в настройке Open Graph и продвижении ваших ресурсов!

Если у вас остались вопросы ко мне, пишите, я на них отвечу!



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить Яндекс Директ в 2018 году?

Получите бесплатные фишки по SEO продвижению

Комментарии



Оставьте email и мы пришлем вам статью

Видеоролики

Хотите узнать, как продвинуть свой бизнес в 2019 году?

Ответьте всего на 6 вопросов и получите пошаговый план по интернет продвижению Вашего бизнеса

Пройти опрос

Видеоролики



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить Яндекс Директ в 2019 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить Google Adwords в 2019 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить рекламу в Instagram в 2019 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как продвинуть сайт в 2019 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить таргет в 2019 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как раскрутить соц. сети в 2019 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить контекстную рекламу в 2019 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить рекламу в Одноклассниках в 2019 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить рекламу в Facebook в 2019 году?



Пора что-то менять!

Хотите, мы расскажем Вам про комплексное продвижение сайта в 2019 году?