Как настроить Open Graph и Twitter-карты для WordPress

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

При помощи Open Graph вы можете без труда контролировать внешний вид заголовка, картинки, описания и многое иное при совместном использовании(«Поделиться») через социальные каналы. Возможно, вы знакомы с обычными мета-тегами, такими как тег title и теги описания. Но многие блогеры не знают, что существуют иные метатеги, специфичные для социальных сетей Google+, Facebook, Twitter и Pinterest. Причина, по которой данные веб-сайты социальных сетей начали использовать метаданные: необходимость правильно выводить содержимое вместе со связанными картинками, описаниями и ссылками. Определив данные метатеги, вы можете легко убедиться, что содержимым проще делиться и он прекрасно выглядит в соцсетях.

Каждый веб-сайт социальной сети имеет в себя различные предпочтения относительно тегов. Pinterest и Google+ предпочитают теги Schema, но также поддерживают теги Open Graph Protocol, которые также используются и Facebook.

Теги Open Graph идут между разделами <head> </ head> веб-страницы. Наиболее часто используемые теги:

  • og:title
  • og:description
  • og:url
  • og:site_name
  • og:image
  • og:type.

Вот пару примеров, как формируется информация о статье в соцсетях при помощи Open Graph.

Как изменить Open Graph и Twitter-карты для WordPress

Пример Pinterest Rich Pin

Как изменить Open Graph и Twitter-карты для WordPress

Пример Google+ Поделиться

Как изменить Open Graph и Twitter-карты для WordPress

Пример использования Facebook Open Graph

Как изменить Open Graph и Twitter-карты для WordPress

Пример карты Twitter

Twitter определил собственные теги, известные как карты Twitter. Данные теги могут ссылкам предоставлять больше информации всякий раз, когда их твитнут. Подобно тегам Open Graph, теги в Твиттере также идут между разделами <head> </ head> веб-страницы. Наиболее часто используемые теги Twitter:

  • twitter:card
  • twitter:site
  • twitter:creator.

Хотя вы можете легко добавлять метки Open Graph и Twitter Card вручную, на WordPress.org доступно много плагинов, которые могут даже начинающим посетителям добавлять теги в записи и страницы WordPress. Некоторые из лучших плагинов:

  1. SEO от Yoast
  2. Open Graph for Facebook, Google+ and Twitter Card Tags
  3. The SEO Framework
  4. JM Twitter Cards(только для карт Twitter)
  5. Open Graph Protocol Framework(только для меток Open Graph и рекомендуется для разработчиков).

В данной статье мы будем использовать встроенные настройки плагина Yoast SEO и определим специальные метатеги, которые дадут функция прекрасно смотреться записям в соцмедиа.

Примечание. Вы должны использовать только один плагин с аналогичной функциональностью. Если у вас установлен WordPress SEO Yoast, лучше изменить этот плагин, чем устанавливать плагин Open Graph for Facebook, Google+ и Twitter.

Шаг 1. Установите последнюю версию Yoast SEO

Рекомендуем установить последнюю версию Yoast SEO. Самый простой метод сделать это при помощи панели инструментов администратора WordPress в разделе Плагины-> Добавить новый и указать в строке поиска Yoast SEO.

Как изменить Open Graph и Twitter-карты для WordPress

Далее установите и активируйте плагин.

После активации вы увидите новую вкладку «SEO» в панели управления администратора WordPress. В Yoast SEO есть несколько замечательных возможностей, но сегодня рассмотрим вкладку Social(Социальные).

Шаг 2. Укажите ваши социальные профили

Как изменить Open Graph и Twitter-карты для WordPress

Чтобы изменить карты Open Graph и Twitter, перейдите в раздел SEO-> Социальный из панели управления WordPress. Сначала добавьте ссылки на социальные профили, чтобы помочь поисковым системам подтвердить, что профили действительно подключены к веб-сайту. Далее перейдите к разным социальным вкладкам.

Facebook

Как изменить Open Graph и Twitter-карты для WordPress

Ваш первый шаг – включить метаданные Open Graph для записей Facebook. Просто нажмите кнопку « Включено». Предполагаем, что вы добавили связанную с вами страницу Facebook на вкладке « Аккаунты ». Вы можете без труда добавить изображение по умолчанию, если планируете, чтобы на каких-либо страницах, на которых нет изображений, показывалось указанное изображение.

Twitter

Как изменить Open Graph и Twitter-карты для WordPress

Настроив записи для Facebook, пришло время заняться Twitter. Просто убедитесь, что данные карты Twitter Enabled(Включено). З атем выберите макет карты по умолчанию(резюме или резюме с большим изображением). Опять же, это будет связано с тэгом Twitter, который вы добавили на странице « Аккаунты».

Pinterest

Как изменить Open Graph и Twitter-карты для WordPress

Pinterest отличается, поскольку эта платформа использует проверку метатега. Перейдите в учетную запись Pinterest, наведите указатель мыши на значок посетителя и щелкните вкладку « Параметра ». Нажмите кнопку « Заявка на веб-сайт» и выберите опцию « Добавить HTML-тег». Скопируйте созданный метатег и вставьте его в панель Yoast SEO. Сохраните изменения, далее вернитесь к Pinterest для отправки.

Google+

Как изменить Open Graph и Twitter-карты для WordPress

Последним социальным аккаунтом, который вам необходимо будет установить – Google+. Который будет только ссылкой на + страницу бизнеса. Вставьте ее, и все готово.

Установка значений по умолчанию

Как изменить Open Graph и Twitter-карты для WordPress

Последний шаг: надо определить некоторые значения по умолчанию. Yoast использует мета-поля в контенте для определения данных Open Graph, так что не забудьте настроить значения по умолчанию в разделе SEO-> Внешний вид поиска-> Типы контента. Используйте встроенные переменные фрагмента Yoast SEO для создания собственных динамических значений по умолчанию для заголовка записи(который используется для og: title) и мета-описания(используется для og: description).

Смотрите также:

Подборку новых плагинов в разделе Плагины WordPress.

Пользовательское изображение, название и описание

Как изменить Open Graph и Twitter-карты для WordPress

Yoast SEO также имеет опцию для отдельных записей для параметра картинки, названия и описания, используемых для Facebook и Twitter. При редактировании поста просто прокрутите страницу до Yoast SEO и нажмите на значок совместного доступа(он выглядит как символ < с жирными точками). Далее загрузите собственное изображение или отредактируйте заголовок и описание по мере необходимости.

Отладка и проверка

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

Как изменить Open Graph и Twitter-карты для WordPress Инструмент Google Structured Data Testing: этот инструмент не покажет вам предварительный просмотр публикации в Google+, но покажет, какие метаданные присутствуют и читаются Google. Свойства будут выводиться в свойствах RDFA-узла.

Отладка Facebook: после внедрения тегов Open Graph просто вставьте URL-адрес веб-сайта, содержащего теги. Он покажет вам свойства объекта. Инструмент проверки Twitter : вы можете без труда использовать эту ссылку для предварительного просмотра карточки Twitter для поста, прежде чем он будет распространяться по социальным сетям. Pinterest Rich Pins Validator: аналогично двум последним валидаторам, просто введите URL-адрес, содержащий теги Open Graph, для предварительного просмотра, и убедитесь, что содержимое выводится как следует.

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

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

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