Генератор OG-картинок
Соберите обложку для превью ссылки: введите заголовок, выберите цвета и при желании добавьте логотип. Картинка 1200 × 630 рисуется прямо в браузере.
Зачем нужна OG-картинка
Когда ссылку на страницу отправляют в Telegram, публикуют во ВКонтакте или в любой соцсети, рядом появляется карточка: заголовок, описание и картинка. Картинку площадка берёт из тега og:image. Если его нет, карточка будет без картинки или со случайным изображением со страницы — логотипом партнёра, иконкой, баннером.
Хорошая обложка заметнее в ленте и чате, на неё чаще нажимают. Для этого не нужен дизайнер: достаточно крупного читаемого заголовка на однотонном или градиентном фоне в фирменных цветах.
Требования к картинке
| Параметр | Рекомендация |
|---|---|
| Размер | 1200 × 630 пикселей, соотношение 1,91 : 1 |
| Формат | PNG для графики и текста, JPG — если важен вес |
| Вес | до 5 МБ, лучше до 300 КБ — мессенджеры быстрее загружают лёгкие картинки |
| Текст | крупно, до 6–8 слов, отступы от краёв не меньше 60 пикселей — края могут обрезаться |
| Адрес | полный, с https://, в теге <meta property="og:image"> |
Как подключить
Загрузите картинку на сайт и пропишите её адрес в теге og:image страницы. Готовый набор тегов удобно собрать в генераторе Open Graph, а проверить, как ссылка выглядит в мессенджерах, — в проверке Open Graph. Если картинка не обновилась в Telegram, отправьте ссылку боту @WebpageBot — он сбросит кеш карточки.
Частые вопросы
Не нашли ответ? Напишите в Telegram
Можно сделать картинки для всех страниц сразу?
Здесь — по одной. Для каталога или блога картинки лучше генерировать автоматически по шаблону на стороне сайта: заголовок страницы подставляется в макет при публикации.
Какой шрифт используется?
Rubik — тот же, что на этом сайте. Он хорошо читается на маленьких превью и поддерживает кириллицу.
Логотип загружается на сервер?
Нет. Картинка рисуется в вашем браузере, файл логотипа никуда не отправляется.
Почему длинный заголовок стал мельче?
Размер подбирается так, чтобы заголовок поместился в четыре строки. Короткий заголовок крупнее и заметнее в ленте — старайтесь уложиться в 6–8 слов.
Нужны обложки для всех страниц сайта?
Для каталога и блога картинки лучше генерировать автоматически по шаблону. Напишите — настроим, чтобы у каждой страницы была своя.