<
  • Главная
Статьи

3 варіанти, як налаштувати теги Open Graph Facebook для WordPress?

  1. 1-ий варіант. Найпростіший. Плагін All in One SEO Pack
  2. 2-ий варіант. Плагін Facebook Open Graph Meta
  3. 3-ий варіант. Додавання і настройка тегів Open Graph вручну
  4. Результати тестування
  5. Вирішення проблем

Це дуже важлива настройка

Це дуже важлива настройка. Кожен власник блогу WordPress, який хоче професійно просуватися на Facebook, повинен налаштувати теги Open Graph. Від цього залежить конверсія посилань і престиж вашого блогу.

Що це за теги? Теги Open Graph відповідають за інформацію (картинку, заголовок, опис), яка відображається на стіні користувача, коли він натискає «Мені подобається», «Поділитися» або користується іншими плагінами Facebook на вашому блозі.

Спочатку движок WordPress цих тегів не містить, тому їх треба налаштувати самостійно. Без них на Facebook буде відправлятися дуже негарна і часом незрозуміла інформація. Наведу 1 приклад. На скріншоті видно публікації після натискання «Мені подобається» і коментування на блозі Михайла Шакина . Картинки публікуються випадковим чином, тому що не налаштовані теги. А уявіть, якщо у вас на сайті є рекламний блок з картинками !?
Спочатку движок WordPress цих тегів не містить, тому їх треба налаштувати самостійно

Цю картину можна спостерігати і на деяких відомих новинних ресурсах.

Що відбувається, коли є теги Open Graph? Наведу приклад мого сайту для продажу відеокурсу «Фан-сторінки: результат за 27 днів» . Я налаштував картинку, заголовок і опис для кнопки «Мені подобається». Результат на скріншоті. Погодьтеся, що такий пост привертає увагу набагато більше.
Що відбувається, коли є теги Open Graph

1-ий варіант. Найпростіший. Плагін All in One SEO Pack

Цим плагіном користуюся я на своєму блозі. його можна скачати тут . Він дозволяє відразу оптимізувати блог для пошукових систем і для Facebook. Я зупинився на цьому плагіні, тому що мені треба оптимізувати не тільки статті блогу, а й окремі сторінки відеокурсу «Фан-сторінка: запуск». Якщо оптимізувати і статті, і сторінки блогу вручну, це займає час і вимагає навичок роботи з PHP. Але завдяки тому, що плагін All in One SEO Pack дозволяє налаштувати картинку, заголовок і опис для кожної статті і для кожної сторінки окремо, я можу повністю контролювати інформацію і для пошукових систем, і для Facebook.

Налаштування цього плагіна стандарту. Завантажуєте його на комп'ютер, встановлюєте собі на блог (Модулі -> Додати новий -> Завантажити), натискаєте «Активувати». Потім заходите в «Параметри» -> «All in One SEO Pack» і заповнюєте поля «Тема сайту», «Короткий опис», «Адреса WordPress (URL)», «Адреса сайту (URL)» - це стандартні настройки плагіна. Потім обов'язково внизу натискаєте кнопку «Зберегти». Найважливіше для нас - в настройках самої статті або сторінки блогу. Виглядають ці настройки ось так:
Налаштування цього плагіна стандарту
Якщо ви додали нову сторінку на блог, то для неї з'явиться поле завантаження картинки трохи вище, ніж поле «Title».

На скільки добре працює цей плагін, ви можете перевірити, натиснувши на кнопку «Мені подобається» під цією статтею. Після цього на вашій стіні Facebook з'явиться перша картинка статті і заголовок + опис, які ви бачили трохи вище на скріншоті. Переходимо до другого варіанту.

2-ий варіант. Плагін Facebook Open Graph Meta

Цей варіант також простий як і попередній. ви завантажуєте цей плагін тут (Роботу плагіна я перевірив, і також я знаю, що його автор - досвідчений розробник, який веде свою сторінку на Facebook), також як і в першому варіанті завантажуєте на блог через панель управління і активуєте. Я детально зупинюся на настройках цього плагіна.

В панелі управління зліва заходите в «Налаштування» -> «Facebook Open Graph». Вгорі з'явиться така форма:
В панелі управління зліва заходите в «Налаштування» -> «Facebook Open Graph»
Перше поле «App Id» можете пропустити. У друге поле «Admins» вставте ваш особистий id на Fаcebook. Щоб дізнатися свій id, зайдіть до себе в профіль і в адресному рядку замініть «www» на «graph». Наприклад, в моєму випадку:

треба замінити
https://www.facebook.com/neoandrej
на
https://graph.facebook.com/neoandrej

Скопіюйте id і вставте його в поле «Admins» плагіна. Потім в третє поле «Image Url» вставте посилання на картинку, яка буде відображатися за замовчуванням на той випадок, якщо в якійсь статті блоґу не буде зображень або якщо це головна сторінка блогу, або будь-яка інша сторінка (не стати).

Після цих дій натискаєте сіру кнопку «Save» (Зберегти). Плагін майже готовий до роботи.

Навіщо плагіну потрібен ваш id Facebook? Щоб підключити статистику Facebook до вашого блогу, яка буде доступна в ваш обліковий запис за цією адресою http://facebook.com/insights . Завдяки цій статистиці, ви побачите дані по всім Facebook-плагинам, встановленим на вашому блозі: хто натискав, скільки разів, коли, де частіше / рідше і інші важливі дані. Детально про те, як користуватися цією статистикою я розповів у своєму платному видеокурсе «Фан-сторінки: результат за 27 днів» .

