Генератор социальных карточек (изображений Open Graph)
Создайте изображение Open Graph 1200×630 с заголовком, описанием и названием сайта на градиенте, скачайте PNG и скопируйте мета-теги og: и Twitter.
Соцсетям нужен абсолютный URL с https://.
Что такое Генератор социальных карточек?
Когда ссылку публикуют в Facebook, LinkedIn, X/Twitter, Slack или Discord, платформа показывает изображение Open Graph страницы. Инструмент создаёт такое изображение рекомендуемого размера 1200 × 630 px из ваших Заголовок, Описание и Название сайта или домен на цветном градиенте и пишет соответствующие мета-теги og: и twitter:.
Как пользоваться Генератор социальных карточек
- Введите Заголовок, Описание и Название сайта или домен.
- Выберите Тема либо задайте цвета градиента и текста сами.
- Нажмите Скачать PNG и загрузите изображение на свой сайт.
- Введите URL страницы и URL изображения (куда вы загрузите PNG), затем скопируйте Мета-теги Open Graph и Twitter в
<head>вашей страницы.
Пример
Title: Hello OG
<meta property="og:title" content="Hello OG"> … <meta name="twitter:card" content="summary_large_image">
Плюс изображение PNG 1200 × 630.
Когда использовать Генератор социальных карточек
Используйте для записей блога, запусков продуктов, страниц документации и любых страниц, которыми будут делиться. Для тысяч страниц лучше генерировать изображения автоматически при сборке. Соцсети кешируют предпросмотры, поэтому после смены изображения обновите его их инструментами отладки (Facebook Sharing Debugger, LinkedIn Post Inspector).
Как работает Генератор социальных карточек
Карточка рисуется на canvas 1200×630: фон — диагональный линейный градиент, вверху название сайта, заголовок жирным шрифтом (размер уменьшается с 72 px до 40 px, пока заголовок не уместится в три строки, с жадным переносом слов и разрывом по символам для письменностей без пробелов) и до двух строк описания. Текст справа налево, например арабский, автоматически выравнивается вправо. Мета-теги включают og:title, og:description, og:url, og:image с шириной и высотой и twitter:card со значением summary_large_image; все значения экранируются для HTML.
Распространенные Случаи Использования
- Создание изображения для публикации новой записи блога
- Единообразные карточки предпросмотра для страниц документации
- Анонс запуска продукта в LinkedIn и X
- Генерация мета-тегов og:image для лендинга
Часто Задаваемые Вопросы
Какого размера должно быть изображение Open Graph?
1200 × 630 пикселей (около 1,91:1) — рекомендуемый размер для больших карточек Facebook, LinkedIn и X.
Почему URL изображения должен быть абсолютным?
Соцсети загружают изображение со своих серверов, поэтому og:image должен быть полным URL с https://, а не относительным путём.
Новое изображение не появляется при публикации ссылки
Платформы кешируют предпросмотры. Пересканируйте URL отладчиком платформы или дождитесь истечения кеша.