Щоразу, коли ви ділитеся веб-посиланням у публікації на Facebook, вставляєте статтю в групу Telegram або надсилаєте DM сторінку продукту другові в Twitter, ви очікуєте, що з’явиться вишукана картка попереднього перегляду. Ця картка — із чітким зображенням банера, привабливим заголовком і коротким підсумком — не є випадковою. Його створено за допомогою стандартизованої веб-специфікації під назвою протокол Open Graph. Але якщо в коді вашого веб-сайту немає цих мета-тегів, соціальні платформи відображатимуть потворний, зламаний сірий квадрат або виберуть випадкову мініатюру з вашої сторінки. Вивчення механіки тегів відкритого графіка є важливим для веб-розробників і технічних маркетологів.

Спочатку представлений Facebook у 2010 році протокол Open Graph був розроблений для інтеграції зовнішніх веб-сторінок у мережі соціальних графів. До Open Graph соціальним мережам доводилося вгадувати, про що йдеться в статті, вичищаючи необроблений текст абзацу та скануючи теги зображень HTML, що часто призводило до незручних візуальних попередніх переглядів. Сьогодні Open Graph став універсальним інтернет-стандартом, який підтримується LinkedIn, Pinterest, Twitter, Telegram, Discord, Slack і WhatsApp. У цьому детальному технічному дослідженні ви дізнаєтеся точний синтаксис основних тегів OG, зрозумієте вимоги до розмірів зображення та дізнаєтеся, як налагодити та оптимізувати картки попереднього перегляду для максимальної соціальної взаємодії.

Опановуючи метадані Open Graph, ви гарантуєте, що кожне посилання, яким ви ділитеся з вашого домену, виглядає захоплююче, професійно та оптимізовано для поширення в соціальних мережах.

Окрім загальнодоступних каналів соціальних мереж, теги Open Graph також керують відображенням посилань у програмному забезпеченні для приватної співпраці та інструментах командного обміну повідомленнями, як-от Slack, Microsoft Teams і Discord. Коли член команди вставляє вашу URL-адресу в корпоративний канал Slack або на сервер Discord розробника, внутрішній бот програми аналізує ваші метадані Open Graph у режимі реального часу, відображаючи ваш заголовок, мініатюру та підсумковий фрагмент безпосередньо в потоці чату. Високоякісні метадані гарантують, що внутрішні зацікавлені сторони та члени спільноти негайно залучатимуть ваше посилання.

Що таке протокол Open Graph?

Протокол Open Graph — це набір структурованих метатегів, які веб-розробники розміщують у розділі <head> документа HTML. Коли автоматизований сканер (наприклад, facebookexternalhit або TelegramBot) відвідує вашу сторінку, він аналізує ці теги, щоб створити інтерактивний розширений об’єкт попереднього перегляду.

Без тегів Open Graph спільне посилання — це просто плоский текст. За допомогою тегів Open Graph ваше посилання перетворюється на добре помітну інтерактивну візуальну картку, яка забезпечує значно вищий рейтинг кліків у соціальних стрічках.

Основні теги Open Graph, які ви повинні включити

Кожна загальнодоступна веб-сторінка має містити чотири основні теги Open Graph для забезпечення узгодженого відтворення на всіх основних платформах:

Мета-тег властивості Приклад синтаксису Технічне призначення та вказівки
og:title <meta property="og:title" content="Page Title" /> Заголовок вашого вмісту; зберігайте до 60 символів для мобільних пристроїв
og:description <meta property="og:description" content="Summary" /> Дворядковий підсумковий фрагмент; цілі 140–160 символів
og:image <meta property="og:image" content="https://..." /> Абсолютна URL-адреса HTTPS до мініатюри попереднього перегляду
og:url <meta property="og:url" content="https://..." /> Канонічна URL-адреса ресурсу для консолідації соціальних сигналів
og:type <meta property="og:type" content="article" /> Класифікує тип вмісту (наприклад, веб-сайт, стаття, відео, профіль)

Завжди переконайтеся, що og:url відповідає вашому тегу канонічного посилання, запобігаючи фрагментації підрахунків соціальних взаємодій і сигналів зворотних посилань між варіантами URL-адрес.

Оптимізація зображень Open Graph для сучасних дисплеїв

Зображення є найважливішим елементом будь-якої картки попереднього перегляду. Щоб ваша графіка відтворювалася з первозданною чіткістю на сучасних екранах смартфонів із високою роздільною здатністю, дотримуйтеся цих технічних характеристик:

  • Стандартна роздільна здатність (1,91:1): використовуйте 1200x630 пікселів. Це універсальний стандарт для підсумкових карток Facebook, LinkedIn і Twitter.
  • Широкоекранний варіант (16:9): 1200x675 пікселів широко використовується для відеовмісту, публікацій на YouTube і сучасних адаптивних блогів.
  • Явно зазначте розміри: завжди включайте <meta property="og:image:width" content="1200" /> і <meta property="og:image:height" content="630" />. Це дозволяє сканерам соціальних мереж відтворювати макет картки відразу під час першого сканування без необхідності завантажувати та асинхронно обчислювати розміри зображення.
  • Обмеження розміру файлу: розмір файлу не повинен перевищувати 5 МБ. Більшість соціальних скребків припинять завантаження зображень, які перевищують 5 МБ, щоб зберегти пропускну здатність мережі.
  • Центрувати критичний текст: Соціальні платформи обрізають попередній перегляд графіки по-різному на мобільних каналах порівняно з бічними панелями робочого столу. Зберігайте всі важливі логотипи, текстові заголовки та обличчя в центрі середньої «безпечної зони» зображення.

