Генератор Open Graph і карток для соцмереж

Як користуватися генератором Open Graph

1. Введіть Заголовок і Опис, які люди бачитимуть, коли діляться вашим посиланням. Вони можуть відрізнятися від SEO-заголовка: пишіть їх для соцмережевої стрічки.
2. Додайте URL сторінки (канонічну адресу) і URL зображення. Обидва мають бути абсолютними й починатися з https://.
3. Опишіть зображення в полі Опис зображення (alt-текст), щоб люди з програмами зчитування з екрана знали, що на ньому.
4. Виберіть або перетягніть ту саму картинку в Зображення для перегляду. Вона залишається на вашому пристрої: інструмент використовує її лише для малювання переглядів і заповнення Ширина зображення (пікс.) та Висота зображення (пікс.).
5. Задайте Назва сайту, Тип вмісту і Локаль, потім виберіть стиль Картка X (Twitter) і, якщо вони є, акаунти сайту та автора в X.
6. Перевірте перегляди й список Перевірки, потім Копіювати або Завантажити теги й вставте їх усередину <head> сторінки.

Усе відбувається у вашому браузері: нічого з того, що ви вводите, не надсилається на сервер.

Що роблять теги Open Graph

Коли посилання вставляють у Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage та багато інших застосунків, сканер завантажує сторінку й читає її мета-теги Open Graph (og:), щоб побудувати картку: зображення, заголовок, короткий опис і домен. Без цих тегів застосунок вгадує, часто обираючи логотип, банер про cookie чи перше речення меню.

Чотири базові властивості – og:title, og:type, og:image і og:url. Цей інструмент також додає og:description, og:site_name, og:locale та відомості про зображення (og:image:width, og:image:height, og:image:alt). Якщо вказати розмір зображення, деякі платформи зможуть відобразити картку вже за першого поширення, не чекаючи, поки зображення завантажиться.

X читає власні теги twitter:, але за їхньої відсутності використовує заголовок, опис і зображення з Open Graph, тому інструмент додає лише те, що справді потрібне X: twitter:card, необов’язкові акаунти й опис зображення. Так уникається дублювання кожного значення.

Розміри зображень, що працюють усюди

Використовуйте JPEG або PNG, тримайте файл помірного розміру (значно менше за 5 МБ) і не розміщуйте важливий текст біля країв, адже кожна платформа обрізає по-своєму. Перегляди в цьому інструменті – наближення таких макетів, а не знімки екрана.

Після публікації

Соцмережі кешують перегляди посилань, іноді на кілька днів. Після зміни тегів попросіть їх зчитати сторінку знову за допомогою Facebook Sharing Debugger або LinkedIn Post Inspector. Сторінка має бути загальнодоступною: сканери не бачать сторінок за входом чи на localhost.