Генератор 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-документа.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор поликарбоната
Расчёт листов поликарбоната на теплицу, навес или козырёк с учётом стыков, крепежа и стоимости
Калькулятор UX-метрик: SUS, NPS, HEART, A/B-тест, эвристики Нильсена
Комплексный калькулятор UX-метрик: System Usability Scale (SUS), Net Promoter Score (NPS), HEART framework Google, статистическая значимость A/B-тестов, эвристическая оценка Нильсена (10 эвристик), метрики выполнения задач (Task Success Rate, Efficiency).
Калькулятор времени чтения текста
Расчёт времени чтения и озвучивания текста. Настройка скорости, тип контента, количество страниц A4.
Калькулятор кофеина и привычек
Узнайте свою смертельную дозу кофеина и сколько лет жизни тратите на игры, соцсети и сон. Научный подход к привычкам.
Калькулятор электронной конфигурации
Конфигурация атомов всех 118 элементов. Полная и сокращённая запись, орбитальные диаграммы, валентные электроны.
Калькулятор общественного здравоохранения: DALY, QALY, NNT и вакцинация
Расчёты общественного здравоохранения: DALY, QALY, эффективность вакцинации (VE, NNV), NNT/NNH, демография, ICER.
Калькулятор зелёного строительства: CO₂, вода, GREEN ZOOM
Расчёт экологических показателей здания. Углеродный след, водоэффективность, баллы GREEN ZOOM / LEED, анализ жизненного цикла, зелёная кровля.
Калькулятор расхода затирки для плитки
Расчёт расхода затирки по размеру плитки, ширине шва и площади. Цементная, эпоксидная, полиуретановая затирка.
Калькулятор радиочастот (RF)
Длина волны, усиление и мощность, потери в кабеле, КСВ (VSWR) и энергетический бюджет радиолинии.
Калькулятор стоимости развода
Расчёт стоимости развода: госпошлина ЗАГС и суд, раздел имущества, алименты. Ст. 333.26 НК РФ, семейное право.
Калькулятор нормы сна по возрасту
Определите норму сна для детей и взрослых. Рекомендации по продолжительности сна по возрасту.
Калькулятор трубопроводов: пропускная способность, потери давления
Расчёт пропускной способности трубопровода, потерь давления по Дарси-Вейсбаха, толщины стенки по ГОСТ, гидравлического удара и теплоизоляции.
Калькулятор аннуитет vs дифференцированный
Сравнение аннуитетного и дифференцированного платежей по кредиту. Переплата, график, разница.
Психометрический калькулятор: Z-оценка, IQ, надежность
Профессиональные психометрические расчеты. Перевод сырых баллов в стандартные шкалы (Z, T, IQ), расчет Альфы Кронбаха и нормализация тестов.
Калькулятор вулканологии
Индекс VEI, скорость лавы, вязкость магмы, высота эруптивной колонны, тефра, пирокластические потоки, вулканические газы.