Open Graph попередній перегляд

Що таке інструмент попереднього перегляду Open Graph?

Теги Open Graph (OG) — це HTML-мета-теги, що контролюють відображення вашої вебсторінки при поширенні в соціальних мережах, як-от Facebook, Twitter, LinkedIn та у месенджерах. Теги og:title, og:description, og:image та og:url визначають заголовок, анотацію, мініатюру та посилання у картці попереднього перегляду. Цей інструмент дозволяє переглянути, як виглядатиме ваша сторінка до того, як ви її поділитеся.

Без належних OG-тегів соціальні платформи намагаються вгадати заголовок та зображення зі вмісту сторінки, що часто дає потворний або оманливий попередній перегляд. Добре оформлений OG-перегляд значно підвищує клікабельність — публікації з оптимізованими зображеннями та описами отримують у 2–3 рази більше взаємодій, ніж без них.

Основні теги Open Graph

• og:title — заголовок, що відображається в картці попереднього перегляду. Тримайте до 60 символів.
• og:description — короткий опис вмісту сторінки. Тримайте до 155 символів.
• og:image — мініатюра для попереднього перегляду. Рекомендований розмір: 1200x630 пікселів для найкращого відображення на всіх платформах.
• og:url — канонічна URL-адреса сторінки.
• og:type — тип контенту (website, article, product тощо).

Як користуватися цим інструментом

Введіть URL-адресу, і інструмент отримає сторінку, витягне всі мета-теги Open Graph та Twitter Card та відобразить попередні перегляди того, як сторінка виглядатиме у Facebook, Twitter та LinkedIn. Відсутні або неправильно масштабовані зображення позначаються. Використовуйте це для перевірки OG-тегів перед публікацією контенту.

Twitter Cards та Open Graph

Twitter використовує власні мета-теги (twitter:card, twitter:title, twitter:description, twitter:image), але повертається до OG-тегів, коли специфічні для Twitter теги відсутні. Для максимальної сумісності включайте і OG-теги, і Twitter Card теги. Тег twitter:card (встановлений у summary_large_image для великого попереднього перегляду) є найважливішим специфічним для Twitter доповненням.

Приклад із практики

Задайте og:title як заголовок на 55 символів, og:description як опис на 155 символів, а og:image як зображення 1200x630 пікселів, потім вставте URL, щоб побачити картку. Саме до цього співвідношення (1,91:1) обрізають Facebook і LinkedIn, тож центрований об'єкт залишається видимим. Якщо og:image відсутній, платформи змушені вгадувати й часто беруть логотип чи перше зображення сторінки, що в стрічці рідко виглядає навмисним.

Поширені помилки

Найпоширеніша помилка — надто мале зображення: платформи хочуть щонайменше 1200x630, а все менше за 600x315 може відобразитися крихітною мініатюрою або взагалі зникнути. Відносні URL-адреси зображень — інша пастка: Open Graph вимагає абсолютної адреси https://, бо збирач працює на зовнішньому сервері. Нарешті, зміни кешуються, тож користуйтеся зневаджувачем кожної платформи, щоб примусити повторне зчитування після редагування тегів.

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

Чому мій попередній перегляд при поширенні не оновлюється після зміни OG-тегів?

Соціальні платформи агресивно кешують дані OG. Facebook кешує приблизно 30 днів. Для примусового оновлення використовуйте Sharing Debugger Facebook (developers.facebook.com/tools/debug/), Card Validator Twitter або Post Inspector LinkedIn. Ці інструменти очищають кеш і отримують свіжі OG-теги з вашої сторінки.

Який розмір зображення слід використовувати для OG?

Рекомендований розмір — 1200x630 пікселів (співвідношення сторін 1,91:1) для найкращого відображення на всіх платформах. Мінімум 600x315 пікселів. Facebook, Twitter та LinkedIn добре відображають це співвідношення. Використовуйте формат JPEG або PNG, тримайте розмір файлу до 5 МБ (в ідеалі до 300 КБ для швидкого завантаження). Уникайте зображень з великою кількістю тексту — деякі платформи обрізають по-різному.

Чи потрібні теги Twitter Card, якщо в мене вже є Open Graph?

Twitter використовує теги Open Graph для заголовка, опису та зображення, тож базовий обмін працює й без них. Додайте twitter:card (зазвичай summary_large_image), коли хочете більший макет або специфічну для Twitter атрибуцію через twitter:site. Інакше достатньо самого Open Graph.