С развитием распространения интернета не стояли на месте поисковые системы и социальные сети. Эти вещи с каждый годом становятся все более взаимосвязаны. Например, SEO и SMM, стоит только посмотреть на различные издательства Republic, Cossa, VC.
Часто встречали такое, что когда копируете ссылку в определенную социальную сеть: Facebook, VK, Twitter, Одноклассники ссылка заменяется на какой-либо подставляемый заголовок, текст и картинку. Но откуда он берется? Сегодня я поведую вам об этой тайне.
Что такое Open Graph?
Open Graph – протокол, который позволяет сформировать необходимое превью при публикации ссылки в социальных сетях.
По-другому Open Graph называют словарь микроданных, который был разработан компанией Facebook специально для решения проблемы с отображением ссылок в соцсети.
На сегодняшний день Open Graph используется в Facebook, Вконтакте, Google+, Twitter, Linkedin, Pinterest. Например, Яндекс использует Open Graph для формирования заголовка сниппета и передачи данных в сервис Яндекс Видео.
Часто на многих сайтах встречается серия кнопок поделиться в различных соц сетях. Например, мы поделились Вконтакте, что произойдет?
На 2 страницах практически нет информации, но в случае с ссылкой Яндекса мы видим более информативный пост с внешней ссылкой и слоган (которого на странице нет), т.к. используются возможности 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.
Пример:
Читайте в нашем блоге: Как правильно прописать Robots.txt<meta property="og:title" content="Как настроить Яндекс Директ"/>
<meta property="og:description" content="В этой статье я расписал 10 способов как настроить Яндекс Директ."/>
<meta property="og:image" content="http://site.ru/images/yandex_direct.jpg" />
<meta property="og:type" content="article"/>
<meta property="og:url" content= "http://site.ru/blog/nastroyka_yandex_direct/" />
Дополнительные атрибуты 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 видео файла, который относится к описываемому объекту.
Существует и другие специфичные атрибуты разметок для различных типов объектов (type): Image (Изображения), Music(Музыки), Video(Видео), Article(Статьи). Но на них мы не будем более подробно останавливаться, основную суть я уже подчеркнул.<meta property="og:audio" content="http://site.com/intro.mp3" />
<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" />
Лучше покажу примеры оформления микроразметки Open Graph у популярных сайтов:
Популярное издательство Republic тоже не обходит социальные сети. Мне понравилось, что ребята подходят отдельно к оформлению в соцсетях. Помимо микроразметки они используют еще картинку с текстом, благодаря чему кликабельность может увеличиться в 2, а то и более раз. Все-таки людям свойственно обращать внимание на большие заголовки, вспомните газеты, журналы, где писали большими печатными буквами так же и тут.
Всем советую многое подчеркнуть из того, как публикуют СМИ ссылки на новости в группах и пабликах.
Как проверить Open Graph?
Здесь все просто – рассмотрит 2 самых популярных способа.
Проверяем вручную
Для этого заходим на сайт, где мы хотим проверить разметку OpenGraph и нажимаем “Посмотреть исходный код” или в Google Chrome это клавиши CTRL+U. Мы попадем в код страницы, далее нам необходимо нажать CTRL + F и написать в появшейся строке 3 символа: “og:”, где og – означает Open Graph. Нам подсветятся значения если они используются на сайте.
Использование сервиса Open Graph Check
Упрощу вам работу, есть сайт Open Graph Check (Загуглите сами если нужно). Перейдя на главную страницу сайта вам необходимо всего лишь вставить ссылку в поле и нажать далее и сервис автоматически выдаст вам все теги Open Graph, которые используются на сайте.
Читайте в нашем блоге: Как не сделать говносайт
Аналоги Open Graph
Помимо Open Graph существует много других микроразметок данных. Разберем самые популярные виды микроразметок:
- Микроформаты (Microformats.org). Данный вид разметки по большей части используется для определённых нужд (например, для разметки товаров используется микроформат hProduct, для кулинарных рецептов – свой hRecipe). Минус разметки Microformats –сложное внедрение, поэтому этот словарь применяется сегодня все реже;
- Schema.org – вид микроразметки, который активно используется в поисковых системах Google и Яндекс. Плюс такой разметки в том, что она содержит более миллиона характеристик и свойств.
Что касается других видов разметок, но они менее популярные и используются только в особых случаях.
Читайте так же про:
Что такое пузомерки сайта?
Все про алгоритм БМ25
Что такое ТИЦ?
Что такое Мета-тег Description?
Что такое Мета-тег Keywords?
Заключение:
Open Graph безусловно важна, в первую очередь с точки зрения привлечения трафика на сайт с социальных сетей. Ведь от того, как выглядит ссылка, будет зависеть кликнет на вас пользователь или нет, да что говорить, если самые посещаемые сайты используют данную разметку.
Так что не ленитесь, все в ваших руках! Успехов вам в настройке Open Graph и продвижении ваших ресурсов!
Если у вас остались вопросы ко мне, пишите, я на них отвечу!
![http://site.ru/images/yandex_direct.jpg"](http://site.ru/images/yandex_direct.jpg"){kind=link}