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

Сегодня поговорим о пользе микроразметки Open Graph, а также о том, как добавить ее на сайт.
Ни для кого не секрет, что Facebook является самой популярной социальной сетью в мире и второй по популярности в рунете. Практически у каждого сайта есть страница или группа в Facebook, которые пополняются либо вручную, либо автоматически новыми постами.
Но, вот беда – если в эту социальную сеть добавлять анонс нового поста, он создает его, как захочет.
Почти никогда не удается прикрепить к нему нужное изображение, вместо картинки в анонсе может отобразиться логотип или добавится случайная картинка с какого то анонса, расположенного на странице, либо, вообще, левая, которой и на сайте то нет и, которая никак не связана с темой поста.
Вместо заголовка может появиться название какой-то категории, а в краткое описание может попасть текст из любого места станицы, например из комментариев, который не отражает суть статьи и только насмешит пользователей.
Из за этих особенностей Facebook приходится анонсы добавлять вручную, что занимает много времени.
Похожая проблема возникает при добавлении анонсов в Одноклассники.
Только там, при добавлении картинки, появляются стрелки, позволяющие выбрать нужное изображение – это тоже не очень удобно, так как приходится пересматривать все изображения со страницы, пока не найдешь нужное.
Решением этой проблемы является добавление в файлы wordpress темы микроразметки 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" />

Как узнать ваш ID на Фейсбуке?

На самом деле свойств в 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 по ссылке ниже

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

Открыть ↓

Только для подписчиков

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

Помощь в разблокировке » Инструкция по разблокировке »

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

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

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

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

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