Разметку Open Graph используют Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие сервисы. В Яндексе Open Graph используется для передачи данных в сервис Яндекс.Видео .
Сервис Яндекс.Видео распознает не только основные, но и многие другие метатеги, например, разные типы видео (сериалы, клипы, фильмы и т. д.), ограничения по возрасту или стране просмотра. В зависимости от выбранного типа можно также указывать дополнительные свойства объекта: название фильма, номер эпизода сериала, дату выпуска телешоу и другие. Так как для Яндекс.Видео нужны метатеги, которых нет в документации от Facebook, в сервисе используется свое расширение.
Кроме построения превью, стандарт Open Graph могут использовать разработчики приложений для публикации действий пользователей в Facebook. В таких публикациях можно указывать действующее лицо (пользователя), объект, действие с этим объектом и название приложения, с помощью которого это действие было произведено.
- Основные метатеги
- Дополнительные метатеги
- Структурированные метатеги
- Массивы
- Объекты
- Пример использования
Основные метатеги
В стандарте Open Graph одна страница описывает только один объект - человека, компанию или продукт. Для этого объекта и указываются все данные. Чтобы передать информацию сервисам, необходимо в HTML-код (в элемент head ) добавить следующие обязательные метатеги:
og:title - название объекта.
og:type - тип объекта, например, video.movie (фильм). Если у вас несколько объектов на странице, выберите один из них (главный). В зависимости от типа можно указать дополнительные свойства.
og:image - URL изображения, описывающего объект.
og:url - канонический URL объекта, который будет использован в качестве постоянного идентификатора.
Дополнительные метатеги
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 видео файла, который относится к описываемому объекту.
Структурированные метатеги
Некоторые метатеги могут иметь дополнительные (необязательные) метаданные. Такие метатеги содержат дополнительный знак : (двоеточие).
Например, og:image может содержать следующие метаданные:
og:image:url - URL изображения, описывающего объект (соответствует og:image ).
og:image:secure_url - дополнительный URL, если страница открывается по протоколу HTTPS.
og:image:width - ширина изображения в пикселах.
og:image:height - высота изображения в пикселах.
og:video может содержать такие же метаданные, как и og:image . Например:
\n\n\n\n
og:audio содержит только некоторые метаданные из вышеперечисленных:
\n\n
Массивы
Если метатег может содержать несколько значений, добавьте дополнительные meta-элементы на страницу. При возникновении конфликтов будут учитываться данные, указанные в первом элементе meta (сверху вниз).
\n
Укажите структурированные метатеги после основного метатега.
\n\n\n\n\n
где разметка означает, что на странице размещены 3 изображения: первое имеет размер 300x300, для второго изображения размер не указан, третье - 1000 пикселей в высоту.
Объекты
Чтобы передать данные об объекте, необходимо указать его тип с помощью метатега og:type :
В этом примере указан один из глобальных (общепризнанных) типов. Остальные типы указываются согласно синтаксису CURIE :
\n\n
Глобальные типы объектов группируются в вертикали. Каждая вертикаль имеет свое пространство имен. Значение метатега og:type для пространства имен всегда состоит из названия типа объекта и уточнения (< тип объекта:уточнение > ). Это позволяет избежать путаницы с типами, которые задаются пользователем и содержат знак : (двоеточие).
Музыка
Значения метатега og:type :
Music.song
music:duration (integer >=1) - длительность песни в секундах.
music:album (music.album, массив) - название альбома.
music:album:disc (integer >=1) - номер диска.
music:album:track (integer >=1) - номер трека.
music:musician (profile, массив) - имя исполнителя.
music:song - music.song - название песни.
music:song:disc (integer >=1) - номер диска (соответствует значению music:album:disc ).
music:song:track (integer >=1) - номер трека (соответствует значению music:album:track ).
music:musician (profile) - исполнитель песни.
music:release_date (datetime) - дата выпуска альбома.
music:song - соответствует значению music.song , которое указано в music.album .
music:song:disc
music:song:track
Видео
Значения свойства og:type :
Video.movie
video:actor (profile, массив) - актеры.
video:actor:role (string) - роли, которые исполняют актеры.
video:director (profile, массив) - режиссер.
video:writer (profile, массив) - сценарист.
video:duration (integer >=1) - длительность фильма в секундах.
video:release_date (datetime) - дата выхода фильма в прокат.
video:tag (string, массив) - теги (слова, фразы), связанные с фильмом.
video:actor - соответствует значению video.movie .
video:actor:role
video:director
video:writer
video:duration
video:release_date
video:tag
video:series (video.tv_show) - серия.
ТВ-шоу. Разметка соответствует значению video.movie .
Video.other
Видео, которое не относится к перечисленным категориям. Разметка соответствует значению video.movie .
Другие
Значения метатега og:type :
article:published_time (datetime) - дата публикации статьи.
article:modified_time (datetime) - дата последнего изменения статьи.
article:expiration_time (datetime) - дата, после которой статья считается устаревшей.
article:author (profile, массив) - автор статьи.
article:section (string)- тема (раздел), к которой относится статья (например, Технологии).
article:tag (string, массив) - теги (слова, фразы), связанные с этой статьей.
book:author (profile, массив) - автор книги.
book:release_date (datetime) - дата публикации книги.
book:tag (string, массив) - теги (слова, фразы), связанные с этой книгой.
profile:first_name (string) - имя.
profile:last_name (string) - фамилия.
profile:username (string) - ник (имя пользователя, под которым он зарегистрирован).
profile:gender (enum) - пол (male , female ).
Не имеет значений, кроме основных. Любая неразмеченная страница определяется как объект website .
Типы объектов
| Тип | Описание | Примеры значений |
|---|---|---|
| Boolean | Может принимать значения true или false , 1 или 0 | true, false, 1, 0 |
| DateTime | ISO 8601 | 2015-07-15, 15:05 |
| Enum | ||
| Float | ||
| Integer | ||
| String | Unicode | |
| URL | http://www.example.com |
2015-07-15, 15:05
Состоит из ограниченного множества постоянных строковых значений
64-битное число с плавающей точкой
1.234, -1.234, 1.2e3, -1.2e3, 7E-10
32-битное целое число. Может содержать все символы, которые соответствуют следующим форматам: 1234, -123
Последовательность символов стандарта Unicode
Все действительные URL, которые доступны по HTTP- или HTTPS-протоколу
http://www.example.com
Пример использования
Чтобы добавить информацию для формирования сниппетов, в HTML-коде страниц внутри элемента head укажите заголовок страницы и название сайта в свойствах og:title и og:site_name .
\n \n \n \n
Что такое Open Graph ? Для чего он используется? Как правильно его настроить? Попробуем разобраться в данном материале.
Зачем нам SMM и есть ли риски связанные с маркетингом в соц.сетях, подробнее.
Какие проблемы чаще всего возникают при добавлении таких кнопок? Самой распространенной проблемой является то, что в превю, которое размещается в соц.сети, прикрепляется не тот графический контент. Например, вместо фото со статьи, подтягивается рекламный банер, который размещается в тот момент на сайте.
Подобная проблема устраняется таки легко – с помощью дополнительного стандарта микроразметки страницы Open Graph. Последний был разработан компанией Facebook и его основная задача контролировать текстово-графический анонс, который формируется при добавлении ссылки в социальную сеть.
Практически Open Graph – это специальный протокол, который представляет собой особый набор мета-тегов. Они интегрируются в html-код страницы (в границах тега
) и задают необходимое отображение превью страницы сайта на ресурс соц.сети. Этот стандарт разметки страницы используется и другими не менее популярными социальными платформами. Это Вконтакте, Twitter, Google+, Яндекс.Видео, Pinterest, LinkedIn и другие.Что должен содержать html-код страницы сайта для корректного отображения превю в соц. сети?
“ og:description ” – содержит описание статьи (он отличается от традиционного мета-тега description тем, что дает возможность увеличить размер описания с 160 до 295 знаков);
“ og:image ” – ссылка на картинку, которая сопровождает статью;
“ og:type ” – указывает на тип материала: «article» – статья, «movie» – кино и другие;
« og:locale » – указывает локализацию (язык сайта), также это значение «ru_RU» используется автоматически;
« og:title » – показывает заголовок статьи;
« og:site_name » – тег обозначающий название сайта.
Существует
Это очень важная настройка. Каждый владелец блога WordPress, который хочет профессионально продвигаться на Facebook, должен настроить теги Open Graph. От этого зависит конверсия ссылок и престиж вашего блога.
Первоначально движок WordPress этих тегов не содержит, поэтому их надо настроить самостоятельно. Без них на Facebook будет отправляться очень некрасивая и порой непонятная информация. Приведу 1 пример. На скриншоте видны публикации после нажатия «Мне нравится» и комментирования на блоге Михаила Шакина . Картинки публикуются случайным образом, потому что не настроены теги. А представьте, если у вас на сайте есть рекламный блок с картинками!?
Эту картину можно наблюдать и на некоторых известных новостных ресурсах.
Что происходит, когда есть теги Open Graph?
Приведу пример моего сайта для продажи видеокурса . Я настроил картинку, заголовок и описание для кнопки «Мне нравится». Результат на скриншоте. Согласитесь, что такой пост привлекает внимание намного больше.
1-ый вариант. Самый простой. Плагин All in One SEO Pack
Этим плагином пользуюсь я на своем блоге. Его можно . Он позволяет сразу оптимизировать блог для поисковиков и для Facebook. Я остановился на этом плагине, потому что мне надо оптимизировать не только статьи блога, но и отдельные страницы видеокурса «Фан-страница: запуск». Если оптимизировать и статьи, и страницы блога вручную, это занимает время и требует навыков работы с PHP. Но благодаря тому, что плагин All in One SEO Pack позволяет настроить картинку, заголовок и описание для каждой статьи и для каждой страницы отдельно, я могу полностью контролировать информацию и для поисковиков, и для Facebook.
Настройка этого плагина стандарта. Скачиваете его на компьютер, устанавливаете себе на блог (Плагины -> Добавить новый -> Загрузить), нажимаете «Активировать». Затем заходите в «Параметры» -> «All in One SEO Pack» и заполняете поля «Заголовок сайта», «Краткое описание», «Адрес WordPress (URL)», «Адрес сайта (URL)» — это стандартные настройки плагина. Затем обязательно внизу нажимаете кнопку «Сохранить». Самое важное для нас — в настройках само́й статьи или страницы блога. Выглядят эти настройки вот так:
Если вы добавили новую страницу на блог, то для неё появится поле загрузки картинки чуть выше, чем поле «Title».
На сколько хорошо работает этот плагин, вы можете проверить, нажав на кнопку «Мне нравится» под этой статьёй. После этого на вашей стене Facebook появится первая картинка статьи и заголовок + описание, которые вы видели чуть выше на скриншоте. Переходим ко второму варианту.
2-ой вариант. Плагин Facebook Open Graph Meta
Этот вариант также прост как и предыдущий. Вы скачиваете (работу плагина я проверил, и также я знаю, что его автор — опытный разработчик, который ведёт свою страницу на Facebook), также как и в первом варианте загружаете на блог через панель управления и активируете. Я подробно остановлюсь на настройках этого плагина.
В панели управления слева заходите в «Настройки» -> «Facebook Open Graph». Вверху появится такая форма:
Первое поле «App Id»
можете пропустить. Во второе поле «Admins»
вставьте ваш личный id на Fаcebook. Чтобы узнать свой id, зайдите к себе в профиль и в адресной строке замените «www» на «graph». Например, в моём случае:
надо заменить
https://www.facebook.com/neoandrej
https://graph.facebook.com/neoandrej
Скопируйте id и вставьте его в поле «Admins» плагина. Затем в третье поле «Image Url» вставьте ссылку на картинку, которая будет отображаться по умолчанию на тот случай, если в какой-то статье блога не будет изображений или если это главная страница блога, или любая другая страница (не статья).
После этих действий нажимаете серую кнопку «Save» (Сохранить). Плагин почти готов к работе.
Зачем плагину нужен ваш id Facebook? Чтобы подключить статистику Facebook к вашему блогу, которая будет доступна в вашем аккаунте по этому адресу http://facebook.com/insights . Благодаря этой статистике, вы увидите данные по всем Facebook-плагинам, установленным на вашем блоге: кто нажимал, сколько раз, когда, где чаще/реже и другие важные данные. Подробно о том, как пользоваться этой статистикой я рассказал в своём платном видеокурсе «Фан-страницы: результат за 27 дней» .
Последний важный шаг. Вам необходимо вручную заменить тег в файле header.php на этот код:
>
В противном случае ваш блог может не понять метатеги Facebook. Чтобы отредактировать файл header.php, в панели управления слева зайдите во «Внешний вид» -> «Редактор» и справа найдите и нажмите на ссылку «Заголовок (header.php)». В самом верху кода вы увидите тег
(на скриншоте ниже), который надо заменить и сохранить изменения.
После этих действий плагин полностью готов к работе. Проверьте его действие, зайдя у себя в любую статью и нажав «Мне нравится». Потом посмотрите, какая информация появилась на вашей стене в Facebook.
3-ий вариант. Добавление и настройка тегов Open Graph вручную
Если вы привыкли всё делать и настраивать самостоятельно и вы любите работать с кодом WordPress, вам подойдёт, конечно, это вариант. Для начала нужно проделать те же действия, что и в предыдущем варианте — заменить стандартный тег на тот, что нам нужен. Открываете файл header.php и заменяете стандартный тег:
>
на этот код:
>
Следующий шаг — самый интересный . В этом же файле header.php перед закрывающим тегом вставляете код тегов Open Graph Facebook:
" /> ID)); } ?>" /> " /> " />
В этих тегах вам нужно заменить 2 значения:
«fb:admins» content=«ВАШ_ЛИЧНЫЙ_ID_FACEBOOK» — вставьте id вашего аккаунта на Facebook (как его найти, я объяснил выше);
«og:image» content=«http://ПУТЬ-К-КАРТИНКЕ/КАРТИНКА.jpg» — вставьте ссылку на картинку, которая будет отображаться по умолчанию, если в статье или на странице нет других картинок. Как правило, сюда вставляется ссылка на логотип.
Сохраняете изменения и проверяете работу тегов Open Graph, нажав на кнопку «Мне нравится» в любой статье блога.
Может быть ситуация, при которой картинка статьи всё равно публикуется некорректно или вся статья просто не отображается (как было у меня). Это значит, что функция wp_get_attachment_thumb_url() не работает. Тогда необходимо сделать следующие действия.
Замените этот тег:
ID)); }?>" />
на этот тег:
" />
Сохраните изменения. Затем справа в панели управления найдите ссылку на файл «Функции темы» (functions.php), откройте его и в конце кода перед знаком ?> вставьте следующий код:
Function catch_that_image() { global $post, $posts; $first_img = ""; ob_start(); ob_end_clean(); $output = preg_match_all("/ /i", $post->post_content, $matches); $first_img = $matches ; if(empty($first_img)){ //Определяет картинку по умолчанию $first_img = "http://ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg"; } return $first_img; }
Этот код описывает функцию catch_that_image() , которая находит первую картинку в статье блога и вставляет её ссылку в тег изображения Open Graph. Если в статье нет картинки, то эта функция использует изображение по умолчанию. Для этого вставьте ссылку нужного изображения в эту переменную:
$first_img = «http://ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg»;
Теперь сохраняйте изменения в файле functions.php, заходите на блог и проверяйте работу кнопок «Мне нравится». Всё должно работать корректно.
Результаты тестирования
Чтобы показать вам, как работают методы, которые описаны в статье, я создал тестовый блог . На блоге сделал несколько постов с 3-мя изображениями в каждом, добавил кнопки «Мне нравится». Протестировал работу кнопок до Open Graph и после.
Тест №1. Результат работы кнопки «Мне нравится» на блоге без тегов Open Graph и плагина All in One SEO Pack.
Тест №2. Результат работы кнопки «Мне нравится» на блоге после установки плагина Facebook Open Graph Meta.
Тест №3. Результат работы кнопки «Мне нравится» на блоге после настройки тегов Open Graph вручную.
Результаты говорят сами за себя. Желаю успешной настройки тегов Open Graph Facebook на вашем блоге. Применяйте шаринг профессионально и по максимуму.
Решение проблем
Если нужная картинка всё равно не показывается при публикации ссылки в Facebook, то проверьте размеры картинки. Если они меньше, чем 200х200 пикселей, то Facebook будет искать и подставлять картинку большего размера.
Ещё бывает такой глюк, что картинка отображается неправильно в опубликованном посте на Facebook даже при наличие тегов Open Graph. Выход очень простой. Копируете ссылку страницы блога, на которой установлена «неправильная» кнопка «Мне нравится». Вставляете её в дебаггер Facebook (
Open Graph - разработанный компанией Facebook протокол для того, чтобы правильно адаптировать содержание страницы в социальных сетях. Протокол Open Graph дает возможность присвоить метаданные важным объектам на веб-странице, после чего те воспринимаются социальными сетями как внутренний объект.
Теперь рассмотрим это на реальном примере. Если вы хоть раз делились какой-то публикацией в социальных сетях то замечали что обычно это выглядит так:
- Превью - изображение которое выводится в качестве превью к записи.
- Домен - URL адресс, ссылка, того чем вы делитесь.
- Навание - Заголовок той информации, которую вы собираетесь разместить.
- Описание - краткое содержание того, о чем информация.
Это пример обычной, правильной настройки Open Graph на сайте. Если вы правильно настроите у себя на сайте, то когда посетители сайта будут делится вашими записями в социальных сетях, ваши материалы будут иметь такой же вид.
В примере я показал Facebook и в начале упомянул тоже его, но Open Graph будет работать и в других социальных сетях аналогично, в том же Вконтакте, Google+, Одноклассниках и тд.
Если же не добавлять метатеги от Open Graph, то при попытке поделится ссылкой вы увидите следующую картину:
Как видите. результат схожий но с некоторыми моментами. Во-первых, в качестве перевью взят логотип сайта. Часто берется первая попавшаяся картинка, если социальные сети не могут определить картинку записи или лого. Иногда социальные сети, вообще не добавляют изображение. Домен и заглавие тоже указаны как и в предыдущем варианте, но краткого описания нет. Конечно же такой вариант хуже предыдущего. Возможно, не так страшно если ссылкой поделились один раз, но если публиковать новости в группе, то на всех публикациях будет одно и то же превью.
Я не зря выбрал свой сайт в качестве примера. На нем не подключен Open Graph, хотя новости часто публикуются в социальных сетях. Тема старая и все нет времени ее обновить, но скоро я это сделаю, установив новую тему. В ней уже будет и Open Graph, и микроразметка и еще много чего, к чему не доходили руки. Ну, а теперь, давайте рассмотрим как добавить Open Graph на свой сайт.
МЕТАтеги Open Graph
Open Graph имеет свои метатеги и как остальные они добавляются в шапку сайта, а именно между
Для начала, давайте я покажу как выглядят обычно метатеги Open Graph на сайте:
- og:type - указываем тип объекта, от него зависит то, какие дальше будут заданы свойства.
- og:image - указываем превью картинку нашей страницы.
- og:url - указываем ссылку на текущую страницу (ту где располагаются эти метатеги).
- og:title - указываем заголовок страницы.
- og:description - указываем краткое содержание страницы, статьи.
Еще часто добавляют тег og:site_name - в нем указывается название сайта.
Первые 4 метатегов являются основными и обязательными. Если вы решили добавлять протокол Open Graph, то они должны быть указанны в любом случаи. Последние og:description и og:site_name не обязателен, но наличие приветствуется, вы сами видели начале статьи примеры. Есть и другие теги которые можно добавлять к страницам сайта, более подробно о них можно узнать на сайте Ruogp.me .
К этой группе тегов можно добавить еще пару специальных метатегов для Facebook:
- fb:app_id - указывается айди приложения от Facebook.
- fb:admins - указывается айди администратора или администраторов через запятую.
Добавляется любой из этих тегов, нужны они для того чтобы вести статистику по взаимодействию с Facebook. Подробнее об этом можно узнать тут - Facebook developers . Если же это не надо то пропускайте.
Подключение Open Graph
По изложенному выше, думаю, вы поняли что для того чтобы добавить теги Open Graph, все что нужно - просто добавить пару строк в шапку сайта указав свои значения. Если у вас одностраничный сайт - то это не проблема, но если у вас блог, статейный и тд. сайт, то в ручную будет тяжеловато, да и не возможно практически. Если у Вас WordPress, то вам повезло. Вариантов добавления разметки у вас много.
Чтобы подключить Open Graph к WordPress, можно пойти двумя путями. Первый - установить плагин, второй - добавить самописную функцию. С плагином все просто, если вы любите их устанавливать то можете выбрать любой и добавить к своему сайту. Среди популярных плагинов имеющих в своем функционале и поддержка Open Graph в WordPres, я бы выделил:
- All in One SEO Pack.
- Yoast SEO
- Open Graph
Скорее всего, какой-то из первых двух у вас уже стоит, тогда этот вопрос у вас уже снят с повестки дня. Если же вы не хотите использовать плагины, то можно решить этот вопрос добавлением кода в файл функций. Тут остановимся по подробнее.
Перед тем как подключать метатеги, нужно включить поддержку Open Graph в WordPress. Сделать это можно двумя способами. Для начала нужно открыть файл вашей текущей темы header.php и во второй, скорее всего, его строке посмотреть на тег
Если вы видите примерно такое:
То можно добавить prefix="og: http://ogp.me/ns#" и все.Получится:
Если у вас так:
>
То можно или добавить то же самое или благодаря функции language_attributes , вывести в ней. Для этого открываете файл пользовательских функций function.php и добавляете в самый конец перед закрывающим тегом PHP ?> , а если его нет, то просто в самый конец - фильтр:
function opg_html($output){ return $output ." prefix="og: http://ogp.me/ns#""; } add_filter("language_attributes", "opg_html");Перед изменением function.php , обязательно сохраните его копию, чтобы в дальнейшем, в случаи ошибки, вернуть все как было.
Далее, после этого кода уже можно добавить функцию, которая и будет автоматически выводить и заполнять метатеги Open Graph. Создана максимально универсальной, чтобы хорошо справится с задачей. Выглядит она так:
Function facebook_open_graph(){
global $post;
global $wp;
//для ссылок
$current_url = home_url($wp->request);
//для description
if($excerpt = $post->post_excerpt){
$trim_words = strip_tags($post->post_excerpt);
} elseif($wptw = wp_trim_words(get_the_content(), 25)){
$trim_words = preg_replace("/[""]/", "", $wptw);
}else{
$trim_words = get_bloginfo("description");
}
//для изображений
$first_img = "";
$otimg = preg_match_all("//i", $post->post_content, $matches);
$first_img = $matches ;
if(empty($first_img)){
$first_img = get_bloginfo("template_directory"). "/images/defimages.jpg";
}
//общие meta-теги
echo "";
echo "";
if(has_post_thumbnail($post->ID)){
$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "medium");
echo "";
}else{
echo "";
}
echo "";
//meta-теги для статей, страниц
if (is_singular()){
echo "";
echo "";
}
else{
//meta-теги для главной, рубрики и остальных
echo "";
echo "";
}
}
add_action("wp_head", "facebook_open_graph");
Функция не маленькая, рассчитана на то что вы хоть немного разбираетесь в коде и если это не так, вернитесь к варианту с плагинами. Теперь давайте немного разберем основные параметры. Главные элементы выделены комментариями.
После добавления и настройки этой функции у вас должна появится микроразметка протокола Open Graph. Статья получилась не маленькой, надеюсь она была полезна вам и материал из нее поможет в развитии вашего сайта.
На этом все, спасибо за внимание. 🙂
Здравствуйте, друзья. Наверняка на каждом блоге установлены кнопки для социальных сетей Facebook, Vkontakte и др., и вам бы хотелось узнать, как можно управлять процессом добавления поста, т.е. какая именно картинка должна публиковаться и какое краткое описание статьи. Для этого нам понадобиться добавить разметку Open Graph на сайт. Это очень простая задача, мы это будем делать с помощью плагинов WordPress.
Что такое Open Graph
Open graph – это протокол, который позволяет с помощью добавления в html-код мета-тегов управлять тем, каким образом будет отображен контент в социальных сетях. Без этого пост в социальной сети может выглядеть так.
Согласитесь, выглядит как-то не очень.
Установка разметки Open Graph
В этом нам поможет замечательный плагин для WordPress – All in One SEO Pack. Вообще, я не перестаю удивляться на сколько это полезный и необходимый плагин. Действительно он соответствует своему названию «Все в одном», потому что в нем собрано много полезных штук для блога. Вот, например, я написал недавно статью о том, с помощью этого плагина.
Если плагин All in One SEO еще у Вас не установлен, и Вы не знаете как вообще устанавливаются плагины в WordPress, почитайте эту .
После установки плагина надо активировать модуль «Социальные мета». Для этого в главном меню админки сайта щелкаем по пункту “All in One SEO ”, далее «Управление модулями ».
В открывшемся окне выбираем нужный модуль и жмем на кнопочку «Activate ».
Всё, модуль уже работает, осталось только его настроить под себя.
Теперь нам нужно настроить изображение, которое будет появляться, когда кто-нибудь будет делиться вашей статьей в социальных сетях. Переходим в главное меню админки сайта, щелкаем на пункте “All in One SEO », далее «Социальные мета ».
В открывшемся окне переходим в секцию «Настройки изображения» и выбираем источник для OG:Image. У меня на блоге выбрано «Миниатюра записи». Также можно настроить изображение по умолчанию. Оно понадобится в том случае если в статье вообще нет картинок.
На этом настройка завершена. Если вы больше ничего не меняли в настройках, то описание статьи (og:description) будет браться из Вашего основного Description, что нам как раз и надо.
Также существуют отдельные плагины WordPress для формирования Open Graph – “Open Graph Protocol Framework”, “Facebook Open Graph, Google+ and Twitter Card Tags” и множество других. Выбирайте по своему усмотрению.
Проблемы с кешированием
Возможно при тестировании плагина вы столкнетесь с тем, что если один раз уже запостили статью, то даже если после этого будете менять настройки в модуле «Социальные мета» плагина All in One SEO, отображение контента в социальных сетях останется неизменным. Это значит, что ссылка на статью была закеширована. Для удаления ее из кэша разработчики Facebook и Вконтакте придумали специальные инструменты.
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows