Open Graph: разметка для соцсетей и мессенджеров

Что такое Open Graph и зачем он нужен

Когда делитесь ссылкой в соцсети или мессенджере, платформа сама решает, как показать превью. Без разметки Open Graph это случайный набор: кривая картинка, обрывок текста или пустой блок с голым URL. Выглядит непрезентабельно, доверие падает ещё до клика. Open Graph это набор метатегов в HTML, который подсказывает Facebook, VK, Telegram, WhatsApp, какой заголовок, описание и изображение использовать для сниппета. Если вы плотно работаете с контентом и трафиком, а не только с продвижением сайта в поиске, без этой разметки теряете часть переходов из соцсреды.

Правильная разметка превращает ссылку в аккуратную медиакарточку: крупное изображение, внятный заголовок, короткое описание. Это напрямую влияет на CTR: люди чаще кликают по визуально оформленным сниппетам, чем по «голым» URL. Разница заметна сразу, сравните превью с прописанными og:title и og:image и ту же ссылку без них. Второй вариант выглядит как обрывок кода и в ленте просто теряется. Поэтому Open Graph обязательная часть технической оптимизации, если планируете получать трафик не только из поисковиков, но и из соцсетей.

Основные теги Open Graph: обязательный минимум

Обязательный минимум Open Graph состоит из пяти тегов: og:title, og:type, og:image, og:url и og:description. Без них краулеры соцсетей и мессенджеров не соберут превью, и ссылка будет выглядеть как серая строка с URL. Остальные теги полезны, но именно эта пятёрка формирует каркас разметки.

og:title задаёт заголовок длиной до 60–70 символов, иначе соцсети обрежут текст. og:description работает как аннотация до 200 символов, её стоит писать с учётом того, что это первая строка, которая цепляет внимание. Заголовок и описание не должны дублировать тег title и meta description, иначе поисковик может проигнорировать разметку.

С изображением сложнее всего. og:image должен быть не меньше 300×200 пикселей, но для качественного отображения в VK и Telegram мы обычно ставим 1200×630. Вес файла до 5 МБ, формат JPG или PNG, обязательно абсолютная ссылка. Важно, чтобы изображение было уникальным для каждой страницы, иначе соцсети будут показывать одну и ту же шапку сайта. Если в картинке есть текст, проверьте, как он смотрится на мобильных, часто мелкий шрифт сжимается до нечитаемого.

Соберём обязательный минимум в чек-лист для проверки страницы перед публикацией:

• og:title до 70 символов, уникальный и не повторяющий title страницы.
• og:description до 200 символов, с конкретикой и призывом к действию.
• og:image размером 1200×630, весом до 5 МБ, с абсолютной ссылкой.
• og:url с каноническим адресом без UTM-меток и GET-параметров.
• og:type со значением article, website или video в зависимости от контента.
• og:image:alt с текстовым описанием картинки для доступности и анализа.

og:url указывает канонический адрес страницы, чтобы соцсети не склеивали дубли с UTM-метками. og:type описывает тип контента: article, website, video, product, от него зависит набор дополнительных полей. Например, для og:type=article добавляются og:article:published_time и og:article:author. Также стоит заполнять og:image:alt, его используют соцсети для доступности и анализа содержимого.

Ещё два момента, о которых часто забывают. Каждый тег Open Graph должен быть уникальным на странице, дубли вызывают ошибки в валидаторах соцсетей. Разметку проверяют через парсеры вроде VK Share Debugger или Facebook Sharing Debugger перед публикацией, это занимает пару минут, но экономит часы переписки с клиентом.

Open Graph пересекается с другими форматами структурированных данных. Например, статья про микроразметку для нейросетей хорошо дополняет тему, потому что и OG, и schema.org описывают контент для машинного понимания. og:url и og:type часто недооценивают, но именно они защищают от склейки дублей и подсказывают соцсетям, как интерпретировать страницу. На практике мы всегда начинаем аудит соцсетей с проверки этой пятёрки тегов, потому что ошибки в них видны сразу.

Дополнительные теги: og:locale, og:site_name и другие