Картки Twitter проти Open Graph: як вони взаємодіють

Twitter (X) підтримує власну власну розмітку метаданих, яка називається Twitter Cards, але вона також оригінально підтримує резервну версію Open Graph.

Щоб переконатися, що ваші посилання відображаються у Twitter як великі, привабливі візуальні картки, а не крихітні квадратні мініатюри, додайте ці спеціальні теги Twitter поряд із тегами Open Graph:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Catchy Headline" />
<meta name="twitter:description" content="Engaging summary snippet." />
<meta name="twitter:image" content="https://yourbrand.com/images/og-image.jpg" />

Встановлення для twitter:card значення summary_large_image є обов’язковим, якщо ви бажаєте візуальний попередній перегляд на всю ширину. Якщо його опустити, Twitter за замовчуванням використовує компактний лише текстовий попередній перегляд, який привертає набагато менше кліків.

Досвідчені видавці також повинні застосувати додаткові властивості Open Graph, такі як og:locale і article:published_time. Оголошення og:locale інформує сканерів про основну мову та регіональне форматування вмісту, тоді як мітки часу публікації допомагають механізмам виявлення вмісту, таким як Google Discover, розпізнавати свіжі редакційні звіти.

Також доцільно підтримувати структуровану резервну ієрархію зображень. Якщо автор забуває завантажити спеціальне зображення для певної публікації в блозі, ваш шаблон керування вмістом має автоматично вставляти чисту графіку бренду з високою роздільною здатністю за замовчуванням, а не дозволяти сканерам відтворювати порожню картку попереднього перегляду.

Ви також можете дослідити, як теги Open Graph взаємодіють із фірмовими субдоменами, у нашому посібнику про фірмові субдомени.

Створюйте безперебійні розумні посилання за допомогою DSLink

Обходьте бар’єри веб-переглядача в додатку, направляйте користувачів мобільних пристроїв прямо в рідні додатки та оптимізуйте конверсії за допомогою інтелектуального глибокого посилання.

Почати безкоштовно — Кредитна картка не потрібна

Тестування, перевірка та усунення несправностей тегів попереднього перегляду

Перш ніж запускати маркетингову кампанію або публічно ділитися посиланнями, завжди перевіряйте свої теги Open Graph за допомогою офіційних пакетів налагодження платформи:

  • Налагоджувач мета-обміну: вставте свою URL-адресу, щоб переглянути картки Facebook, перевірити попередження про теги та примусово оновити кеш сканера, як описано в нашому посібнику щодо виправлення неправильних зображень попереднього перегляду.
  • Telegram @WebpageBot: надішліть своє посилання цьому перевіреному боту в Telegram, щоб перевірити візуалізацію мобільного попереднього перегляду та очистити стару кешовану графіку.
  • Інспектор повідомлень LinkedIn: очищає кеш попереднього перегляду посилань LinkedIn за семи днів і повідомляє про відсутність полів метаданих.
  • Автоматична перевірка посилань: перевірте ланцюжки перенаправлення, сертифікати SSL і коди статусу за допомогою нашого безкоштовного інструмента перевірки посилань.

Впроваджуючи повні метадані Open Graph і перевіряючи візуалізацію попереднього перегляду на кожній основній платформі, ви гарантуєте, що ваші веб-посилання виділятимуться серед переповнених каналів і сприятимуть максимальному залученню.

Часті запитання

Що робить Open Graph?

Метатеги Open Graph повідомляють платформам соціальних мереж (таким як Facebook, LinkedIn, Twitter і Telegram), який заголовок, опис і зображення відображати, коли хтось ділиться вашою URL-адресою.

Куди йдуть теги Open Graph у HTML?

Теги Open Graph належать до головного розділу HTML вашої сторінки, відформатованого за допомогою мета-тегів властивостей з атрибутами імені та вмісту.

Який найкращий розмір зображення для Open Graph?

Оптимальна роздільна здатність – 1200x630 пікселів із співвідношенням сторін 1,91:1. Для широкоекранних форматів 16:9 1200x675 пікселів також широко підтримується на сучасних дисплеях.

Чому моє зображення Open Graph не відображається в соціальних мережах?

Поширені причини включають використання відносних URL-адрес замість абсолютних посилань HTTPS, розміри файлів зображень, що перевищують 5 МБ, постійність кешу сканера або блокування брандмауером у соціальних скребках.