Open Graph в WordPress. Микроразметка для социальных сетей

Просмотров: 6 067

Как добавить, настроить и эффективно пользоваться микроразметкой Open Graph на сайте ВордПресс? Об этом мой сегодняшний пост. Протокол Open Graph в WordPress позволит вашей веб-странице красиво отображаться в социальных сетях. Протокол позволяет контролировать и указывать какие данные (заголовок, описание и изображение) будут взяты при расшаривании ссылок в социальных сетях.

Как настроить теги Open Graph Facebook для WordPress?
Добавляем Open Graph в WordPress

У вас установлены соцкнопки шеринга например (поделиться) от Яндекс? Значит вам нужно обязательно добавить метаданные Open Graph к вашим сообщениям и страницам, чтобы они отлично выглядели при публикации в социальные сети: Twitter, Facebook*, ВКонтакте, Pinterest, LinkedIn, Telegram, Одноклассники и другие. Или в мессенджеры например, WhatsApp, Viber, Slack.

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

Open Graph в WordPress. Микроразметка для социальных сетей 1

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

Вот так например, поделились ссылкой на статью в Твиттер без Open Graph. Выглядит не очень. Мало кто кликнет по ссылке:

Ссылка без микроразметки соцсетей
Ссылка без разметки

А здесь, вообще, соцсеть подтянула вместо изображения кнопку вверх. Иногда может подхватить рекламный баннер с боковой панели:

Запись без микроразметки для социальных сетей
Репост статьи без микроразметки

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

Красивый репост в Facebook*, статья с внедрённой разметкой Open Graph. Теги объясняют социальным сетям, какая информация содержится на странице. Правильно заполненные поля позволят сформировать привлекательный вид поста в ленте FB*:

Ссылка с микроразметкой OpenGraph
Вид в Facebook* с протоколом OpenGraph

В Twitter поделились моей статьёй с микроразметкой для социальных сетей:

Использование Twitter Cards в WordPress
Репост в Твиттер

Управляйте просмотром вашего контента в социальных сетях. Кстати, для блогохостинга Google Blogger вот инструкция. Давайте постить в соцсети правильно и красиво.

Как подключить Open Graph в WordPress

В наши дни хорошее присутствие в социальных сетях так же важно, как и присутствие в поисковых системах. Хорошая новость заключается в том, что вы можете контролировать внешний вид своего сайта в социальных сетях с помощью SEO плагинов.

Давайте посмотрим подключение микроразметки соцсетей к WordPress с помощью плагина. Функция Open Graph реализована во всех популярных SEO-плагинах. Её надо только активировать и настроить.

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

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

Интернет

Включить разметку Twitter Card и Open Graph на сайте WordPress можно с помощью известных SEO плагинов например, All in One SEO Pack, Yoast SEO или Rank Math.

Метаданные OpenGraph в Yoast SEO

Добавить метаданные OpenGraph в plagine Yoast SEO. Раздел - Социальные сети, вкладка Facebook*. Активируйте, если вы хотите, чтобы FB* и другие социальные сети отображали изображения и отрывок текста в предпросмотре, если кто-то поделится ссылкой на ваш сайт:

Добавить метаданные Open Graph на сайт WordPress
Настройки Open Graph Facebook*

Включили и настройте главную страницу сайта/блога. Впишите Заголовок, описание и загрузите изображение, используемые в мета-тегах Open Graph на главной странице сайта. А также, настройте URL-адрес изображения по умолчанию. Если страницей или записью поделятся (shared) и они не содержат изображений, то тогда будет использоваться эта картинка. Например, в FB* у меня главная страница нового блога выглядит так:

Заголовок, описание и изображение в мета-тегах Open Graph на главной странице сайта

Далее, настройте Твиттер. Вкладка Twitter. Активируйте, если вы хотите, чтобы Twitter отображал изображения и отрывок текста в предпросмотре, если кто-то поделится ссылкой на ваш сайт:

Активируйте, чтобы Twitter отображал изображения и отрывок текста в предпросмотре
Добавить метаданные Twitter

Twitter использует метаданные OpenGraph как и Facebook*, так что Заголовок, описание и изображение, будут браться из настроек FB*. А для Pinterest также достаточно включить OpenGraph на вкладке Facebook*. Здесь пока всё.

Микроразметка для социальных сетей в Rank Math SEO

Я использую этот многофункциональный плагин в блоге WordPress Mania и поэтому приведу его также в примере. В меню Rank Math - Заголовки и метаданные. OpenGraph миниатюра этот параметр позволяет установить картинку OpenGraph по умолчанию.

Если изображение для записи не установлено, то оно будет использоваться в качестве миниатюры по умолчанию, при публикации на Facebook*. Рекомендуемый размер изображения 1200 х 630 пикселей. Я использовал меньший размер:

