Генератор OG-изображений — создайте картинку 1200×630 для соцсетей

Что такое OG-изображение?

OG-изображение (Open Graph) — это картинка, которая отображается, когда ссылку публикуют в Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage и во многих других приложениях. Оно задаётся мета-тегом og:image из протокола Open Graph, созданного Facebook, и его читает почти каждая платформа, показывающая превью ссылок. X дополнительно учитывает twitter:card: при значении summary_large_image изображение выводится на всю ширину. Понятное брендированное превью выделяет ссылку в ленте и показывает людям, что их ждёт, ещё до перехода.

Правильный размер: 1200 × 630

Размер 1200×630 пикселей (соотношение сторон 1,91:1) рекомендует Facebook, и на всех платформах он выглядит чётко. Большая карточка X использует кадр 2:1, поэтому несколько пикселей сверху и снизу могут обрезаться. Генератор оставляет текст внутри безопасных полей. Держите файл меньше 5 МБ (ограничение X; Facebook допускает 8 МБ). PNG из этого инструмента обычно весит несколько сотен КБ, а для фотографий в фоне JPEG получается меньше.

Нужные мета-теги

<meta property="og:title" content="How to Compress Images">
<meta property="og:description" content="A practical guide…">
<meta property="og:image" content="https://example.com/og/compress.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

URL в og:image должен быть абсолютным (с https://) и открытым для доступа: не за логином, не запрещённым в robots.txt и не на localhost. Указание ширины и высоты позволяет Facebook отрисовать превью уже при первой публикации, не дожидаясь загрузки изображения. Остальные теги head создайте с помощью Генератора мета-тегов и проверьте итоговый результат в Open Graph Checker.

Советы по дизайну превью

• Короткий крупный текст. На телефонах превью часто показывают шириной около 500 px или меньше. Старайтесь делать заголовок из 4–10 слов: автоподбор предупредит, если текст пришлось обрезать.
• Не повторяйте адрес. Платформы и так показывают домен и заголовок страницы под изображением, поэтому используйте картинку для зацепки, а не полный заголовок с описанием.
• Высокий контраст. Для фото используйте ползунок затемнения, чтобы белый текст оставался читаемым, и проверяйте картинку на светлой и тёмной темах приложений.
• Одно изображение на страницу. Уникальные OG-изображения для важных страниц — статей блога, страниц товаров, документации — привлекают заметно больше внимания, чем один логотип для всего сайта.
• Обновление кеша. Платформы кешируют превью. После смены изображения пересканируйте URL в Sharing Debugger от Facebook или Post Inspector от LinkedIn либо дайте файлу новое имя.

В Webflow задайте изображение для каждой страницы в разделе Page settings → Open Graph settings или привяжите его к полю изображения для страниц коллекций CMS.

Также ищут как: og image генератор, open graph картинка, картинка для соцсетей 1200x630, og:image мета тег, превью ссылки картинка, twitter card изображение.

Инструменты, которые хорошо сочетаются с Генератор OG-картинок

• Код в картинку — Вставьте фрагмент и получите аккуратный скриншот кода за несколько секунд: подсветка синтаксиса для JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go и PHP, выбор тем, окно с именем файла, градиентный или прозрачный фон, отступы и номера строк.
• Превью SERP — Напишите тег title и meta description и посмотрите, где Google, скорее всего, обрежет текст.
• Изменить размер изображения — Измените размер фото до точных размеров в пикселях или процентах, обрежьте его под формат соцсети или впишите в рамку с цветом фона.
• Сжатие изображений — Уменьшите фото и графику до 90% без заметной потери качества — всё зависит от изображения и настроек.