Останній важливий крок. Вам необхідно вручну замінити тег <html> в файлі header.php на цей код:

<Html xmlns = "http://www.w3.org/1999/xhtml" xmlns: fb = "http://ogp.me/ns/fb#" xmlns: og = "http://ogp.me/ ns # "<? php language_attributes (); ? >>

В іншому випадку ваш блог може не зрозуміти метатеги Facebook. Щоб відредагувати файл header.php, в панелі управління зліва зайдіть у «Зовнішній вигляд» -> «Редактор» і справа знайдіть і натисніть на лінк «Тема (header.php)». У самому верху коду ви побачите тег <html> (на скріншоті нижче), який треба замінити і зберегти зміни.
В іншому випадку ваш блог може не зрозуміти метатеги Facebook

Після цих дій плагін повністю готовий до роботи. Перевірте його дію, зайшовши у себе в будь-яку статтю і натиснувши «Мені подобається». Потім подивіться, яка інформація з'явилася на вашій стіні в Facebook.

3-ий варіант. Додавання і настройка тегів Open Graph вручну

Якщо ви звикли все робити і налаштовувати самостійно і ви любите працювати з кодом WordPress, вам підійде, звичайно, це варіант. Для початку потрібно виконати ті ж дії, що і в попередньому варіанті - замінити стандартний тег <html> на той, що нам потрібен. Відкриваєте файл header.php і замінюєте стандартний тег:

<Html xmlns = "http://www.w3.org/1999/xhtml" <? Php language_attributes (); ? >>

на цей код:

<Html xmlns = "http://www.w3.org/1999/xhtml" xmlns: fb = "http://ogp.me/ns/fb#" xmlns: og = "http://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 = "http: // ШЛЯХ-К-КАРТИНКЕ / КАР ТІНКА.jpg "/> <? Php}?>

У цих тегах вам потрібно замінити 2 значення:
«Fb: admins» content = «ВАШ_ЛІЧНИЙ_ID_FACEBOOK» - вставте id вашого облікового запису на Facebook (як його знайти, я пояснив вище);
«Og: image» content = «http: //ПУТЬ-К-КАРТІНКЕ/КАРТІНКА.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 ( '/ / i', $ post-> post_content, $ matches); $ First_img = $ matches [1] [0]; if (empty ($ first_img)) {// Визначає картинку за замовчуванням $ first_img = "http: //ПУТЬ_К_КАРТІНКЕ_ПО_УМОЛЧАНІЮ/ФОТО.jpg"; } Return $ first_img; }

Цей код описує функцію catch_that_image (), яка знаходить першу картинку в статті блогу і вставляє її посилання в тег зображення Open Graph. Якщо в статті немає картинки, то ця функція використовує зображення за замовчуванням. Для цього вставте посилання потрібного зображення в цю змінну:

$ First_img = «http: //ПУТЬ_К_КАРТІНКЕ_ПО_УМОЛЧАНІЮ/ФОТО.jpg»;

Тепер зберігайте зміни в файлі functions.php, заходите на блог і перевіряйте роботу кнопок «Мені подобається». Все повинно працювати коректно.

Результати тестування

Щоб показати вам, як працюють методи, які описані в статті, я створив тестовий блог . На блозі зробив кілька постів з 3-ма зображеннями в кожному, додав кнопки «Мені подобається». Протестував роботу кнопок до Open Graph і після.

Тест №1. Результат роботи кнопки «Мені подобається» на блозі без тегів Open Graph і плагіна All in One SEO Pack.
Тест №1

Тест №2. Результат роботи кнопки «Мені подобається» на блозі після установки плагіна Facebook Open Graph Meta.
Тест №2

Тест №3. Результат роботи кнопки «Мені подобається» на блозі після настройки тегів Open Graph вручну.
Тест №3

Результати говорять самі за себе. Бажаю успішної настройки тегів Open Graph Facebook на вашому блозі. Застосовуйте шаринг професійно і по максимуму.

Вирішення проблем

Якщо потрібна картинка все одно не показується при публікації посилання в Facebook, то перевірте розміри картинки. Якщо вони менше, ніж 200х200 пікселів, то Facebook буде шукати і підставляти картинку більшого розміру.

Ще буває такий глюк, що картинка не відображається належним чином в опублікованому пості на Facebook навіть при наявність тегів Open Graph. Вихід дуже простий. Копіюєте посилання сторінки блогу, на якій встановлена ​​«неправильна» кнопка «Мені подобається». Вставляєте її в дебагер Facebook ( https://developers.facebook.com/tools/debug ). Натискаєте кнопку «Налагодження». Дивіться яку картинку покаже дебагер. Після цих простих дій кнопка «Мені подобається» автоматично стає «правильної», а потрібна картинка також автоматично змінюється на вашій стіні Facebook і з цього моменту все буде відображатися коректно на 200% :).

Схожі записи:

Що це за теги?
Що відбувається, коли є теги Open Graph?
Навіщо плагіну потрібен ваш id Facebook?
Me/ ns # "<?
Php language_attributes (); ?
3.org/1999/xhtml" <?
Php language_attributes (); ?
Me/ ns # "<?
Php language_attributes (); ?
Open Graph Facebook -> <?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью