Генератор Open Graph
Создавайте метатеги Open Graph и карточки Twitter для своего сайта с нашим бесплатным онлайн-генератором тегов OG. Заполните данные страницы и сразу посмотрите, как ваша ссылка будет выглядеть в Facebook, X/Twitter и LinkedIn. Настройте заголовок OG, описание, изображение, название сайта и тип карточки с отрисовкой социальной карточки в реальном времени. Весь сгенерированный HTML готов для копирования в <head> вашего сайта - без регистрации.
Fill in your page details. Twitter tags will fall back to OG values if left blank.
Зачем использовать наш генератор Open Graph?
- Кроссплатформенный предпросмотр в соцсетях: смотрите, как именно ваша ссылка будет выглядеть в Facebook, X/Twitter и LinkedIn - всё в реальном времени. Просматривайте расширенные карточки с изображениями, заголовками, описаниями и названием сайта до публикации.
- Живой предпросмотр по мере ввода: каждое изменение заголовка OG, описания или URL изображения мгновенно обновляет предпросмотр социальной карточки. Не нужно генерировать и проверять - вы видите то, что отобразят платформы.
- Проверка размеров изображения: изображения OG должны быть не меньше 1200×630 пикселей с пропорцией 1,91:1 для оптимальной отрисовки. Наш инструмент проверяет URL изображения и предупреждает о типичных проблемах, таких как битые ссылки или недействительные URL.
- 100 % приватно и на стороне клиента: вся генерация тегов и отрисовка предпросмотра происходят полностью в вашем браузере. Никакие URL страниц, заголовки, описания или изображения никогда не загружаются на сервер - ваши данные остаются вашими.
Типичные варианты использования генератора Open Graph
- SEO-специалисты и маркетологи: оптимизируйте внешний вид контента при публикации в соцсетях. Просматривайте и дорабатывайте теги OG, чтобы повысить кликабельность репостов в Facebook, X, LinkedIn и Slack.
- Веб-разработчики и дизайнеры: быстро создавайте метатеги OG и карточек Twitter для новых целевых страниц, статей блога или веб-приложений. Копируйте точный фрагмент HTML для вставки в шаблоны.
- SMM-специалисты: проверяйте, как будут выглядеть ссылки при публикации на разных платформах, до публикации. Убедитесь, что изображения, заголовки и описания выглядят профессионально и в едином стиле бренда везде.
- Авторы контента и блогеры: готовьте и просматривайте, как ваши статьи и посты будут выглядеть при публикации. Сделайте контент заметным в переполненных лентах соцсетей с помощью привлекательных метаданных OG.
- Стартапы и запуски продуктов: настройте корректные теги предпросмотра в соцсетях для страниц запуска, целевых страниц и маркетинговых кампаний. Первое впечатление важно - сделайте ссылки премиальными везде.
- Владельцы интернет-магазинов: создавайте теги OG для страниц товаров, чтобы показывать расширенный предпросмотр с изображениями товара, ценами и описаниями при публикации в соцсетях. Привлекайте больше трафика из репостов.
Понимание тегов Open Graph и соцсетей
- Ключевые теги Open Graph: это самые важные теги. og:title задаёт заголовок вашего контента (в идеале 40-60 символов), а og:description даёт резюме в 2-3 предложения (150-200 символов). Вместе они формируют текстовый предпросмотр, который пользователи видят до клика.
- og:image и og:image:width/height: изображение OG - визуальный якорь вашей социальной карточки. Рекомендуемый размер - 1200×630 пикселей (пропорция 1,91:1) для оптимального отображения на всех платформах. Всегда указывайте ширину и высоту, чтобы избежать сдвигов вёрстки при загрузке изображения.
- og:url и og:type: og:url задаёт канонический URL для публикуемого контента - все социальные сигналы указывают на этот URL. og:type сообщает платформам, какой тип контента вы публикуете (website, article, video.movie, music.song и др.), для корректной отрисовки.
- Карточки Twitter: Twitter/X использует собственные метатеги (twitter:card, twitter:site, twitter:creator) вместе с тегами OG. Используйте summary_large_image для заметной карточки с фото или summary для компактной карточки с миниатюрой. Twitter обращается к значениям OG, если специфичные теги Twitter не указаны.
- Требования к изображениям и лучшие практики: изображения OG должны быть не меньше 600×315 пикселей, но для экранов высокой плотности рекомендуется 1200×630 пикселей. Изображения меньше 200×200 пикселей не отображаются в Facebook.
Часто задаваемые вопросы
Генератор Open Graph - это инструмент, помогающий создать метатеги (теги OG), необходимые для расширенного предпросмотра в соцсетях. Когда вы делитесь ссылкой в Facebook, LinkedIn, X/Twitter или Slack, эти платформы используют теги OG, чтобы показать карточку с заголовком, описанием и изображением. Наш генератор предлагает простую форму для ввода данных и мгновенный предпросмотр того, как ссылка будет выглядеть на разных платформах.
Теги Open Graph (og:title, og:image и др.) используют Facebook, LinkedIn, Discord, Slack и многие другие платформы. Карточки Twitter - это теги, специфичные для Twitter/X (twitter:card, twitter:site, twitter:creator), дающие дополнительный контроль над тем, как контент выглядит в Twitter. Twitter также поддерживает теги OG как запасной вариант: если специфичных тегов Twitter нет, Twitter использует значения OG.
Рекомендуемый размер изображения OG - 1200×630 пикселей с пропорцией 1,91:1. Это обеспечивает оптимальное отображение в Facebook, LinkedIn, Twitter и большинстве других платформ. Минимально допустимый размер - 600×315 пикселей. Всегда используйте изображения высокого разрешения для чёткого отображения на Retina и экранах с высокой плотностью.
Есть несколько распространённых причин: (1) URL изображения не абсолютный (должен начинаться с https://), (2) изображение слишком маленькое (меньше 200×200 пикселей), (3) формат изображения не поддерживается, (4) сервер блокирует сканеры или (5) платформа закешировала более старую версию. Используйте Facebook Sharing Debugger или Twitter Card Validator для диагностики и обновления.
Используйте эти официальные инструменты отладки: Facebook Sharing Debugger (developers.facebook.com/tools/debug), Twitter Card Validator (cards-dev.twitter.com/validator) и LinkedIn Post Inspector (linkedin.com/post-inspector). Введите свой URL, чтобы увидеть, как каждая платформа читает ваши теги, и очистить кешированные предпросмотры.
Для заголовков OG (og:title) стремитесь к 40-60 символам. Facebook показывает до ~90 символов перед обрезкой. Для описаний OG (og:description) держитесь в пределах 150-200 символов. Заголовки Twitter должны быть короче 70 символов для оптимального отображения.
Лучшая практика - включать оба. Хотя Twitter поддерживает теги OG как запасной вариант, явные карточки Twitter дают полный контроль над тем, как контент выглядит в X/Twitter, с поддержкой типа карточки summary_large_image и указанием автора.
Нет. Все URL изображений OG и Twitter должны быть абсолютными и начинаться с https://. Сканеры социальных платформ получают исходный код вашей страницы и нуждаются в полном URL для загрузки изображения. Относительные пути не сработают, потому что сканер не может их разрешить.
Да, наш генератор Open Graph на 100 % бесплатен и работает полностью в вашем браузере. Никакие URL страниц, заголовки, описания или URL изображений никогда не отправляются на сервер. Ваши данные остаются приватными и никогда не покидают устройство.