Это очень важная настройка. Каждый владелец блога WordPress, который хочет профессионально продвигаться на Facebook, должен настроить теги Open Graph. От этого зависит конверсия ссылок и престиж вашего блога.
Содержание
Что это за теги? Теги Open Graph отвечают за информацию (картинку, заголовок, описание), которая отображается на стене пользователя, когда он нажимает «Мне нравится», «Поделиться» или пользуется другими плагинами Facebook на вашем блоге.
Первоначально движок WordPress этих тегов не содержит, поэтому их надо настроить самостоятельно. Без них на Facebook будет отправляться очень некрасивая и порой непонятная информация. Приведу 1 пример. На скриншоте видны публикации после нажатия «Мне нравится» и комментирования на блоге Михаила Шакина. Картинки публикуются случайным образом, потому что не настроены теги. А представьте, если у вас на сайте есть рекламный блок с картинками!?
Эту картину можно наблюдать и на некоторых известных новостных ресурсах.
Что происходит, когда есть теги Open Graph?
Приведу пример моего сайта для продажи видеокурса «Фан-страницы: результат за 27 дней». Я настроил картинку, заголовок и описание для кнопки «Мне нравится». Результат на скриншоте. Согласитесь, что такой пост привлекает внимание намного больше.
Добавляем разметку с помощью плагинов
Плагин All in One SEO Pack
Этим плагином пользуюсь я на своем блоге. Его можно скачать здесь. Он позволяет сразу оптимизировать блог для поисковиков и для Facebook. Я остановился на этом плагине, потому что мне надо оптимизировать не только статьи блога, но и отдельные страницы видеокурса «Фан-страница: запуск». Если оптимизировать и статьи, и страницы блога вручную, это занимает время и требует навыков работы с PHP. Но благодаря тому, что плагин All in One SEO Pack позволяет настроить картинку, заголовок и описание для каждой статьи и для каждой страницы отдельно, я могу полностью контролировать информацию и для поисковиков, и для Facebook.
Настройка этого плагина стандарта. Скачиваете его на компьютер, устанавливаете себе на блог (Плагины -> Добавить новый -> Загрузить), нажимаете «Активировать». Затем заходите в «Параметры» -> «All in One SEO Pack» и заполняете поля «Заголовок сайта», «Краткое описание», «Адрес WordPress (URL)», «Адрес сайта (URL)» — это стандартные настройки плагина. Затем обязательно внизу нажимаете кнопку «Сохранить». Самое важное для нас — в настройках само́й статьи или страницы блога. Выглядят эти настройки вот так:
Если вы добавили новую страницу на блог, то для неё появится поле загрузки картинки чуть выше, чем поле «Title».
На сколько хорошо работает этот плагин, вы можете проверить, нажав на кнопку «Мне нравится» под этой статьёй. После этого на вашей стене Facebook появится первая картинка статьи и заголовок + описание, которые вы видели чуть выше на скриншоте. Переходим ко второму варианту.
Плагин Facebook Open Graph Meta
Этот вариант также прост как и предыдущий. Вы скачиваете этот плагин здесь(работу плагина я проверил, и также я знаю, что его автор — опытный разработчик, который ведёт свою страницу на Facebook), также как и в первом варианте загружаете на блог через панель управления и активируете. Я подробно остановлюсь на настройках этого плагина.
В панели управления слева заходите в «Настройки» -> «Facebook Open Graph». Вверху появится такая форма:
Первое поле «App Id» можете пропустить. Во второе поле «Admins» вставьте ваш личный id на Fаcebook. Чтобы узнать свой id, зайдите к себе в профиль и в адресной строке замените «www» на «graph». Например, в моём случае:
на
//graph.facebook.com/neoandrejСкопируйте id и вставьте его в поле «Admins» плагина. Затем в третье поле «Image Url» вставьте ссылку на картинку, которая будет отображаться по умолчанию на тот случай, если в какой-то статье блога не будет изображений или если это главная страница блога, или любая другая страница (не статья).
После этих действий нажимаете серую кнопку «Save» (Сохранить). Плагин почти готов к работе.
Зачем плагину нужен ваш id Facebook? Чтобы подключить статистику Facebook к вашему блогу, которая будет доступна в вашем аккаунте по этому адресу //facebook.com/insights. Благодаря этой статистике, вы увидите данные по всем Facebook-плагинам, установленным на вашем блоге: кто нажимал, сколько раз, когда, где чаще/реже и другие важные данные. Подробно о том, как пользоваться этой статистикой я рассказал в своём платном видеокурсе «Фан-страницы: результат за 27 дней».
Последний важный шаг. Вам необходимо вручную заменить тег <html> в файле header.php на этот код:
<html xmlns="//www.w3.org/1999/xhtml"
xmlns:fb="//ogp.me/ns/fb#"
xmlns:og="//ogp.me/ns#" <?php language_attributes(); ?>>
В противном случае ваш блог может не понять метатеги Facebook. Чтобы отредактировать файл header.php, в панели управления слева зайдите во «Внешний вид» -> «Редактор» и справа найдите и нажмите на ссылку «Заголовок (header.php)». В самом верху кода вы увидите тег <html> (на скриншоте ниже), который надо заменить и сохранить изменения.
После этих действий плагин полностью готов к работе. Проверьте его действие, зайдя у себя в любую статью и нажав «Мне нравится». Потом посмотрите, какая информация появилась на вашей стене в Facebook.
Добавление и настройка тегов Open Graph вручную
Если вы привыкли всё делать и настраивать самостоятельно и вы любите работать с кодом WordPress, вам подойдёт, конечно, это вариант. Для начала нужно проделать те же действия, что и в предыдущем варианте — заменить стандартный тег <html>на тот, что нам нужен. Открываете файл header.php и заменяете стандартный тег:
<html xmlns="//www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
на этот код:
<html xmlns="//www.w3.org/1999/xhtml"
xmlns:fb="//ogp.me/ns/fb#"
xmlns:og="//ogp.me/ns#" <?php language_attributes(); ?>>
Следующий шаг — самый интересный
В этом же файле header.php перед закрывающим тегом </head> вставляете код тегов Open Graph Facebook:
<!--Open Graph Facebook-->
<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<!-- постоянные значения -->
<meta property="fb:admins" content="ВАШ_ЛИЧНЫЙ_ID_FACEBOOK" />
<!-- если это статья -->
<?php if (is_single()) { ?>
<meta property="og:url" content="<?php the_permalink(); ?> "/>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description"
content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image"
content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo
wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); } ?>" />
<!-- если это любая другая страница -->
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description"
content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="//ПУТЬ-К-КАРТИНКЕ/КАРТИНКА.jpg" />
<?php } ?>
В этих тегах вам нужно заменить 2 значения:
«fb:admins» content=«ВАШ_ЛИЧНЫЙ_ID_FACEBOOK» — вставьте id вашего аккаунта на Facebook (как его найти, я объяснил выше);
«og:image» content=«//ПУТЬ-К-КАРТИНКЕ/КАРТИНКА.jpg» — вставьте ссылку на картинку, которая будет отображаться по умолчанию, если в статье или на странице нет других картинок. Как правило, сюда вставляется ссылка на логотип.
Сохраняете изменения и проверяете работу тегов Open Graph, нажав на кнопку «Мне нравится» в любой статье блога.
Может быть ситуация, при которой картинка статьи всё равно публикуется некорректно или вся статья просто не отображается (как было у меня). Это значит, что функция wp_get_attachment_thumb_url() не работает. Тогда необходимо сделать следующие действия.
Замените этот тег:
<meta property="og:image"
content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo
wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />
на этот тег:
<meta property="og:image"
content="<?php if (function_exists('catch_that_image'))
{echo catch_that_image(); }?>" />
Сохраните изменения. Затем справа в панели управления найдите ссылку на файл «Функции темы» (functions.php), откройте его и в конце кода перед знаком ?> вставьте следующий код:
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"] title="" alt="">/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
//Определяет картинку по умолчанию
$first_img = "//ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg";
}
return $first_img;
}
</img.+src=[\'"]([^\'"]+)[\'"]>Этот код описывает функцию catch_that_image(), которая находит первую картинку в статье блога и вставляет её ссылку в тег изображения Open Graph. Если в статье нет картинки, то эта функция использует изображение по умолчанию. Для этого вставьте ссылку нужного изображения в эту переменную:
$first_img = «//ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.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 (//developers.facebook.com/tools/debug). Нажимаете кнопку «Отладка». Смотрите какую картинку покажет дебаггер. После этих простых действий кнопка «Мне нравится» автоматически становится «правильной», а нужная картинка также автоматически меняется на вашей стене Facebook и с этого момента всё будет отображаться корректно на 200% :).