Обязательный минимум тегов покрывает базовые сценарии, но для полноценной разметки стоит добавить опциональные поля. og:locale указывает язык и регион контента, например ru_RU, что помогает соцсетям корректно определять аудиторию. og:site_name отображает название сайта под ссылкой в посте, это бесплатный брендинг: пользователь сразу видит, откуда материал. Оба тега особенно полезны для мультиязычных сайтов или нескольких проектов на одном домене. Если хотите разобраться, как эти теги сочетаются с классическими мета-тегами, держите под рукой материал о правильном оформлении мета-тегов.

Отдельного внимания заслуживают медиа-теги. og:video и og:audio позволяют внедрять видео- и аудиоконтент прямо в превью поста. Работает это не везде: VK поддерживает видео, а в Telegram и WhatsApp чаще используется стандартный og:image. На практике мы задаём эти теги только для страниц с явным мультимедиа, остальным достаточно картинки. Чтобы проверить разметку в разных сервисах, удобно пользоваться инструментами из таблицы ниже.

Как настроить Open Graph на сайте: пошаговая инструкция

Начинать стоит с приоритетных страниц: главная, карточки товаров, статьи блога и посадочные под рекламу. Именно они чаще всего попадают в шаринги. Для каждой такой страницы нужно прописать минимум тегов: og:title, og:description, og:image и og:url. Если сайт на WordPress, проще поставить плагин вроде Yoast SEO или Rank Math, они генерируют разметку автоматически. На Bitrix или самописных CMS теги добавляются в шаблон компонента, обычно в header.php, через вывод значений из настроек инфоблока.

Когда теги добавлены, проверяем их через валидаторы: для «ВКонтакте» это парсер в настройках сниппета, для Facebook и мессенджеров отладчик Meta Sharing Debugger. Они покажут, как карточка выглядит при шаринге, и подсветят ошибки вроде слишком короткого описания или битого URL картинки. После правок не забывайте сбрасывать кеш в отладчике. Отдельно следите за og:image: рекомендую размер 1200×630, иначе соцсети могут обрезать картинку. Качественная разметка ускоряет появление контента в лентах, а в связке с ускорением индексации сайта даёт более предсказуемое поведение и поисковиков, и соцсетей при обработке новых страниц.

Частые ошибки при внедрении Open Graph

Чаще всего проблемы начинаются с изображений. Парсеры соцсетей требовательны к размерам: картинка меньше 200×200 px проигнорируется, а слишком тяжёлый файл будет долго обрабатываться или обрежется. Оптимальный диапазон для og:image это 1200×630 px с весом до 300 КБ. Не забывайте про alt: если изображение не загрузится, соцсеть покажет альтернативный текст, и без него сниппет будет выглядеть пустым. Мы обычно проверяем отображение через валидатор на developers.facebook.com, он сразу показывает, что не так с картинкой.

Вторая ошибка связана с несоответствием og:url и канонического URL. Если в разметке указан адрес с UTM-метками, а канонический URL чистый, соцсети могут склеить страницы или показать старый сниппет из кэша. Решается просто: og:url должен полностью дублировать canonical, без параметров отслеживания. Отдельно про дубли: если на странице несколько наборов og-тегов (один в шаблоне, другой в плагине), парсер возьмёт первый попавшийся, и это может быть не тот заголовок. Проверяйте страницу в исходном коде или через расширение для браузера, чтобы убедиться, что разметка Open Graph существует в единственном экземпляре.

Open Graph для разных платформ: VK, Facebook*, Telegram, WhatsApp

Разные платформы по-разному относятся к разметке Open Graph, и это важно учитывать ещё на этапе внедрения. VK поддерживает практически все стандартные теги, включая og:video и og:audio, и предпочитает изображения 537×240 пикселей для превью в ленте. Facebook* (запрещён на территории РФ) долгое время был законодателем мод, но сейчас его приоритеты сместились в сторону собственных метаданных, хотя базовые теги он по-прежнему считывает корректно. Telegram работает иначе: он не использует og:title и og:description для обычных ссылок, а полагается на сайтнеймы из @duckduckgo, поэтому чтобы получить красивое превью, нужно сочетать правильную разметку с настройкой Instant View.

