Сделать OG-картинку для превью ссылки

Перетащите картинку — кадр 1.91:1 уже поставлен по центру, ширина ограничена 1200 px, формат JPEG. Нажмите «Кадрировать», чтобы подвинуть рамку.

Что такое OG-картинка

Это изображение, которое видно, когда ссылку на страницу кидают в мессенджер или соцсеть. Задаётся оно метатегом og:image в разметке страницы. Пропорция 1200×630 — то самое соотношение 1.91:1, под которое верстают карточку ссылки большинство площадок; при другой пропорции они обрежут картинку сами, чаще всего не там, где хотелось бы.

Мы приводим кадр к 1.91:1 и ограничиваем длинную сторону 1200 px. Если нужен ровно 1200×630, после кадрирования выставьте это поле W×H в блоке «Разрешение».

Почему JPEG, а не WebP

Превью ссылок собирают не браузеры, а серверные обходчики мессенджеров и соцсетей — и поддержка форматов у них заметно отстаёт. JPEG покажут все без исключения; ради обложки, которая весит сотню килобайт, экономия от WebP того не стоит. Формат, разумеется, переключается.

Про вес

Обходчики нередко отказываются тянуть слишком тяжёлые картинки, и «превью не подтянулось» — типичный симптом. Держите обложку в пределах пары сотен килобайт: включите целевой вес, скажем 200 КБ, и качество подберётся само.

FAQ

Где потом прописать картинку?

В <head> страницы: og:imagetwitter:image для карточки Twitter). Абсолютным URL, не относительным — обходчик приходит со стороны.

Почему превью не обновляется после замены картинки?

Площадки кешируют обложку. У большинства есть свой отладчик ссылок, который умеет сбросить кеш; иначе помогает новый адрес файла.

Прозрачность сохранится?

В JPEG её нет — прозрачные места станут белыми. Для обложки ссылки это обычно и нужно.

Файлы уходят на сервер?

Нет. Кадрирование и сжатие идут в вашей вкладке.

А квадратная аватарка?

Это соседняя страница — аватарка 1:1.