Соціальні мережі – це величезне поле можливостей для інтернет-магазинів представити свій бренд ширшій аудиторії. Однак, чи помічали ви, що Facebook та інші платформи не завжди вибирають релевантний контент із посилань, якими ви ділитеся?
Публікації в соціальних мережах можуть виглядати непослідовно та навіть дивно, що не лише відбиває бажання натискати на них, але й взагалі не привертає їхньої уваги.
Отже, поширення ваших продуктів та інших сторінок веб-сайту в соціальних мережах приносить вам користь лише в одному випадку — ти виділяєш свої постиА для цього вам слід дослідити метатеги open graph.
У цьому посібнику ви дізнаєтеся все необхідне, щоб зробити ваші публікації в соціальних мережах більш клікабельними та поширеними за допомогою тегів open graph.
Що таке метатеги Open Graph і що вони роблять?
Метатеги Open Graph також відомі як теги соціальних мереж, це невеликі фрагменти коду які є частиною Facebook Протокол Open Graph також визнаний Twitter та LinkedIn. Вони визначають, як URL-адреси вашого веб-сайту відображаються в соціальних мережах та інші месенджери.
Теги OG зазвичай позначаються як og: мета-властивість знаходиться в розділі <head> веб-сторінки.
![]()
Перше питання — чи можна обійтися без них?
Звісно.
Facebook підбиратиме контент вашого веб-сайту з даних, доступних на сторінці. Однак, найімовірніше, він не буде таким, як ви очікуєте.
Метатеги Open Graph значно покращують ситуацію. Просто погляньте на цей приклад.
| Публікація у Facebook без тегів відкритого графіка | Публікація у Facebook з тегами open graph |
ВНа який пост ви б воліли натиснути, коли він з'явиться у вашій стрічці?
Теги OG роблять ваші публікації в соціальних мережах привабливішими, клікабельнішими та поширенішими. Це призводить до збільшення трафіку веб-сайту та відповідно покращує впізнаваність бренду.
Крім того, описи та заголовки за замовчуванням не такі корисні для соціальних мереж, як для пошукових систем. Тому вам доведеться бути креативними.
Тепер давайте розглянемо найважливіші теги відкритого графу, які вам знадобляться.
Критичні теги відкритого графіка: визначення
Facebook визначає до 17 відкритих тегів графіків, але насправді вам потрібно лише кілька, щоб створювати публікації, що привертають увагу.
Є наступні:
og:заголовок — це базовий тег, який визначає заголовок сторінки.
og:url — визначає постійну канонічну URL-адресу спільної сторінки без параметрів.
og:опис — вказує опис спільної сторінки, який відрізняється від og:title.
og:зображення — URL-адреса зображення, пов’язаного зі спільною сторінкою.
Це особливо важливо, оскільки це головний елемент, що привертає увагу у ваших публікаціях. Тож обов’язково дотримуйтесь Вимоги Facebook для налаштування зображеньog:висота зображенняі og:ширина зображення додатково.
Готові їх застосувати?
Як додати метатеги Open Graph на вебсайт Magento?
Як ми вже уточнювали, Теги відкритого графіка розміщуються всередині тегу у верхній частині сторінкиОтже, вам доведеться додавати їх на сторінки вашого веб-сайту вручну.
Це включає певний технічний досвід. В іншому випадку ви можете просто попросити свого розробника додати відкриті теги графів.
У будь-якому разі, це виснажливий та трудомісткий процес, оскільки вам доведеться викликати розробника щоразу, коли потрібно оновити теги відкритого графіка для будь-якої зі сторінок.
Як альтернативу, ви можете інтегрувати розширення та легко керувати тегами OG з адміністративної панелі.
Ви можете додати Назва OG, Опис OG, та Зображення OG для найчастіше поширених сторінок, таких як товари та дописи в блозі.
![]()
Для решти сторінок ви можете просто встановити значення OG за замовчуванням.
![]()
Так, це так просто.
Але все ж, управління метатегами відкритого графіка на цьому не закінчується.
Перевірка тегів Open Graph
Після додавання відкритих тегів графіків на сторінки вашого веб-сайту, вам потрібно переконатися, що вони витягнуті правильно.
Іншими словами, вам потрібно перевірити теги OG, щоб побачити, як вони відображаються під час поширення в соціальних мережах.
Оскільки теги відкритого графіка є рідною функцією Facebook, ви можете почати з Налагоджувач спільного доступу до FacebookОднак, Twitter та LinkedIn також мають своїх валідаторів.
Налагоджувач поширення у Facebook збиратиме дані з вашого веб-сайту, щоб показати, як виглядатиме публікація в соціальних мережах.
![]()
Якщо дані неправильні, очистити кеш Facebook перевірте, чи оновилися результати.
Іноді може навіть статися так, що заголовок та опис правильні, але зображення не змінюється. Це може бути через ланцюжок перенаправлень, відсутню мета-властивість або кеш. Вам потрібно дослідити причини Чому зображення не відображаються у Facebook під час поширення посилань , щоб усунути ці проблеми.
Найкращі практики щодо тегів Open Graph
Якщо ви перевірите відкриті теги графа, і дані будуть зібрані правильно, ви все одно можете бути незадоволені результатом: це або спотворене зображення, або обрізаний заголовок та опис.
Чи можете ви це зрозуміти? / Чи можете ви це зрозуміти?
Можливо, ви не дотримуєтеся найкращих практик використання тегів OG, щоб забезпечити точність та привабливість контенту.
Отже, ось короткий огляд того, на що слід звернути увагу, додаючи метатеги open graph на свій вебсайт:
- Використовуйте лише канонічні URL-адреси для властивості og:url.
- Зробіть назву OG короткою (без назви бренду) з 60 символами для комп’ютерів та 40 для мобільних пристроїв.
- Опис має бути в межах 2-4 речень і використовуйте метаопис, якщо це має сенс.
- Створення власних оригінальних зображень для сторінок, якими можна ділитися, та використовуйте логотип або зображення бренду для інших сторінок.
- Використовуйте зображення розміром 1200x630 зберігати якість на всіх пристроях.
І остання порада, яку ви завжди повинні пам’ятати — поставте себе на місце своїх клієнтів. Ви можете використовувати найкращі практики, але все одно втрачати трафік та висвітлення в соціальних мережах.
Подумайте, що привертає вашу увагу, коли ви гортаєте стрічку. Як тільки ви знайдете те, що найкраще працює, ви зможете створювати видатні публікації за допомогою тегів OG.