WhatsApp и остальные мессенджеры, включая Signal и Viber, действуют проще: они берут первый найденный тег og:image без особых требований к размерам, но лучше закладывать картинку 1200×630, чтобы избежать обрезки. На практике мы проверяем каждый ресурс через официальные дебаггеры (VK shared, Telegram BotFather), потому что кэш платформ живёт от нескольких часов до недели, и без принудительного сброса обновлённое превью пользователи не увидят. Это стандартная боль, с которой сталкиваются все, кто менял разметку на живом сайте, поэтому закладывайте время на инвалидацию кэша при запуске.

Инструменты для проверки и отладки Open Graph

Начинать отладку стоит с официальных инструментов, но с оговоркой: отладчик Facebook (теперь Meta) до сих пор работает, хотя сам Facebook* в России не доступен. Если ваша аудитория сидит во ВКонтакте, именно VK-парсер в режиме «Панель разработчика» (раздел «Настройки», пункт «Работа с API») покажет, как платформа видит вашу страницу. Он же подскажет, какой заголовок, описание и картинку подтянет пост при репосте ссылки.

• Facebook Sharing Debugger: показывает итоговый превью и ошибки в тегах, но требует авторизации через VPN.
• VK-парсер: вставляете URL и смотрите, какие og-теги реально подхватываются, включая og:image с crop-параметрами.
• LinkedIn Post Inspector: полезен для B2B, если ссылки на сайт активно шарингуют в этой сети.
• Twitter Card Validator: проверяет не только Open Graph, но и связку с twitter:card, хотя сам твиттер в РФ замедлен.
• Расширение Meta Tags для Chrome: показывает все метаданные страницы прямо в браузере без перехода на сторонние сайты.

Из сторонних сервисов удобен OpenGraph.xyz или валидатор от Яндекса в Вебмастере, куда можно закинуть URL и посмотреть, как робот видит разметку. Расширения браузера проще для быстрой проверки, но они не показывают, как конкретная соцсеть обработает теги. Поэтому мы проверяем в два захода: сначала парсером VK для базовой валидации, затем отладчиком Facebook для контроля ошибок в og:image:width, height и type. Если картинка не проходит по требованиям, отладчик сразу подсветит проблему.

Чек-лист: как проверить, что Open Graph настроен правильно

Первый проход по чек-листу делаем на главной и типовой карточке товара или услуги, затем на страницах, куда реально льёте трафик из соцсетей. Откройте страницу в режиме инкогнито и вставьте её URL в валидатор: для VK используйте «Валидатор разметки» в кабинете, для Facebook* (принадлежит Meta, признана экстремистской и запрещена в РФ) и Telegram подойдёт официальный Sharing Debugger. Проверяем, что og:title не обрезается, og:image отдаётся в нужном размере и без водяных знаков, а og:url совпадает с каноническим адресом страницы. Если на сайте есть ЧПУ с регистром букв, убедитесь, что ссылка в разметке не дублируется с разными регистрами.

После проверки прогоните ссылки через сам мессенджер или соцсеть, а не только через валидатор. Скопируйте URL в чат Telegram или отправьте себе в «Избранное», во ВКонтакте посмотрите превью в поле «Расскажите о себе». Обратите внимание на порядок превью в WhatsApp: там подтягивается первый тег из списка, и иногда это не то, что вы ожидали. После правок сбрасывайте кеш в тех же отладчиках и перепроверяйте превью. Такую проверку стоит прогонять после каждого изменения шаблона или подключения нового плагина, иначе сломанная разметка уедет в прод незаметно. Если автоматизировать некому, заведите привычку раз в месяц проходить по этому чек-листу, а агентство Cinar обычно включает такую проверку в регулярное SEO-сопровождение, потому что битые превью в соцсетях бьют по кликабельности.

Часто задаваемые вопросы

Константин Крючков

Senior SEO-специалист

Подписаться на ТГ