Микроразметка Open Graph — как получать больше посетителей из социальных сетей?

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

Хочу Вас немного обрадовать, потому что микроразметка Open Graph технически внедряется намного легче, чем микроразметка Schema.org. Как помните, как внедрить на свой сайт микроразметку Schema.org мы рассматривали в прошлой статье:

• (практика) Внедряем микроразметку Schema.org на свой сайт

А если Вы узнали впервые о микроразметке из данной статьи, то рекомендую обязательно прочитать следующую статью, где я рассмотрел несколько видов микроразметки и для чего они предназначены:

• Самые популярные виды микроразметки сайта

Содержание

• Проверяем валидацию микроразметки Open Graph
• Шаг 1. Что необходимо указать в микроразметке?
• Шаг 2. Реальный пример микроразметки
• Шаг 3. Микроразметка Open Graph для CMS

Давайте повторим, для чего необходима данная микроразметка и зачем стоит в этом разобраться.

Простой пример и сама проблема: практически каждый владелец сайта на своем сайте под каждой статьей устанавливает кнопки социальных сетей, по клику на которые, происходит репост анонса в соответствующей социальной сети.

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

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

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

Пора сделать небольшую микроразметку, чтобы Вы увидели как это работает на практике!

Проверяем валидацию микроразметки Open Graph

Как при проверке микроразметки Schema.org, здесь также можно проверить правильно проверки данной микроразметки с помощью данного валидатора:

• Валидатор микроразметки от Yandex

Здесь Вы увидите ошибки и упущенные свойства. Здесь лучше всего как в случае с микроразметкой Schema.org сначала вставить небольшой код и проверить его, а уже потом внедрить на полноценный сайт. Чтобы Вы четко осознавали что значит каждая строка и не было лишнего мусора.

Шаг 1. Что необходимо указать в микроразметке?

Начнем с наглядного изображения, чтобы Вы понимали как именно будет выглядеть сниппет в социальной сети. Для примера я буду рассказывать все на примере социальной сети Вконтакте.

То есть из изображения видно, что самые важные элементы это:

• og:title — отвечает за вывод заголовка статьи, что также является текстом ссылки;
• og:url — ссылка на статью. Она также появляется еще и для изображения. То есть по клику на изображение также человек перейдет по ссылке, как и по названию под изображением;
• og:image — это то самое изображение, при клике на которое человек также переходит по ссылке. Тут хочу рассказать один маленький секрет, который позволит Вам увеличить количество кликов в социальной сети. Это величина изображения! Чтобы сделать изображение на всю ширину поста в социальной сети, его размер должен быть больше 537px;
• og:description — это небольшое текстовое описание, которое находится ниже заголовка записи.

Это действительно большая часть свойств, которые необходимо постоянно заполнять. Но есть еще одно обязательное свойство, без которого валидатор будет "ругаться" и выдавать ошибки. Вот это свойство:

• og:type — это тип страницы. То есть то, что на ней расположено.

Также есть и необязательные свойства:

• og:site_name — здесь необходимо вписать название Вашего сайта;
• og:locale — указываем язык. По умолчанию английский;
• og:audio или og:video — чтобы указать информацию об аудио или видео, которое есть на странице;
• fb:app_id — специальный код, чтобы "связать" страницу со специальным приложением Facebook и в дальнейшем использовать эти данные, например, в виджете комментариев.

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

Шаг 2. Реальный пример микроразметки

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

Приведу сразу небольшой код, используя который Вы сможете сделать вот такой анонс в социальной сети:

А вот тот код, который необходимо разместить между тегами <head> и </head>:

1
2
3
4
5

<meta property="og:type" content="article">
<meta property="og:title" content="Как сделать привлекательный сниппет в соц. сети">
<meta property="og:url" content="https://sitehere.ru/mikrorazmetka-open-graph-kak-poluchat-bolshe-posetitelej-iz-socialnyx-setej">
<meta property="og:description" name="description" content="Здесь Вы найдете подробную инструкцию как создать микоразметку на своем сайте и получить больше кликов из социальной сети">
<meta property="og:image" content="https://sitehere.ru/examples/test/img/image-for-test-snippet-social.png">

Описание всех элементов Вы можете увидеть выше. Там я подробно расписал все обязательные необязательные пункты.

С разметкой понятно. Понятно что необходимо вставлять между тегами <head> и </head> в Вашем HTML документе. Поэтому с обычными лендингами проблем не возникнет. Вам лишь останется изменить информацию внутри атрибутов. Возникает вопрос, когда мы используем какую-либо CMS. Как быть в этом случае? Ведь там страницы формируются динамически. Об этом читайте далее.

Шаг 3. Микроразметка Open Graph для CMS

CMS существует различное множество. Самые популярные: WordPress, Joomla и Drupal. Но помимо систем управления контентом (CMS) для новостных сайтов, существуют CMS и для интернет-магазинов: Magento, Zen Cart или OpenCart. Для интернет-магазинов также необходимо создавать микроразметку для социальных сетей, чтобы пользователи делились "правильными" анонсами с друзьями.

Вот некоторые плагины, которые Вы можете использовать для CMS WordPress, чтобы создать данную микроразметку даже не зная код:

• Плагин "WP Facebook Open Graph protocol" — перейти на страницу с плагином
• Плагин "Facebook" — перейти на страницу с плагином
• Плагин "Yoast SEO" — перейти на страницу с плагином
• Плагин "All in One SEO Pack" — перейти на страницу с плагином

Мы используем на сайте плагин Yoast SEO и там есть специальная вкладка для каждой статьи, где можно ввести title, description и image. Для последней версии плагина (а на 25.01.2016 последняя версия 3.0.7) вкладка выглядит следующим образом:

Это касается плагинов, которые формируют микроразметку Open Graph для WordPress. А вот список плагинов и расширений для других CMS:

• Плагин для CMS "Joomla" — перейти на страницу с плагином
• Плагин для CMS "Drupal" — перейти на страницу с плагином
• Плагин для CMS "OpenCart" — перейти на страницу с плагином
• Плагин для CMS "Magento" — перейти на страницу с плагином
• Плагин для CMS "Zen Cart" — перейти на страницу с плагином

Надеюсь, сейчас у Вас не возникнет вопросов как сделать микроразметку Open Graph для любой CMS.

Вывод

На самом деле очень немногие заполняют данные теги. А ведь заполняя данные теги Вы делаете анонс своей статьи в социальных сетях более привлекательным. Поэтому стоит один раз в этом разобраться и просто ввести себе привычку заполнять эти поля.

Успехов!

С Уважением, Юрий Немец