Як користуватися

Введіть og:title і og:description, які вже використовуєте або плануєте використовувати на сторінці.
Вставте повний URL для og:image. Інструмент завантажить зображення та покаже його фактичний розмір у пікселях.
Додайте URL сторінки або домен, а потім порівняйте попередній перегляд великої та малої карток і усуньте попередження.

Як це працює

Коли хтось ділиться посиланням, більшість соцмереж і чатів завантажують сторінку та читають її теги Open Graph: og:title, og:description, og:image і og:url. На їхній основі вони створюють картку посилання. Широке зображення зі співвідношенням сторін близько 1.91:1 зазвичай утворює велику картку із зображенням угорі; мале або квадратне зображення часто показують у компактній картці — мініатюра поруч із текстом.

Цей інструмент показує два типові варіанти карток, щоб ви могли оцінити довжину тексту й кадрування зображення. Після завантаження зображення браузером інструмент перевіряє його фактичний розмір: якщо він менший за 200 × 200 px, багато застосунків не показуватимуть зображення; якщо менший за 600 × 315 px — зазвичай використовуватимуть компактний макет; а значне відхилення від співвідношення 1.91:1 означає, що зображення буде обрізано. Розмір 1200 × 630 px широко рекомендований, оскільки з ним зображення залишається чітким на екранах із високою щільністю пікселів.

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

Приклади

Знімок екрана як og:image

Знімок екрана розміром 1440 × 900 має співвідношення сторін 1.6:1. Інструмент попереджає про це співвідношення: у великій картці зображення обріжеться згори та знизу. Експорт у розмірі 1200 × 630 допоможе уникнути несподіванок.

Логотип як єдине зображення

Логотип розміром 180 × 180 менший за 200 × 200 px, тому багато застосунків не показуватимуть зображення. Краще використати більший широкий банер із логотипом.

Перевірка довжини заголовка

Заголовок og:title із 90 символів переноситься на три рядки у попередньому перегляді великої картки. Якщо скоротити його приблизно до 60 символів, картка матиме охайний вигляд у більшості застосунків.

Поширені запитання

Чому моє посилання має різний вигляд у Facebook, LinkedIn і X?

Кожна платформа має власний макет карток, спосіб кадрування й обмеження на текст; одні показують опис, інші — ні. Цей попередній перегляд є типовою приблизною версією, а не копією дизайну певної платформи.

Я змінив og:image, але старе зображення досі відображається. Чому?

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

Чи можна використовувати зображення SVG або WebP?

Більшість платформ не підтримують SVG. WebP працює в багатьох застосунках, але не в усіх; JPG або PNG — найнадійніший вибір.

Чому інструмент не може завантажити моє зображення?

Для доступу до URL може знадобитися вхід у систему, він може вести на HTML-сторінку, а не безпосередньо на зображення, або сервер може блокувати запити з інших сайтів. Якщо браузер не може завантажити зображення тут, сканер соцмережі теж може не впоратися.

Конфіденційність

Введений текст залишається у вашому браузері. Щоб перевірити зображення, браузер запитує його безпосередньо за вказаним URL, не передаючи адресу сторінки, з якої перейшли. Тож сервер отримує звичайний запит зображення. Дані не надсилаються до TIG Tools.