Установить картинку OpenGraph для WordPress
Изображение по умолчанию для соцсетей

Если вы захотите изменить эскиз OpenGraph в будущем, наведите указатель мыши на загруженную картинку. Вы заметите наложение на изображении букву X в углу. Щелкните X, чтобы удалить изображение, а затем выберите новое.

Тип карты Twitter - опция позволяет вам установить Twitter Card по умолчанию для ваших сообщений. Эта карточка будет использоваться при публикации ваших сообщений в Twitter. Выбирайте с большим изображением. Отображение главной страницы блога в Твиттер с настроенным Open Graph плагин Rank Math SEO:

Как подключить и настроить Open Graph к WordPress
Twitter Card с большим изображением

Идём дальше. Стоит также упомянуть All in One SEO Pack. Многие используют его для SEO оптимизации сайта WP.

Внедрение разметки Open Graph плагин All in One SEO Pack

All in One SEO Pack включает специальный модуль Social Meta (Социальные мета) который вы можете активировать.

В плагине All in One SEO Pack - раздел "Модули" активируйте модуль "Социальные мета". Модуль "Социальные мета" добавит социальные метаданные к вашему сайту WP для лучшей интеграции его с социальными сетями:

Внедрение разметки Open Graph плагин All in One SEO Pack
Активируйте модуль Social Meta

Затем надо настроить основные параметры, которые можно найти на странице Социальные мета. Заполните поля в разделах: настройки OpenGraph для главной страницы, изображений, а также используйте отдельные настройки для Facebook* и Twitter. В данном плагине настроек по более:

Руководство для начинающих по Open Graph
Настройте социальные метаданные

Используйте для подсказок вопросительный знак ?. Подведите курсор мышки к нему и получите помощь. Всё легко.

Коллеги, а теперь давайте перейдём к следующему полезному уроку. Как использовать/управлять OpenGraph для отдельной записи или страницы. Можно полностью контролировать публикацию в соцсети вашей статьи. В каждом приведённом плагине есть вкладка социальных настроек. Можно заполнить мета теги для Facebook* и Twitter (заголовок, описание и установить любое изображение) в соответствии с содержанием материала.

Например, в Rank Math есть вкладка Соцсети. Предварительный просмотр в социальных сетях (Preview Snippet Editor). Здесь вы можете просматривать и редактировать миниатюру, заголовок и описание, которые будут отображаться, когда ваша статья будет опубликована в социальных сетях Твиттер и Facebook*. Вот, так всё это выглядит в новом блочном редакторе Гутенберг для этого поста. Вкладка FB*:

Социальные мета - настройки публикации в соцсети
Предварительный просмотр в социальных сетях

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

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

Загрузил новую картинку, нажав кнопку Add Image. В итоге: для FB другая картинка, заголовок и описание публикации:

Open Graph в WordPress. Микроразметка для социальных сетей 2
Настройка OG для отдельной записи

Такую же операцию можно проделать и для Твиттер. Вкладка Twitter. Или использовать данные из вкладки Facebook*.

Вкладки соцсетей для индивидуальных настроек метаданных, есть во всех рассмотренных плагинах. Действие одинаковые. В Yoast SEO, вкладка Социальные сети:

Open Graph в WordPress. Микроразметка для социальных сетей 3

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

Дамы и господа, а вдруг вы не используете на своём сайте SEO плагины. Тогда читайте ниже:

Open Graph плагин WordPress

Можно использовать специальные, отдельные модули Open Graph в WordPress. Смотрите на этой странице wordpress.org. Или введите в поиск по плагинам, в админ-панели, метку open graph и оп-ля. Выбирайте подходящий вам, ориентируйтесь по количеству установок (популярность) и как часто обновляются:

Open Graph и Twitter карты для WordPress
Результаты по запросу: open graph

Использование Open Graph плагина WordPress, чтобы добавить микроданные для социальных сетей на сайт, самый безопасный и правильный метод. Установка без плагина - только для опытных пользователей. Поэтому, друзья, я не советую начинающим использовать различные коды разметки соцсетей найденные в интернете. Не рискуйте.

В заключение

Добавление метаданных Facebook* Open Graph в WordPress - один из хороших способов привлечь больше посетителей/читателей на ваш веб-ресурс.

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

Расшаривание записью в социальные сети (ваши или пользовательские) могут дать дополнительный трафик на сайт WP. Главное: в соц-сетях важна визуальная привлекательность контента. И только так можно привлечь внимание пользователей при просмотре ленты новостей.

Надеюсь материал был полезен для вас. До новых встреч на страницах моего блога. Если, что то пропустил или где то есть ошибки, дайте знать в комментариях. Спасибо за внимание! Поделитесь постом и как раз проверьте мою разметку. Пока, пока!

*Компания Meta, которой принадлежит Facebook и Instagram, признана в России экстремистской организацией.


Оставьте комментарий