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-тегів?

Соціальні платформи агресивно кешують дані 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 КБ для швидкого завантаження). Уникайте зображень з великою кількістю тексту — деякі платформи обрізають по-різному.