*OGImageTool*Бесплатный генератор OG-изображений
Создавайте красивые OG-изображения, заголовки Twitter/X и многое другое бесплатно за несколько кликов.
Галерея превью
Посмотрите, что можно создать
Смахните, чтобы увидеть больше
Смахните, чтобы увидеть больше
Попробуйте прямо сейчас
Почему стоит выбрать OGImageTool?
Всё необходимое для создания потрясающих изображений для социальных сетей за секунды
Бесплатно и без регистрации
Начните создавать профессиональные OG-изображения мгновенно - без регистрации или кредитной карты.
Поддержка нескольких платформ
Создавайте оптимизированные изображения для любой платформы с правильными размерами.
Профессиональные шаблоны
Выбирайте из нескольких профессионально разработанных шаблонов: Basic, Hero, Image Right, Notice и Logos.
Гибкие варианты экспорта
Экспортируйте свои проекты в форматах PNG, JPEG или WebP с оптимизированным размером файла.
Расширенная настройка
Персонализируйте каждый аспект с пользовательскими фонами, узорами, градиентами и фирменными цветами.
Современные функции дизайна
Создавайте потрясающие визуальные эффекты с премиальной типографикой и визуальными эффектами.
Мгновенный предпросмотр
Просматривайте изменения в реальном времени с помощью нашего WYSIWYG-интерфейса.
Молниеносная скорость
Создавайте профессиональные изображения для социальных сетей за секунды.
Как добавить изображение Open Graph
Добавьте превью для соцсетей на свой сайт за несколько минут. Выберите предпочтительный способ ниже (HTML или Next.js App Router).
1. Сохранить изображение
Сохраните сгенерированное OG-изображение как og.png в корневой папке вашего сайта.
2. Добавить в HTML head
<!-- Basic OG Tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yourdomain.com/og.png" />
<meta property="og:url" content="https://yourdomain.com" />
<!-- Twitter/X Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og.png" />
<!-- Optional but recommended -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />Не забудьте заменить yourdomain.com на ваше реальное доменное имя.
Советы от экспертов
- Всегда предоставляйте запасные изображения на случай, если OG-изображение не загрузится
- Тестируйте OG-изображения с помощью инструментов отладки соцсетей
- Используйте описательные alt-тексты для лучшей доступности
- Рассмотрите возможность использования динамических OG-изображений для часто обновляемого контента