Метатеги Open Graph: інструкція з використання
Соціальні медіа є найпопулярнішою платформою для пошуку продуктів для споживачів віком від 18 до 44 років. Акаунти в соціальних мережах допомагають брендам ефективніше взаємодіяти з аудиторією та привертати її увагу до важливих сторінок сайту. Але не завжди поширений контент виглядає саме так, як ми того очікуємо. Цю проблему здатні розв’язати метатеги Open Graph.
Що таке Open graph tags та як їх використовують?
Метатеги Open Graph — це спеціальні HTML-теги, які використовуються для опису контенту на вебсторінці при поширенні в соціальні мережі. Вони були розроблені компанією Facebook для поліпшення відображення змісту на їхній платформі. Цей протокол також підтримують Twitter та LinkedIn.
Open Graph meta tags визначають, як посилання на ваш сайт відображаються у соціальних мережах. Зазвичай вони позначаються властивістю og: meta property, яка міститься в розділівашої вебсторінки.
Використання Open Graph опціональне. Facebook автоматично створює публікації на основі контенту, розміщеного на сторінці. Однак результат може відрізнятися від очікувань.
Водночас OG meta tags здатні покращити вигляд ваших публікацій у соціальних мережах і збільшити їхню клікабельність. У результаті вебсайт отримує додатковий трафік і впізнаваність.
Основні Open graph tags
Facebook надає можливість використовувати до 17 тегів Open Graph для кожного посту. Але насправді вам знадобиться лише кілька найважливіших:
og:title
Визначає заголовок сторінки.
Як використовувати?
- Заголовок має бути точним, читабельним і транслювати цінність контенту.
- og:title має бути коротким та влучним. Хоча офіційних рекомендацій з обсягу заголовків немає, краще використовувати не більше 40 символів для мобільних пристроїв і 60 для настільних комп’ютерів.
- Уникайте додавання брендингу.
og:url
Вказує на постійну канонічну URL-адресу сторінки, яка розповсюджується.
og:description
Містить опис сторінки, відрізняється від заголовка.
Як використовувати?
- Опис має доповнювати заголовок.
- Якщо необхідно, додайте сюди метаопис сторінки.
- Будьте лаконічними: Facebook рекомендує використовувати 2-4 речення.
og:image
URL-адреса зображення, розміщеного на сторінці, що розповсюджується. Він особливо важливий, оскільки є найбільшим елементом, який привертає увагу до публікації.
Як використовувати?
- Використовуйте власні зображення для сторінок, якими ви плануєте ділитися (наприклад, домашньої сторінки, статей тощо), а для інших сторінок — свій логотип або будь-яке інше фірмове зображення.
- Дотримуйтеся вимог Facebook до розмірів зображень для налаштування параметрів og:image height та og:image width.
Лайфхак: за допомогою ChatGPT можна згенерувати мікророзмітку — зокрема, теги Open Graph. Більше про використання цього чатботу з генеративним штучним інтелектом розповіли у цій статті.
Як налаштувати Open Graph у WordPress?
- Встановіть плагін SEO від Yoast.
- Перейдіть до редактора публікацій і прокрутіть вниз. Там ви знайдете поле Yoast SEO.
- Перейдіть на вкладку «Соціальні мережі», знайдіть «Facebook».
- Заповніть запропоновані поля, щоб встановити теги og:title, og:description та og:image.
- Не потрібно налаштовувати og:url вручну, оскільки Yoast автоматично зробить це за вас. Крім того, він додає інші корисні теги OG, такі як розміри зображення.
Перевірка роботи Open Graph tags
Після того, як ви налаштували теги Open Graph, важливо перевірити, чи вони відображаються правильно. Цей процес називають валідацією.
Для Facebook використовуйте інстрмент Meta Sharing Debugger. Окремі валідатори існують для Twitter і LinkedIn.
Ці інструменти збирають дані з вашого сайту, щоб перевірити вигляд публікації в соціальних мережах. Якщо виявиться, що дані неправильні, спробуйте очистити кеш Facebook та перевірити результати знову.
Як перевірити сторінки на наявність тегів Open Graph?
Якщо ви власник великого сайту і не впевнені, які зі сторінок вже мають теги Open Graph, ви можете скористатися інструментом Site Audit від Ahrefs. Він допоможе перевірити всі сторінки одразу.
Просто запустіть сканування сайту, а потім перейдіть до звіту про соціальні теги, щоб побачити всі проблеми, пов’язані з тегами Open Graph і Twitter Card.
Натисніть на попередження, щоб отримати пояснення та поради щодо того, як виправити ці проблеми.
Висновки
Метатеги Open Graph є важливим елементом оптимізації відображення контенту вашого сайту у соціальних мережах. Ключові теги Open Graph, такі як og:title, og:description, og:image та og:url, визначають, як будуть виглядати окремі елементи вашої сторінки при її поширенні у соціальних мережах.
Необхідно налаштувати метатеги Open Graph правильно для кожної сторінки вашого сайту. Після цього важливо перевірити їх роботу за допомогою інструментів валідації, щоб забезпечити коректне відображення вашого контенту у соціальних мережах.
