Як налаштувати Open Graph та Twitter-карти для WordPress

Хороший контент залучить зацікавлену аудиторію на ваш сайт. І, ймовірно, деякі з цих людей захочуть поділитися цим контентом у соціальних мережах. Але іноді виникають проблеми, коли загальний контент не відображається належним чином у соціальних мережах. На допомогу приходять теги 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. Деякі з кращих плагінів:

1. SEO від Yoast
2. Відкрийте графік для тегів карток Facebook, Google+ і Twitter
3. SEO Framework
4. JM Twitter Cards (тільки для карт Twitter)
5. Open Graph Protocol Framework(тільки для тегів Open Graph і рекомендується для розробників).

У цій статті ми будемо використовувати вбудовані параметри плагіна Yoast SEO та визначимо спеціальні метатеги, які дадуть можливість чудово виглядати постам у соцмедіа.

Крок 1. Встановіть останню версію Yoast SEO

Рекомендуємо встановити останню версію Yoast SEO. Найпростіший спосіб зробити це за допомогою панелі інструментів адміністратора WordPress у розділі  Плагіни-> Додати новий та вказати у рядку пошуку Yoast SEO.

Потім встановіть та активуйте плагін.

Після активації ви побачите нову вкладку «SEO» на панелі керування адміністратора WordPress. У Yoast SEO є безліч чудових функцій, але сьогодні розглянемо вкладку Social (Соціальні).

Крок 2. Вкажіть свої соціальні профілі

Щоб налаштувати карти Open Graph та Twitter, перейдіть до розділ SEO-> Соціальний з панелі керування WordPress. Спочатку додайте посилання на свої соціальні профілі, щоб допомогти пошуковим системам підтвердити, що профілі дійсно підключені до вашого сайту. Потім перейдіть до різних соціальних вкладок.

Facebook

Ваш перший крок – увімкнути метадані Open Graph для постів Facebook. Просто натисніть кнопку «Увімкнено». Припускаємо, що ви вже додали пов'язану сторінку Facebook на вкладці «акаунти». Ви можете додати зображення за промовчанням, якщо хочете, щоб на будь-яких сторінках, на яких немає картинок, відображалося вказане зображення.

Twitter

Налаштувавши пости для Facebook, настав час зайнятися Twitter. Просто переконайтеся, що дані карти Twitter Enabled (Увімкнено). Звиберіть макет карти за замовчуванням (резюме або резюме з великим зображенням). Знову ж таки, це буде пов'язано з тегом Twitter, який ви додали на сторінці «Аккаунти» .

Pinterest

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

Підпишіться на щотижневий дайджест про WordPress