Хороший контент залучить зацікавлену аудиторію на ваш сайт. І, ймовірно, деякі з цих людей захочуть поділитися цим контентом у соціальних мережах. Але іноді виникають проблеми, коли загальний контент не відображається належним чином у соціальних мережах. На допомогу приходять теги Open Graph.
За допомогою Open Graph можна контролювати зовнішній вигляд заголовка, зображення, описи та багато іншого при спільному використанні ("Поділитися") через соціальні канали. Можливо, ви вже знайомі зі звичайними мета-тегами, такими як тег title та теги опису. Але багато блогерів не знають, що існують інші метатеги, специфічні для соціальних мереж Google+, Facebook, Twitter та Pinterest. Причина, через яку ці сайти соціальних мереж почали використовувати метадані: необхідність правильно відображати контент разом зі зв'язаними зображеннями, описами та посиланнями. Визначивши ці метатеги, ви можете переконатися, що вашим контентом простіше ділитися і він чудово виглядає у соцмережах.
Кожен сайт соціальної мережі має різні переваги щодо тегів. Pinterest і Google+ віддають перевагу тегам Schema, але також підтримують теги Відкритий графічний протокол, які також використовуються і Facebook.
Теги Open Graph йдуть між розділами веб-сторінки. Теги, що найчастіше використовуються:
- og: заголовок
- og: опис
- og: url
- og:ім’я_сайту
- og: зображення
- og:type.
Ось кілька прикладів, як формується інформація про статтю у соцмережах за допомогою Open Graph.
Twitter визначив власні теги, відомі як карти Twitter. Ці теги дозволяють вашим посиланням надавати більше інформації щоразу, коли їх твітнуть. Подібно до тегів Open Graph, теги в Твіттері також йдуть між розділами веб-сторінки. Найчастіше використовувані теги Twitter:
- твіттер: картка
- twitter:сайт
- twitter:creator.
Хоча ви можете додавати мітки Open Graph і Twitter Card вручну, на WordPress.org є багато плагінів, які дозволяють навіть початківцям додавати теги в записи і сторінки WordPress. Деякі з кращих плагінів:
- SEO від Yoast
- Відкрийте графік для тегів карток Facebook, Google+ і Twitter
- SEO Framework
- JM Twitter Cards (тільки для карт Twitter)
- 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.
Потім встановіть та активуйте плагін.
Після активації ви побачите нову вкладку «SEO» на панелі керування адміністратора WordPress. У Yoast SEO є безліч чудових функцій, але сьогодні розглянемо вкладку Social (Соціальні).
Крок 2. Вкажіть свої соціальні профілі
Щоб налаштувати карти Open Graph та Twitter, перейдіть до розділ SEO-> Соціальний з панелі керування WordPress. Спочатку додайте посилання на свої соціальні профілі, щоб допомогти пошуковим системам підтвердити, що профілі дійсно підключені до вашого сайту. Потім перейдіть до різних соціальних вкладок.
Ваш перший крок – увімкнути метадані Open Graph для постів Facebook. Просто натисніть кнопку «Увімкнено». Припускаємо, що ви вже додали пов'язану сторінку Facebook на вкладці «акаунти». Ви можете додати зображення за промовчанням, якщо хочете, щоб на будь-яких сторінках, на яких немає картинок, відображалося вказане зображення.
Налаштувавши пости для Facebook, настав час зайнятися Twitter. Просто переконайтеся, що дані карти Twitter Enabled (Увімкнено). Звиберіть макет карти за замовчуванням (резюме або резюме з великим зображенням). Знову ж таки, це буде пов'язано з тегом Twitter, який ви додали на сторінці «Аккаунти» .
Pinterest трохи відрізняється, тому що ця платформа використовує перевірку метатегу. Перейдіть до свого облікового запису Pinterest, наведіть вказівник миші на свій значок користувача та клацніть вкладку «Налаштування». Натисніть кнопку "Заявка на сайт» та виберіть опцію «Додати HTML-тег». Скопіюйте створений метатег та вставте його в панель Yoast SEO. Збережіть зміни, а потім поверніться до Pinterest для надсилання.
Google+
Останнім соціальним обліковим записом, який вам потрібно буде встановити – Google+. Який тільки посилання на + сторінку вашого бізнесу. Вставте її і все готове.
Встановлення значень за замовчуванням
Останній крок: потрібно визначити деякі значення за замовчуванням. Yoast використовує мета-поля у вашому контенті для визначення даних Open Graph, тому не забудьте змінити значення за замовчуванням у розділі SEO-> Зовнішній вигляд пошуку-> Типи контенту. Використовуйте вбудовані змінні фрагменти Yoast SEO для створення власних динамічних значень за промовчанням для заголовка запису (який використовується для og: title) та мета-опису (використовується для og: description).
Дивіться також:
Добірку нових плагінів у розділі Плагіни WordPress.
Користувальницьке зображення, назва та опис
Yoast SEO також включає опцію для окремих постів для налаштування зображення, назви та описи, що використовуються для Facebook та Twitter. Під час редагування посту просто прокрутіть сторінку до Yoast SEO та натисніть на значок спільного доступу (він виглядає як символ < з жирними точками). Потім завантажте власне зображення або відредагуйте заголовок та опис за необхідності.
Налагодження та перевірка
Кожен великий сайт соціальної мережі має свій власний валідатор або відладчик для перевірки та попереднього перегляду того, як відображатимуться ваші посилання при спільному використанні у соціальних мережах.
Інструмент Google Structured Data Testing: цей інструмент не покаже вам попередній перегляд публікації в Google+, але покаже, які метадані є і читаються Google. Властивості відображатимуться у властивостях RDFA-вузла.
Налагодження Facebook: після впровадження тегів Open Graph просто вставте URL-адресу вашого сайту, що містить теги. Він покаже вам властивості об'єкта.Інструмент перевірки Twitter: Ви можете використовувати це посилання для попереднього перегляду картки Twitter для свого поста, перш ніж він буде розповсюджуватися соціальними мережами.Pinterest Rich Pins Validator: аналогічно двом останнім валідаторам, просто введіть URL-адресу, що містить теги Open Graph, для попереднього перегляду, і переконайтеся, що ваш контент відображається як слід.Використовуючи метатеги Open Graph, можна оптимізувати спосіб відображення заголовків, зображень, описів та інших елементів вашого контенту в соціальних мережах. Це сприятиме збільшенню трафіку із соціальних сайтів, оскільки посилання з чіткою інформацією, як правило, отримують більше відгуків та природних переходів. Також люди схильні довіряти посиланням, які містять більше інформації, а не натискають на короткі URL-адреси.
Джерело: wpexplorer.com
Коментарі до запису: 3
Доброго дня! Прочитав Вашу статтю. Допомогла зрозуміти, що до чого і навіщо! Дякую!
Але в мене виникла серйозна проблема. Раніше при публікації статей із зазначеними налаштуваннями Yoast SEO, все працювало та посилання в соц. мережі публікувалися як слід.
Через що стався збій не зрозумію. Перепробував усе. Перевстановив плагін. Перелопатив усі налаштування.
Проблема в наступному: При оформленні посилання на соц. мережі. Зображення картинки бралося з головної картинки статті. Все було гаразд і так і тривало.
Вчора сталося, що зображення для стати в соц. посилання стало братися не з головної картинки статті, а з Шапки сайту. Зображення статті просто ігнорується.
Ситуація ще в тому, що при спробі зробити посилання на соц. мережі старих статей, все нормально. Зображення береться як слід. Береться головне зображення статті.
Виходить так, що при публікації нових статей, яка б картинка в статті не була головною, публікується картинка ШАПКИ всього сайту.
Намагався прибирати картинку Шапки сайту, але за соц. Посилання головна картинка статті не показується і або посилання виходить без картинки або береться якась інша картинка.
Будьте ласкаві підкажіть у чому біда?)))
Дякуємо за статтю, Yoast SEO в Open Graph брав картинку з першого за ціною товару для посилання на головну сторінку, ігноруючи встановлене зображення на сторінці, а також у налаштуваннях самого плагіна.
Допомогла установка дод. зображення для Facebook у цьому самому товарі
Плагін Yoast SEO включає розмітку OpenGraph, але буває не зовсім коректно відображає коректно фото. Наприклад, https://prnt.sc/1ljuno0 фото відображається не повністю, тим самим обрізає. Підкажіть можна через адмінку це налаштувати?
Сайт https://odjagajko.ua, де є дана проблема.