Как настроить метатеги Facebook Open Graph и Twitter Card

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

Изображение плохого размера не только разбавляет сообщение, которое вы пытаетесь передать своим подписчикам, но и снижает возможность обмена сообщениями. Даже ваши самые ярые поклонники не станут делиться вашим контентом (независимо от того, насколько информативным он может быть), если он не сопровождается релевантным избранным изображением, оптимизированным для рассматриваемой платформы.

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

Решить эту проблему помогут метатеги Open Graph и Twitter Card.

Что такое метатеги Open Graph и Twitter Card?

Теги Open Graph, представленные Facebook в 2010 году, представляют собой набор метатегов, используемых для облегчения превращения любой веб-страницы в богатый объект в социальном графе, позволяя вам, издателю контента, управлять элементами, которые отображаются, когда вы делитесь своим контентом. страницу в Фейсбуке. С момента своего появления протокол Open Graph был также принят LinkedIn и Pinterest. Twitter использует протокол, использующий Twitter Cards, который по функциям похож на Open Graph от Facebook.

Если вы посещаете сайт, на котором включены Open Graph и Twitter Cards, и выполняете просмотр источника контента, метатеги могут выглядеть так, как показано в примере ниже (с соответствующей заменой информации о «контенте»):

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

Как реализовать теги Open Graph и Twitter Card на вашем сайте WordPress

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

Yoast SEO для WordPress

Если на вашем сайте WordPress еще не установлена ​​премиум-версия Yoast SEO, это первый шаг к оптимизации изображений вашего блога для социальных сетей. Этот плагин позволяет очень легко добавлять метатеги Facebook Open Graph и Twitter Card. Вот пошаговое руководство о том, как включить социальные метатеги с помощью плагина Yoast SEO.

1. Настройте Yoast SEO

Перейдите на вкладку «Социальные» плагина Yoast SEO на панели инструментов вашего сайта WordPress. Заполните данные, связанные с платформами социальных сетей вашего сайта, на вкладке «Учетные записи».

Включите метаданные Open Graph на вкладке «Facebook» и заполните другие соответствующие данные, как требуется на странице.

Включите метаданные карты Twitter на вкладке «Twitter» и заполните соответствующую информацию, как требуется на странице.

Примечание. Для Твиттера лучше использовать «Сводка с большим изображением», потому что твиты с большими изображениями привлекают больше внимания, чем твиты с маленькими изображениями или без них. Тогда ваши твиты будут выглядеть так:

После того, как вы выполните эти шаги, метатеги Facebook Open Graph и Twitter Card будут включены для всех ваших сообщений. (Это одноразовая установка!)

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

2. Выберите определенные изображения, чтобы поделиться ими на Facebook и Twitter.

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

Вот и все! Всего несколько вещей, которые нужно иметь в виду:

1. Yoast предлагает размер избранного изображения 1200 на 630 пикселей для Facebook и 1024 на 512 пикселей для Twitter. Путем проб и ошибок я обнаружил, что любое горизонтальное изображение с соотношением ширины к высоте 2:1 и шириной более 450 пикселей отлично работает как для Facebook, так и для Twitter. Для получения дополнительной информации о размерах социальных сетей ознакомьтесь с этим руководством от Sprout Social и этими рекомендациями от Buffer.
2. Если вы меняете рекомендуемые изображения для Facebook задним числом после того, как вы уже поделились ссылкой на публикацию хотя бы один раз, вы должны запустить свой URL-адрес через отладчик общего доступа Facebook, чтобы можно было обновить старую кэшированную информацию и получить новую. избранное изображение с тех пор.

Другие плагины WordPress для оптимизации изображений в социальных сетях

Если вы не используете плагин Yoast SEO, то есть другие плагины WordPress, которые могут помочь вам выполнить эту работу. Вот несколько других вариантов плагинов, которые вы можете выбрать в зависимости от ваших предпочтений и совместимости сайта:

• Фейсбук
• Все в одном пакете SEO
• Теги Facebook Open Graph, Google+ и Twitter Card
• Открыть график

Как использовать PHP для ручного добавления метаданных Open Graph и Twitter Card в вашу тему WordPress

Наконец, если вы ищете технически подкованное решение вместо плагина, вы всегда можете напрямую добавить метатеги в свою тему WordPress, вручную включив необходимый PHP-код в файл function.php вашей темы. Вот несколько ссылок о том, как это сделать, с пошаговыми инструкциями:

• Как добавить метаданные Facebook Open Graph в темы WordPress
• Как добавить метатеги Open Graph в WordPress
• Код functions.php для включения метатегов Open Graph

Обратите внимание: вам может потребоваться настроить приведенный выше ссылочный код в соответствии с дизайном темы вашего конкретного веб-сайта.

Как только вы поймете метатеги, связывающие ваши посты в социальных сетях, вы сможете быстро настроить и запустить их на своем сайте WordPress. А рентабельность инвестиций? Что ж, ваши посты будут намного лучше работать в социальных сетях, и вы сможете гораздо лучше контролировать то, как они выглядят и что они передают, делая их значимыми и общедоступными.