Как добавить метаданные Facebook Open Graph на сайт Flatsome Powered

Опубликовано: 2020-12-01

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

Не секрет, что Facebook стал основным драйвером трафика для всех типов веб-сайтов. В настоящее время даже крупные компании направляют потребителей на свои страницы в Facebook, а не напрямую на бизнес-сайт.

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

Это происходит, когда Facebook не получает правильную информацию. В некоторых случаях FB не получает правильное миниатюрное изображение во время автоматических обновлений при публикации статьи.

В этом уроке мы покажем вам, как добавить метаданные Facebook Open Graph на сайт с поддержкой Flatsome.

Что такое метаданные Facebook Open Graph

Протокол Open Graph соединяет содержимое веб-сайта с Facebook, создавая графовые объекты. Он извлекает метаданные из сообщения для отображения в своей системе.

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

Основные теги WordPress Open Graph

Есть много свойств Open Graph. Но Facebook требуется всего четыре протокола, чтобы понять основы вашей страницы.

1. Og: title — этот тег используется для публикации плитки вашей статьи в социальной сети (например, «Образцы вариантов WooCommerce»).

2. Og: image — Тег заголовка открытого графика может предварительно просмотреть изображение вашего поста в блоге. Он представляет содержание.

3. Og: type — тип объекта, которым вы делитесь (например, статья, видео и т. д.).

4. Og: URL — URL контента (например, https://storepress.com/woocommerce-variation-swatches/)

Преимущества Facebook Open Graph

Так зачем вам утруждать себя установкой и настройкой метаданных или тегов Open Graph?

Основные преимущества:

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

Как добавить метаданные Facebook Open Graph в Flatsome

Чтобы добавить данные Open Graph на свой сайт WooCommerce, вы можете использовать как ручные методы, так и использовать плагин.

Способ 01: добавить вручную в тему Flatsome

Этот метод требует, чтобы вы отредактировали файлы темы. Поэтому убедитесь, что вы сделали резервную копию файлов темы, прежде чем вносить какие-либо изменения.

После этого скопируйте и вставьте этот код в свой файл functions.php или плагин для конкретного сайта.

//Добавление Open Graph в языковые атрибуты

функция add_opengraph_doctype($output) {

вернуть $выход. ' xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”';

}

add_filter('language_attributes', 'add_opengraph_doctype');

// Давайте добавим метаинформацию Open Graph

функция insert_fb_in_head() {

глобальный $пост;

if ( !is_singular()) //если это не пост или(страница)

возвращаться;

echo '<meta property="fb:admins" content="ВАШ ID ПОЛЬЗОВАТЕЛЯ"/>';

echo '<meta property="og:title" content="' . получить_название() . '"/>';

echo '<meta property="og:type" content="article"/>';

echo '<meta property="og:url" content="' . получить_постоянную ссылку(). '"/>';

echo '<meta property=”og:site_name” content=”ЗДЕСЬ находится ИМЯ вашего сайта”/>’;

if(!has_post_thumbnail( $post->ID )) { // в сообщении нет избранного изображения, просто используйте изображение по умолчанию

$default_image="http://example.com/image.jpg"; // Просто замените изображение по умолчанию на сервере или (изображение в медиатеке)

echo '<meta property="og:image" content="' . $ default_image . '"/>';

}

еще{

$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'средний');

echo '<meta property="og:image" content="' . esc_attr($thumbnail_src[0]). '"/>';

}

эхо"

«;

}

add_action('wp_head', 'insert_fb_in_head', 5);

Примечание . Измените название сайта там, где написано «Ваш сайт идет сюда». Измените URL-адрес изображения по умолчанию на свое изображение. Мы рекомендуем вам добавить туда изображение с вашим логотипом, поэтому, если у вашего поста нет миниатюры, он подтягивает логотип вашего сайта. Затем добавьте свой собственный идентификатор приложения Facebook. Вы можете удалить строку идентификатора приложения FB из кода, если у вас нет приложения FB.

Это все, что вам нужно сделать. Как только вы сохраните файл functions.php или плагин для конкретного сайта, он начнет отображать метаданные FB open graph в заголовке WordPress.

Способ 2: использование плагина Yoast SEO

Yoast SEO — одна из самых удобных опций публикации в социальных сетях WordPress для Open Graph. Это отличный полезный инструмент для создания оптимизированного контента, карт сайта и многого другого.

Первое, что вам нужно сделать, это установить и активировать плагин Yoast SEO.

Для этого вам необходимо установить и активировать плагин Insert Headers and Footers. Чтобы узнать, как установить плагин, мы создали учебник, который объясняет это шаг за шагом.

После активации плагина функция SEO будет добавлена ​​на левый экран.

Перейдите на вкладку Facebook из социальных сетей в меню SEO .

Затем установите флажок «Добавить метаданные Open Graph».

Вы можете сохранить свои настройки или продолжить настройку других социальных параметров Facebook на экране. Нажмите кнопку «Сохранить изменения ».

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

Плагин Yoast SEO также позволяет вам устанавливать метаданные Open Graph для отдельных страниц или сообщений. Вам нужно отредактировать сообщение или страницу и прокрутить вниз до раздела SEO под редактором.

На этом экране вы можете установить миниатюру для Facebook для определенной страницы или публикации.

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

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

Если вам нужно больше руководств по теме Flatsome или WooCommerce, дайте мне знать в разделе комментариев. Я напишу следующий урок для вас.