Підтримайте Соціальні мережі – це величезне поле можливостей для інтернет-магазинів, для представлення свого бренду ширшій аудиторії. Однак чи помічали ви, що Facebook та інші платформи не завжди відображають релевантний контент коли ви поширюєте посилання?
Публікації в соціальних мережах можуть виглядати хаотично і навіть дивно, що не тільки відбиває в людей бажання перейти за посиланням, але й взагалі не привертає їхньої уваги.
Таким чином, поширення ваших продуктів та інших сторінок веб-сайту в соціальних мережах принесе вам користь лише в одному випадку — коли ваші публікації будуть виділяютись з поміж інших. І для цього ви повинні відкрити для себе мета теги open graph.
У цій статті ви дізнаєтеся все, що вам потрібно, щоб зробити ваші публікації в соціальних мережах більш "клікабельними" та поширюваними за допомогою open graph тегів.
Зміст [приховати]
Що таке open graph meta tags та що вони роблять?
Мета теги open graph, також відомі як social media tags — це невеликі фрагменти коду, які є частиною протоколу Open Graph від Facebook, який також розпізнається такими мережами як Twitter і LinkedIn. Ці теги визначають, як URL-адреси вашого сайту відображаються в соціальних мережах та інших месенджерах.
Теги OG зазвичай позначаються властивістю og: meta property, що знаходиться в тезі <head> вашої сторінки.
Перше питання — чи можна обійтись без них?
Звичайно.
Facebook витягне вміст вашого веб сайту з даних доступних на сторінці. Однак, швидше за все, це буде зовсім не те, що ви очікуєте.
Мета теги open graph значно покращують ситуацію. Просто подивіться на цей приклад.
|
|
| Публікація у Facebook без тегів open graph | Публікація у Facebook з тегами open graph |
За яким посиланням ви б хотіли перейти, побачивши цю публікацію у вашій стрічці?
Теги OG роблять ваші публікації в соціальних мережах більш привабливими, клікабельними та доступними. Це дозволяє збільшити відвідуваність веб сайту та, відповідно, покращити видимість бренду.
Крім того, стандартні описи та назви сторінок не такі ефективні у соціальних мережах, як у пошукових системам. Тож вам треба бути креативними.
Тепер давайте розглянемо найважливіші теги open graph, які вам потрібні.
Важливі теги open graph
Facebook визначає до 17-ти тегів open graph, але насправді вам знадобиться лише кілька, щоб створювати пости, які привернуть увагу.
Вони включають:
og:title — це базовий тег, який визначає заголовок сторінки.
og:url — визначає постійну канонічну URL-адресу поширюваної сторінки без параметрів.
og:description — містить опис поширюваної сторінки, який відрізняється від og:title.
og:image — URL-адреса зображення, пов’язаного зі поширюваною сторінкою.
Цей тег особливо важливий, оскільки це основний елемент, який привертає увагу у ваших публікаціях. Тому обов’язково дотримуйтеся вимог Facebook до зображень, щоб додатково налаштувати og:image height та og:image width.
Готові їх застосувати?
Як додати теги open graph на сайті Magento?
Як ми вже вказували раніше, теги open graph розташовуються в тезі <head> у верхній частині сторінки. Тому вам доведеться додавати їх на сторінки вашого веб-сайту вручну.
Це вимагає певного технічного досвіду. В іншому випадку ви можете просто попросити свого розробника додати теги open graph.
У будь-якому випадку, це виснажливий і трудомісткий процес, оскільки вам доведеться звертатися до розробника щоразу, коли вам потрібно буде оновити теги open graph для будь-якої зі сторінок.
В якості альтернативи ви можете інтегрувати розширення Magento 2 Facebook Open Graph Tags і легко керувати тегами OG з адмін панелі.
Ви можете додати OG Title, OG Description, та OG Image для найбільш поширюваних сторінок, таких як продукти та публікації блогу.
Для решти сторінок ви можете просто задати значення OG за замовчуванням.
Так, це настільки просто.
Але на цьому керування мета тегами open graph не закінчується.
Валідація тегів open graph
Додавши теги open graph на сторінки свого сайту, ви повинні переконатися, що вони виведені правильно.
Іншими словами, ви повинні валідувати теги OG, щоб побачити, як вони відображатимуться під час поширення в соціальних мережах.
Оскільки теги open graph є функцією Facebook, ви можете почати з Facebook Sharing Debugger. Однак у Twitter і LinkedIn також є свої валідатори.
Facebook Sharing Debugger збере дані з вашого веб-сайту, щоб показати вам, як буде виглядати публікація в соціальних мережах.
У випадку, якщо дані неправильні, очистіть кеш Facebook та подивіться, чи оновляться результати.
Іноді навіть може бути, що назва й опис правильні, але зображення не змінюється. Це може бути через перенаправлення, відсутню meta property, або кеш. Щоб усунути проблеми, вам потрібно дослідити причини чому посилання не відображає зображення на Facebook.
Поради для застосування тегів open graph
Якщо ви перевіряєте теги open graph, і дані зібрані правильно, ви все одно можете бути не задоволені результатом: це може бути або неправильне зображення, або обрізаний заголовок та опис.
Звучить знайомо?
Це може бути тому, що ви не дотримуєтесь найкращих методів використання OG тегів, щоб забезпечити точний і привабливий контент.
Отже, ось короткий огляд речей, на які слід звернути увагу, коли ви додаєте мета теги open graph на свій веб сайт:
- Використовуйте лише канонічні URL-адреси для og:url.
- Зробіть OG title коротким (без назви бренду) з 60 символами для комп’ютера та 40 для мобільних пристроїв.
- Підтримуйте description в межах 2-4 речень і використовуйте мета-опис, якщо це має сенс.
- Створюйте кастомні зображення OG для поширюваних сторінок та використовуйте логотип або зображення бренду для інших сторінок.
- Використовуйте зображення розміром 1200x630, щоб зберегти якість на всіх пристроях.
І остання порада, яку ви завжди повинні пам’ятати — поставте себе на місце своїх клієнтів. Ви можете використовувати найкращі методи, але все одно не отримувати очікуваного трафіку і висвітлення в соціальних мережах.
Подумайте, що привертає вашу увагу, коли ви гортаєте стрічку. Як тільки ви знайдете те, що працює найкраще, ви зможете створювати привабливі дописи за допомогою тегів OG.