Лого www.SiteHere.ru

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

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

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

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

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

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

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

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

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

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

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

Валидация микоразметки Open Graph

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

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

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

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

Open Graph сниппет в социальной сети

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

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

  • 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. Реальный пример микроразметки

Реальный пример микроразметки Open Graph

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

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

Результат сниппета

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

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

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

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

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

Микоразметка 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

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

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

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

Содержание

Вывод

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

Успехов!

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

Микроразметка Open Graph — как получать больше посетителей из социальных сетей? 4.22/5 (84.44%) 9 голос(ов)

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
11 комментариев к записи
  • Василий

    Полезная статья. Юрий, в плагине All in one SEO Pack также присутствует возможность добавления разметки OpenGraf, вкладка "Социальные настройки".

     
  • Максим Зайцев

    Юрий, спасибо за полезную статью. Многие не то, что не задумываются о таких нюанса, а просто не знают об этом. Хотя внедряется микроразметка довольно легко. И Василий правильно дополнил, в плагине All in one SEO Pack можно подключить дополнительный модуль "Социальные мета" и выполнить настройки микроразметки OG.

     
    • Юрий Немец

      Спасибо, Максим. Возможно, кто-то не пользуется данным плагином. Для этого я привел в статье список других плагинов. В статье добавил ссылку и на этот плагин 😉 .

       
      • Максим Зайцев

        Теперь статья идеальная! broken heart Желаю успеха!

         
  • Сергей

    Юрий, подскажите пожалуйста, плагин Yoast SEO "дружит" с ВКонтакте?

     
    • Юрий Немец

      Здравствуйте, Сергей!

      Я рассказал в статье о возможности данного плагина, а также приложил наглядный скриншот. Если Вы заполните все поля как на скриншоте, тогда социальная сеть "подцепит" данную информацию.

       
      • Сергей

        Спасибо, Юрий. Буду тестить!

         
  • Артем

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

     
  • Антон

    Спасибо за статью всё разложено по полочкам! Продолжаю следить за появлением материала и постепенно улучшать свой сайт (добавил микроразметку schema.org). Сам, честно говоря, Open Graph не пользуюсь, так как в большинстве сервисов «Поделиться материалом» параметры можно добавлять через внутренние атрибуты, что бывает гораздо удобней.

     
  • Алексей

    спасибо за статью! давно искал качественный материал по микроразметке, т.к. собираюсь внедрять на своем сайте (WordPress). Знакомый внедрил на своем сайте и увидел рост в числе переходов из соц.сетей + прирост подписчиков в группу ВК увеличился. Так что всем рекомендую не пренебрегать микроразметкой! 🙂

     
    • Юрий Немец

      Спасибо, Алексей 🙂

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *