Генератор Open Graph
тегов
Что такое Open Graph Protocol
Open Graph Protocol (OGP) — это стандарт разметки веб-страниц мета-тегами, позволяющий контролировать, как ваш контент отображается при публикации ссылок в социальных сетях и мессенджерах. Когда пользователь делится ссылкой в VK, Telegram или Facebook, платформа считывает OG-теги и формирует красивую карточку с заголовком, описанием и картинкой.
Происхождение
Протокол Open Graph создан компанией Facebook (Meta) в 2010 году для управления тем, как ссылки отображаются в ленте новостей. С тех пор он стал стандартом де-факто: его поддерживают VK, Telegram, Twitter, LinkedIn, Pinterest и все крупные платформы.
Как работает
OG-теги размещаются в секции <head> HTML-документа в виде мета-тегов с атрибутом property. Когда краулер соцсети обращается к URL, он парсит эти теги и использует их данные для формирования карточки вместо автоматического извлечения контента со страницы.
Зачем нужен
Без OG-тегов соцсети берут случайный текст и картинку со страницы, что приводит к некрасивым превью. Правильная OG-разметка увеличивает CTR ссылок на 20-50%, улучшает узнаваемость бренда и создает профессиональное впечатление при каждом шаринге.
Где используются OG-теги
Open Graph теги необходимы для любого сайта, который продвигается через социальные сети и мессенджеры.
ВКонтакте
VK полностью поддерживает Open Graph. Карточка ссылки показывается в ленте, личных сообщениях и комментариях. Поддерживается дополнительный тег vk:image для отдельного изображения при шаринге в VK.
Telegram
Telegram Instant View использует OG-теги для генерации превью ссылок в чатах и каналах. Красивая карточка с изображением увеличивает вовлеченность подписчиков и количество переходов по ссылке.
Facebook и Instagram
Facebook — создатель Open Graph. Платформа использует теги для формирования карточек в ленте, Stories и Messenger. Для проверки разметки есть официальный инструмент Sharing Debugger.
Twitter (X) Card
Twitter использует собственные мета-теги (twitter:card, twitter:title), но фоллбэчит на OG-теги при их отсутствии. Два основных типа карточек: summary (маленькая) и summary_large_image (большая).
SEO и поисковики
Яндекс и Google учитывают OG-теги для формирования сниппетов в поисковой выдаче. Корректная разметка улучшает CTR из поиска и помогает поисковым роботам лучше понимать содержание страницы.
Мессенджеры и сервисы
WhatsApp, Viber, Slack, Discord, LinkedIn, Pinterest — все эти платформы используют OG-теги для генерации превью ссылок. Одна разметка работает на десятках платформ одновременно.
Справочник OG-тегов/ полное руководство
Основные Open Graph мета-теги, которые необходимо указывать на каждой странице вашего сайта. Четыре обязательных тега выделены отдельно.
Обязательные теги
og:titleЗаголовок страницы. Отображается крупным шрифтом в карточке. Рекомендуемая длина: 60-90 символов.og:typeТип контента: website, article, product, profile, video.other, music.song и другие.og:imageURL изображения для карточки. Абсолютный путь (https://...). Минимум 200x200 px, рекомендуется 1200x630 px.og:urlКанонический URL страницы. Используется для дедупликации лайков и шеров с разных вариантов URL.Рекомендуемые теги
og:descriptionОписание страницы. Отображается под заголовком. Рекомендуется 150-200 символов.og:site_nameНазвание сайта. Отображается мелким шрифтом над или под заголовком карточки.og:localeЛокаль контента в формате language_TERRITORY: ru_RU, en_US, uk_UA. По умолчанию en_US.Теги для статей (article)
article:authorURL профиля автора или его имя. Поддерживается массив для нескольких авторов.article:published_timeДата публикации в ISO 8601: 2025-01-15T10:00:00+03:00.article:sectionРаздел или рубрика статьи: «Технологии», «Маркетинг» и т.п.article:tagТеги статьи. Можно указать несколько тегов через отдельные мета-теги.Совет: всегда указывайте абсолютные URL для og:image и og:url. Относительные пути не поддерживаются большинством платформ.
Проверка: после добавления тегов очистите кэш VK через API, а Facebook — через Sharing Debugger.
Размеры OG-изображений
Каждая платформа имеет свои рекомендации по размеру изображений. Для универсальной совместимости используйте формат 1200x630 пикселей (соотношение 1.91:1).
ВКонтакте
vk.comРекомендуемый размер: 537x240 px (соотношение 16:9) или 1200x630 px (1.91:1). Минимальный размер: 160x160 px. VK обрезает изображения сверху и снизу. Поддерживается отдельный тег vk:image для отдельной картинки.
Формат: JPG, PNG, GIF (статичные). Максимальный размер файла: 5 МБ.
Telegram
t.meРекомендуемый размер: 1200x630 px (1.91:1). Telegram отображает горизонтальные превью ссылок в чатах. Если изображение слишком маленькое или квадратное, превью может выглядеть некорректно. Telegram кэширует превью агрессивно.
Очистка кэша: отправьте ссылку боту @WebPageBot для принудительного обновления.
Рекомендуемый размер: 1200x630 px (1.91:1). Минимальный: 200x200 px. При изображении менее 600x315 px Facebook показывает маленькую карточку с картинкой слева. Для полноразмерной карточки изображение должно быть не менее 600 px по ширине.
Проверка: Facebook Sharing Debugger — developers.facebook.com/tools/debug/
Twitter / X
x.comДля summary_large_image: 1200x628 px (1.91:1). Для summary: 144x144 px (1:1). Twitter обрезает изображения по центру. Важно размещать ключевую информацию в центре картинки. Поддерживается отдельный набор twitter:-тегов.
Проверка: X Card Validator — cards-dev.twitter.com/validator
Советы по настройке OG-тегов
Практические рекомендации, которые помогут сделать ваши ссылки максимально привлекательными в социальных сетях.
1Уникальные теги для каждой страницы
Не используйте одинаковые OG-теги на всех страницах. Каждая страница должна иметь уникальный заголовок, описание и изображение. Это критически важно для аналитики шаринга и CTR в социальных сетях.
2Текст на изображении
Добавляйте ключевой текст на OG-изображение — это резко увеличивает кликабельность. Но не перегружайте: заголовок из 3-5 слов и логотип. Facebook рекомендует, чтобы текст занимал не более 20% площади картинки.
3Используйте HTTPS для изображений
Все URL в OG-тегах должны начинаться с https://. Многие платформы (включая Facebook и Telegram) не загружают изображения по HTTP. Также убедитесь, что сервер отдает правильные CORS-заголовки.
4Заголовок и описание — разный текст
og:title и og:description должны дополнять друг друга, а не повторяться. Заголовок привлекает внимание (до 70 символов), описание раскрывает суть (до 200 символов). Вместе они должны мотивировать кликнуть по ссылке.
5Проверяйте после деплоя
После размещения тегов обязательно проверьте их через валидаторы: Facebook Sharing Debugger, Twitter Card Validator, бот @WebPageBot в Telegram. Соцсети кэшируют превью, и без очистки кэша старые данные могут отображаться неделями.
6Оптимизируйте размер файла картинки
OG-изображение должно загружаться быстро — краулеры соцсетей имеют таймаут. Оптимальный размер файла: 100-300 КБ. Используйте формат JPG для фотографий и PNG для графики с текстом. WebP поддерживается не всеми платформами.
Как пользоваться генератором
Создайте полный набор OG-тегов за несколько шагов и скопируйте готовый HTML-код.
Выберите тип контента
Укажите тип страницы: сайт, статья, товар, профиль, видео или музыка. Для статей откроются дополнительные поля.
Заполните поля
Введите заголовок, описание, URL страницы и ссылку на изображение. Заполните Twitter Card и VK-теги при необходимости.
Проверьте превью
Переключайтесь между вкладками VK, Telegram и Facebook, чтобы увидеть, как будет выглядеть ваша карточка в каждой соцсети.
Скопируйте код
Нажмите «Копировать HTML» и вставьте сгенерированные мета-теги в секцию <head> вашего HTML-документа.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Был ли этот калькулятор полезен?
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор ставки часа фрилансера
Расчёт минимальной ставки часа по расходам и желаемому доходу. Учёт налогов, загрузки, отпуска.
Калькулятор нейронауки
Уравнения Нернста и Голдмана, потенциал действия, синаптическая передача, ритмы ЭЭГ, нейромедиаторы и рецепторы.
Калькулятор факторинга
Расчёт стоимости факторинга: комиссия, дисконт, эффективная ставка. Сравнение с кредитом. С регрессом и без регресса.
Калькулятор хоккея: статистика, вратарь, экипировка, бросок
Хоккейный калькулятор. Статистика полевого и вратаря (SV%, GAA), калории, подбор экипировки, скорость броска.
Калькулятор органической химии
Степень ненасыщенности (IHD), теоретический выход реакции, молекулярная формула, pKa кислот, Rf для ТСХ, свойства растворителей.
Калькулятор мощности котла отопления
Расчёт мощности котла для дома: площадь, регион, утепление, этажность. Расход газа за сезон. Подбор настенного или напольного котла.
Калькулятор стриминга: пропускная способность, CDN, задержка, ABR-транскодинг
Комплексный калькулятор для стриминговых платформ: расчёт пропускной способности (bandwidth, egress), ABR транскодинг-лестница (HLS/DASH, Per-Title), стоимость CDN (CloudFront, Bunny, Cloudflare, Selectel), анализ задержки glass-to-glass (LL-HLS, WebRTC), планирование ёмкости серверов и расчёт дохода (SVOD/AVOD/PPV).
Калькулятор SSL/TLS
Расчёты SSL/TLS: шифронаборы, сертификаты, производительность, HSTS, совместимость, стоимость
Калькулятор земельного налога
Рассчитайте земельный налог по кадастровой стоимости участка. Ставки 0,3% и 1,5%, вычет 600 м² для льготников, доля и период владения.
Калькулятор длины сварного шва
Расчёт длины сварного шва по нагрузке и типу соединения. Стыковой, угловой, тавровый. Расход электродов.
Конвертер дат (григорианский/юлианский/хиджра)
Перевод дат между григорианским, юлианским, исламским (хиджра), еврейским и персидским календарями.
Калькулятор стоимости эвакуатора
Расчёт стоимости эвакуатора: расстояние, тип авто, время суток, город. Сравнение тарифов по городам России.
Калькулятор микробиологии
Кривая роста бактерий, КОЕ/мл, время генерации, OD600, МИК антибиотиков, стандарты Макфарланда, серийное разведение.
Калькулятор деревьев для компенсации CO₂
Рассчитайте, сколько деревьев нужно посадить для компенсации углеродного следа. Экологический калькулятор лесовосстановления.
Калькулятор оптометрии: рецепт линз, аккомодация, Прентис и ИОЛ
Оптометрические расчёты онлайн: оптическая сила линзы, конвертер рецепта, аккомодация, призматический эффект Прентиса, прогресс миопии, ИОЛ.