Генератор і попередній перегляд зображень Open Graph
Безплатний генератор і перегляд зображень Open Graph (OG Image) | We.Inc
Створіть у браузері зображення Open Graph 1200 x 630 із заголовком, підзаголовком, кольорами бренду й логотипом та завантажте PNG. Перегляньте картки Facebook, LinkedIn і X та скопіюйте метатеги. Безплатно.
Генератор і попередній перегляд зображень Open Graph
Створіть зображення, яке з’являється, коли хтось ділиться вашим посиланням. Уведіть заголовок і підзаголовок, виберіть кольори та макет, додайте логотип і завантажте PNG розміром 1200 x 630. Потім перевірте, як виглядатиме картка у Facebook, LinkedIn і X, та скопіюйте метатеги для сторінки. Усе працює у вашому браузері. Введені або завантажені дані не надсилаються до We.Inc чи будь-кому іншому.
Уведіть заголовок, необов’язковий підзаголовок і назву сайту. Довгі заголовки переносяться максимум на три рядки.
Виберіть макет, кольори тла й тексту або один із готових варіантів палітри.
За бажанням завантажте логотип (PNG, JPG, SVG або WebP). Він відображатиметься в куті й не залишатиме вашого пристрою.
Натисніть «Завантажити PNG», щоб зберегти зображення 1200 x 630 — такий розмір використовують Facebook, LinkedIn і X для великих карток посилань.
Завантажте зображення на сайт, вставте повну URL-адресу в поле Image URL і скопіюйте створені метатеги в розділ head сторінки.
Зробіть заголовок коротшим за приблизно 60 символів і достатньо великим для читання на телефоні, де картки поширень невеликі.
Залиште поля навколо тексту. Деякі застосунки обрізають краї або показують зображення квадратним.
Забезпечте високий контраст між текстом і тлом. Перевірити його можна інструментом для перевірки контрастності кольорів.
Після публікації соцмережі кешують старе зображення. Оновіть його через Facebook Sharing Debugger або LinkedIn Post Inspector.
Додайте окреме зображення до кожної важливої сторінки: картка лише з логотипом отримує менше натискань, ніж картка з назвою сторінки.
Поширені запитання
Якого розміру має бути зображення Open Graph?
1200 x 630 пікселів (співвідношення 1.91:1) — стандартний розмір великих карток Facebook, LinkedIn і X. Цей генератор завжди експортує саме зображення такого розміру.
Чи безплатний генератор OG-зображень?
Так. Реєстрація й водяний знак відсутні. Зображення створюється на полотні у вашому браузері й завантажується безпосередньо на ваш пристрій.
Чи кудись завантажується мій логотип?
Ні. Браузер зчитує логотип і локально додає його до зображення. Дані не надсилаються до We.Inc.
Як додати зображення на сайт?
Завантажте PNG на сайт, щоб отримати загальнодоступну URL-адресу, а потім додайте <meta property="og:image" content="that URL"> і тег twitter:image у розділ head сторінки. Вставте URL у цей інструмент, і він сформує теги за вас.
Чому після поширення посилання досі показується старе зображення?
Соцмережі кешують попередній перегляд. Повторно проскануйте URL через Facebook Sharing Debugger або LinkedIn Post Inspector чи зачекайте, доки кеш оновиться.
Чи може інструмент прочитати теги з опублікованої сторінки?
Ні. Браузери забороняють одному сайту читати інший, тож введіть заголовок, опис і URL-адресу зображення самостійно, а інструмент покаже, як вони виглядатимуть.
Для чого потрібне зображення Open Graph
Коли посилання вставляють у Facebook, LinkedIn, X, Slack або застосунок для повідомлень, той зчитує теги Open Graph сторінки та показує картку із зображенням, заголовком і коротким описом. Зображення займає найбільшу частину картки, тому від нього залежить, чи помітять посилання.
Якщо тег og:image відсутній, застосунок або не покаже зображення, або навмання вибере його зі сторінки. Достатньо простого зображення з назвою сторінки й вашим брендом, щоб створити продумане враження.
Три правила хорошого OG-зображення
Кількома великими словами поясніть тему сторінки. Використовуйте кольори бренду, щоб люди впізнавали вас серед поширень. Тримайте важливий вміст подалі від країв, оскільки деякі застосунки обрізають картку до квадрата або заокруглюють кути.
На сайті We.Inc
Для сайтів, створених у We.Inc, заголовок, опис і зображення поширення задаються на панелі SEO, тож теги створюються автоматично. Цей інструмент підходить для будь-якого сайту й допомагає створити саме зображення поширення.