Микроразметка Open Graph для Facebook

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

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

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

Но, вот беда – если в эту социальную сеть добавлять анонс нового поста, он создает его, как захочет.

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

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

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

Решением этой проблемы является добавление в файлы wordpress темы микроразметки Open Graph. Разметку Open Graph замечательно понимают все социальные сети, в том числе и самая популярная соц сеть рунета ВКонтакте.

Микроразметка Open Graph

Что такое микроразметка Open Graph?

Это простая разметка контента для корректного добавления его в социальные сети (СС), в частности на Facebook, хотя все остальные социальные сервисы (Вконтакте, Google+, Twitter, LinkedIn, Pinterest и прочие) тоже ее понимают.

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

Разметка происходит с помощью специальных тегов META.
Добавить их на сайт можно с помощью плагина opengraph - https://wordpress.org/plugins/opengraph/ или вручную.

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

Обязательные данные, которые должны присутствовать в тегах:

  • og:title — название объекта.
  • og:type — тип.
  • og:image — URL изображения.
  • og:url — URL.

Тег og:type может содержать различные типы сущностей:

  • Music (подтипы music.song, music.album, music.playlist, music.radio_station) — у песен можно указать длительность, альбом, исполнителя, у альбомов — песни, исполнителей, даты релиза.
  • Video (video.movie, video.episode, video.tv_show, video.other) — у фильмов могут быть указаны актеры и их роли, режиссеры, сценаристы, продолжительность.
  • No vertical (website, article, book, profile) — здесь указаны те типы, которые не подходят к вышеперечисленным категориям. У статьи можно указать теги, автора, даты публикации. У профайлов — пол, фамилию, имя.

Дополнительные данные:

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

Перейдем к практике …

Как добавить основные мета теги микроразметки Open Graph:

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

<meta property="og:image" content="1.png" />

Изображение должно быть не меньше 200px, а лучше 400-600px.
Очень маленькие изображения, как правило, отправить в соц сети не получается.

Заголовок
Этот тег содержит заголовок статьи или страницы:

<meta property="og:title" content="Микроразметка Open Graph для Facebook"/>

URL
URL это канонический адрес данной страницы:

<meta property="og:url" content="" />

Тип
Содержит тип объекта, который вы хотите присвоить отправляемой информации:

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

Кроме этих основных свойств, можно добавить еще несколько:

Название сайта

<meta property="og:site_name" content="Название" />

Язык сайта

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

На самом деле свойств в Open Graph множество, но выше перечисленных будет вполне достаточно.

Еще несколько специальных свойств микроразметки Open Graph именно для Facebook:

В документации написано, что, для того, чтобы добавить эти свойства, сначала необходимо:

1. Создать Facebook App ID
2. Настроить приложение для работы с Facebook

1. Узнать ID вашего профиля и App ID

ID администратора

<meta property="fb:admins" name="admins" content="ID-admin" />

В качестве свойства нужно указать ваш ID в Facebook.

APP ID

<meta property="fb:app_id" name="app_id" content="ID-приложения" />

Здесь нужно указать APP ID – ID приложения.

Страница профиля

<meta property="fb:profile_id" name="profile_id" content="https://www.facebook.com/profile-page" />

А здесь нужно указать адрес вашего профиля в Facebook.

В интернете я нашла еще один способ узнать ID пользователя на Фейсбук:

В адресной строке https://www.facebook.com/grupp.ru нужно заменить www на graph. Вот так: https://graph.facebook.com/grupp.ru

После этого перейдите по ссылке и увидите свой ID.

Самое странное, что при перезагрузке страницы этот ID меняется.

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

Проверьте, какой способ сработает у вас.

Что делать с этими мета тегами?

Вставьте их в тег head файла header.php.

Кроме этого, в тег html того же файла нужно добавить

prefix="og:http://ogp.me/ns# website:http://ogp.me/ns/website#
article:http://ogp.me/ns/article# profile:http://ogp.me/ns/profile# 
fb:http://ogp.me/ns/fb#"
 
Вот так:
 
<html prefix="og:http://ogp.me/ns# website:http://ogp.me/ns/website# 
article:http://ogp.me/ns/article# profile:http://ogp.me/ns/profile# 
fb:http://ogp.me/ns/fb#" lang="ru">

2. Осталось только настроить приложение

Для этого нужно добавить в код файла footer.php определенный js и заменить в нем APP ID на ваш собственный.

Скачайте архив с файлами микроразметки и скрипта по ссылке ниже.

Также, можно на странице созданного приложения, нажать на кнопку Choose a Platform, после чего получите готовый скрипт, который останется только добавить на сайт.

Вот и все, теперь ваши анонсы должны корректно отображаться в социальных сетях.

Все, что мы рассмотрели, это примеры мета-тегов микроразметки Open Graph в том виде, как они должны отображаться в коде страницы.

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

↓ Мои подписчики могут скачать файл с мета-тегами Open Graph для wordpress по ссылке ниже

Уже скачали 23 раз(а)

Открыть ↓

Теперь об ошибках:

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

Дебагер Facebook

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

Проверка ошибок в Дебагере Facebook

В полученных результатах ищите ошибки, выделенные красным, примерно такие

Ошибки в Дебагере Facebook

И исправьте их.

Что такое микроразметка и как добавить ее на сайт:

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Добавила код , фесбук упорно не видит картинку в посте. Только в сайт-баре.
    Код выводится такой: <img class="size-full wp-image-1954 alignleft" src="http://nauspeh.ru/wp-content/uploads/Планируем-успех-2016-года.jpg"

    почему блогпостинг, а не имж?

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

  2. Спасибо большое.

  3. Спасибо большое за статью, интересно было бы по joomla болше материала! Очень рад знакомству и надеюсь на дружбу! Андрей Олефиренко, сайт http://joomlabloger.ru/

  4. Здравствуйте, Людмила! Пришел на почту анонс вашей новой статьи и вот я у Вас. Очень интересный и полезный материал. Обязательно, прямо сейчас займусь разметкой на своем блоге. Если возникнут вопросы, буду спрашивать, не обижайтесь. Спасибо!!!

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 195
Отзывов 4298