Бесплатный генератор Open Graph изображения (OG) и превью | 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 символов и достаточно крупным для чтения на телефоне, где карточки маленькие.
Оставьте поля вокруг текста. Некоторые приложения обрезают края или показывают изображение квадратом.
Используйте сильный контраст между текстом и фоном. Проверка контраста цветов может это подтвердить.
После публикации соцсети кешируют старое изображение. Sharing Debugger от Facebook и Post Inspector от LinkedIn могут его обновить.
Давайте каждой важной странице своё изображение; карточка с общим логотипом получает меньше кликов, чем та, что называет страницу.
Частые вопросы
Какого размера должно быть изображение Open Graph?
1200 x 630 пикселей (соотношение 1,91:1) — стандарт для больших карточек Facebook, LinkedIn и X. Этот генератор всегда экспортирует ровно этот размер.
Этот генератор OG-изображений бесплатный?
Да. Без регистрации и без водяных знаков. Изображение рисуется на canvas в вашем браузере и скачивается прямо на ваше устройство.
Мой логотип куда-то загружается?
Нет. Логотип читается вашим браузером и рисуется на изображении локально. Ничего не отправляется в We.Inc.
Как добавить изображение на свой сайт?
Загрузите PNG на свой сайт, чтобы у него был публичный URL, затем добавьте <meta property="og:image" content="этот URL"> и тег twitter:image в head страницы. Вставьте URL в инструмент, и он напишет теги за вас.
Почему при шаринге ссылки всё ещё показывается старое изображение?
Соцсети кешируют превью. Пересканируйте URL через Sharing Debugger от Facebook или Post Inspector от LinkedIn, либо дождитесь истечения кеша.
Он может прочитать теги с моей живой страницы?
Нет. Браузеры не дают одному сайту читать другой, поэтому вы сами вводите заголовок, описание и URL изображения, а инструмент показывает, как они будут выглядеть.
Что делает изображение Open Graph
Когда ссылку вставляют в Facebook, LinkedIn, X, Slack или мессенджер, приложение читает теги Open Graph страницы и показывает карточку с изображением, заголовком и коротким описанием. Изображение — самая крупная часть этой карточки, так что именно оно решает, заметят ли ссылку вообще.
Без тега og:image приложения либо не показывают картинку, либо выбирают её со страницы наугад. Простого изображения с заголовком страницы и вашим брендом достаточно, чтобы выглядеть продуманно.
Хорошее OG-изображение в трёх правилах
Скажите, о чём страница, в нескольких словах крупным текстом. Используйте фирменные цвета, чтобы вас узнавали в разных публикациях. Держите важный контент подальше от краёв, потому что некоторые приложения обрезают до квадрата или скругляют углы.
На сайте We.Inc
У сайтов, созданных на We.Inc, есть заголовок страницы, описание и картинка для шаринга, которые можно задать в панели SEO, так что теги пишутся за вас. Этот инструмент полезен для любого сайта и для создания самой картинки для шаринга.