Проверка Open Graph и Twitter Card

Проверка Open Graph и Twitter Card — это онлайн-инструмент, который сканирует HTML-код любой веб-страницы и извлекает OG-теги, отвечающие за внешний вид ссылки при репосте в социальных сетях. ToolsPivot проверяет наличие обязательных тегов и тегов twitter:, оценивает значения, показывает превью ссылки в Facebook, X (Twitter), LinkedIn и WhatsApp, а на вкладке генерации тегов собирает готовый код для исправления ошибок — без регистрации.

Список тегов и превью карточки для любой страницы

• Извлечение всех OG-тегов: Инструмент находит og:title, og:description, og:image, og:url, og:type, og:site_name и og:locale на указанной странице. Вы видите ровно то, что прочитает Facebook, ВКонтакте или LinkedIn при формировании превью.

• Визуальное превью карточки: После сканирования отображается макет карточки для Facebook, X (Twitter), LinkedIn и WhatsApp — он близок к тому, что покажет каждое приложение, но это не точная копия. Не нужно публиковать ссылку, чтобы проверить результат.

• Обнаружение пропущенных тегов: Протокол Open Graph требует четыре обязательных тега — og:title, og:type, og:image и og:url. Если хотя бы один отсутствует, инструмент пишет об этом в заметке к тегу и учитывает в итоговой сводке.

• Проверка длины текста: слишком длинный заголовок или описание платформы могут обрезать. Инструмент предупреждает до публикации, если og:title длиннее примерно 70 символов, а og:description — длиннее примерно 200: столько допускает документация карточек X.

• Контроль размера изображения: Рекомендуемый размер og:image — 1200×630 пикселей (соотношение 1,91:1). Изображения меньше 600×315 пикселей Facebook показывает как маленькую миниатюру, а картинки меньше 200×200 не отображает совсем. Инструмент считает картинку меньше 200×200 проблемой, советует увеличить всё, что меньше 1200×630, и предупреждает, если пропорции далеки от 1,91:1.

• Генерация HTML-кода: На вкладке «Создать теги» вы заполняете форму (заголовок, описание, адрес страницы, изображение, тип карточки X и другое) и получаете готовые мета-теги, а кнопка «Изменить эти теги» переносит туда всё, что нашла проверка. Скопируйте код и вставьте в секцию вашего сайта.

• Обнаружение Twitter Card: Проверяется наличие twitter:card, twitter:title и twitter:image. Если их нет, вы получите предупреждение и узнаете, на какие og:-теги X опирается вместо них, а создать недостающие теги можно на вкладке генерации тегов Twitter Card этого же инструмента.

• Заметка к каждому тегу: У каждого найденного тега есть пояснение, а сводка считает пройденные проверки, замечания и проблемы. Повторяющиеся теги тоже отмечаются.

Как проверить теги Open Graph на странице

1. Вставьте URL: Скопируйте полный адрес страницы и вставьте в поле ввода на странице инструмента.

2. Нажмите «Проверить теги»: Инструмент загрузит HTML-код страницы, найдёт секцию и извлечёт все теги og: и twitter:.

3. Изучите таблицу тегов: Каждый найденный тег (og:title, og:description, og:image и другие) отображается с текущим значением. К каждому тегу добавлена заметка, а сводка показывает, сколько проверок пройдено, что стоит улучшить и где проблемы.

4. Проверьте превью: Макет показывает, как ссылка будет выглядеть в Facebook, X, LinkedIn и WhatsApp. Сравните заголовок, описание и картинку с тем, что вы хотели показать.

5. Исправьте ошибки: Нажмите «Изменить эти теги» — найденные теги откроются на вкладке «Создать теги». Исправьте значения, скопируйте код кнопкой «Копировать код» и добавьте его на страницу. Запустите проверку повторно, чтобы убедиться в результате.

Проверка занимает несколько секунд. Проверяйте страницу после каждого изменения, чтобы не публиковать ссылку с битым превью.

Проверки без регистрации

• Без регистрации и подписки: Нет аккаунтов и платных функций за подпиской, а проверить можно до 60 страниц в день. Для сравнения, Sitechecker без аккаунта даёт одну бесплатную проверку в сутки, а OpenGraph.xyz тоже проверяет страницы бесплатно и без регистрации.

• Экономия рекламного бюджета: Ссылка без картинки или с обрезанным заголовком в рекламе Facebook или ВКонтакте собирает меньше кликов. Одна проверка до запуска кампании предотвращает потерю денег на показах с битым превью.

• Быстрая диагностика вместо ручного тестирования: Не нужно публиковать тестовую ссылку на Facebook, ждать рендеринга, замечать ошибку, редактировать тег, чистить кеш. Все проблемы видны за один скан. Исправленные теги соберите на вкладке генерации тегов Open Graph — она в этом же инструменте.

• Работает с любым сайтом: WordPress, Tilda, 1С-Битрикс, Shopify, Joomla, OpenCart, статические HTML-страницы. Если страница доступна публично, инструмент её проверит.

• Полный контекст метаданных: Помимо OG-тегов, вы видите теги twitter: и то, какие значения X возьмёт, если своих тегов нет. Чтобы понять, как страницу интерпретируют и поисковые системы, проверьте стандартные meta title и description в анализаторе мета-тегов.

• Анализ конкурентов: Вставьте URL любого чужого сайта и посмотрите, какие OG-теги используют конкуренты. Бесплатная конкурентная разведка за несколько секунд.

Как читать отчёт проверки OG-тегов

Результаты делятся на три блока, и каждый отвечает за свою часть диагностики.

Таблица тегов — список всех свойств og: и twitter:, найденных в HTML, по группам: Open Graph (Facebook, LinkedIn, WhatsApp), карточка X (Twitter) и все социальные теги. У каждого тега есть заметка, а сводка считает пройденные проверки, замечания и проблемы. Начинайте с проблем.

По стандарту Open Graph Protocol четыре тега считаются обязательными: og:title, og:type, og:image и og:url. Без них социальная сеть либо угадывает контент (и часто ошибается), либо показывает пустую карточку. ВКонтакте может подтянуть случайное изображение из текста статьи. Telegram возьмёт первый попавшийся текст со страницы.

Карточка превью — визуальный макет вашей ссылки. Сравните заголовок, описание и картинку с тем, что вы задумали. Если превью не совпадает с ожиданиями, таблица тегов покажет, в чём именно причина: устаревший URL в og:image, слишком длинный og:title или пропущенное og:description.

Блок кода — на вкладке генерации тегов: готовые HTML-теги для копирования. На WordPress с Yoast SEO или Rank Math значения можно вставить в настройках социальных сетей плагина. На Tilda — в разделе «SEO» страницы. На 1С-Битрикс — через модуль SEO или напрямую в шаблоне.

Как исправить частые ошибки в OG-тегах

Некоторые ошибки встречаются снова и снова. Вот что искать и как это починить.

Отсутствует og:image. Самая частая ошибка. Без тега изображения Facebook и LinkedIn подбирают картинку сами: могут взять логотип, рекламный баннер или не показать её вовсе. Добавьте мета-тег с полным URL картинки. Размер по умолчанию — 1200×630 пикселей. Если файл весит больше 600 КБ (это предел, который указывает WhatsApp), пропустите его через сжатие изображений до запуска.

Изображение слишком маленькое. Facebook не рендерит картинки меньше 200×200 пикселей. Всё, что ниже 600×315, показывается крошечной миниатюрой вместо большой карточки. Поменяйте размер через инструмент изменения размера до рекомендуемых 1200×630.

Относительный путь в og:image. Путь вроде /images/hero.jpg работает в браузере, но краулеры соцсетей не всегда могут его разрешить. Всегда указывайте абсолютный URL: https://вашдомен.ru/images/hero.jpg.

Заголовок слишком длинный или слишком размытый. Слишком длинный заголовок обрежется с многоточием: документация карточек X допускает до 70 символов, и проверка ToolsPivot предупреждает примерно с этой длины. «Главная» или «Без названия» — пустая трата самого заметного элемента карточки. Напишите конкретный, ёмкий заголовок. Для подбора формулировки попробуйте генератор мета-заголовков.

Устаревший кеш. Вы исправили теги, проверили через ToolsPivot — всё правильно. Но Facebook показывает старую картинку. Причина: Facebook кеширует OG-данные при первом шеринге URL. Используйте Facebook Sharing Debugger для принудительного пересканирования. Для LinkedIn — Post Inspector.

Смешанный HTTP/HTTPS. Сайт работает на HTTPS, но og:image указывает на HTTP. Изображения по http — частая причина пропавших превью. Проверьте, чтобы все URL в OG-тегах начинались с https://.

Когда OG-теги нужно проверять

Если вы делитесь ссылками в соцсетях, запускаете рекламу или управляете сайтом, контент которого репостят другие, OG-валидация нужна вам. Но в некоторых ситуациях она критична.

Перед запуском рекламы. Facebook Ads заранее заполняет превью объявления данными из OG-тегов (их можно отредактировать), поэтому битый тег попадает и в черновик рекламы. Запустить кампанию с бюджетом 300 000 ₽ и битой картинкой в объявлении — дорогая ошибка. Маркетологи в агентствах проверяют каждый лендинг до старта кампании.

После обновления CMS или темы. Обновление WordPress, смена шаблона на Tilda или переход на другую тему в 1С-Битрикс могут тихо сломать вывод OG-тегов. Вчера карточки выглядели идеально, сегодня — пусто. Быстрая проверка через ToolsPivot ловит это до того, как увидит аудитория. Совместите с полной SEO-проверкой сайта, чтобы заодно поймать другие технические проблемы.

Запуск товара в интернет-магазине. Продвигаете новый товар через группы ВКонтакте, Telegram-каналы или Facebook? Карточка должна показывать правильное фото товара, точное название и цену или ключевую характеристику в описании. Владельцы магазинов на Ozon и Wildberries, делящиеся ссылками в соцсетях, тоже выигрывают от валидации.

Публикация контента. Редакторы и SEO-специалисты, выпускающие 5-20 статей в неделю, добавляют проверку OG-тегов в чек-лист публикации — между проверкой читаемости и отправкой в Яндекс.Вебмастер. Несколько секунд на статью — и ни одна ссылка не уйдёт в соцсети с кривым превью.

Как каждая соцсеть читает OG-теги

Все крупные платформы читают Open Graph, но у каждой есть свои особенности.

Facebook — создатель протокола Open Graph. Поддерживает все стандартные свойства и агрессивно кеширует данные. Минимальный размер изображения — 200×200 пикселей, для большой карточки нужно от 600×315, рекомендуемый — 1200×630 (соотношение 1,91:1). Для сброса кеша используйте Facebook Sharing Debugger.

ВКонтакте — самая популярная соцсеть в России. Поддерживает стандартные OG-теги, но также распознаёт собственный тег vk:image для указания специфичного изображения. Если vk:image задан, он имеет приоритет над og:image. Рекомендуемый размер картинки для ВК — 1200×630 или 537×240 пикселей.

X (Twitter) — берёт og:title, og:description и og:image как запасной вариант, если соответствующие теги twitter: не заданы, но без twitter:card покажет в лучшем случае маленькую карточку summary. Для более точного контроля превью лучше использовать оба набора тегов. Тип карточки summary_large_image даёт максимальный визуальный эффект. Проверить оба набора можно на вкладке проверки Twitter Card этого инструмента, а создать — на вкладке «Создать теги».

Telegram — строит превью ссылки из OG-тегов и кеширует его; обновить превью можно через бота @WebpageBot. Если og:image тяжёлый или медленно отдаётся, превью может появиться без картинки. Держите файл изображения лёгким. Проверьте скорость загрузки страницы, чтобы убедиться, что картинка отдаётся быстро.

LinkedIn — строго следует стандарту OG и кеширует данные примерно на 7 дней. Для принудительного обновления используйте LinkedIn Post Inspector. Оптимальное соотношение сторон — 1,91:1.

Одноклассники — вторая по величине соцсеть в России. Также читает OG-теги для формирования превью ссылки. Работает со стандартными og:title, og:description и og:image.

Как добавить OG-теги в популярных CMS

Настройка зависит от вашей платформы. Вот краткая инструкция для наиболее распространённых CMS в России.

WordPress: Установите SEO-плагин (Yoast SEO, Rank Math или All in One SEO). Каждый из них добавляет поля для OG-тегов в редактор записей и страниц. Заполните заголовок, описание и изображение для соцсетей. Плагин автоматически вставит мета-теги в . После настройки проверьте страницу через инструмент проверки.

1С-Битрикс: Используйте SEO-модуль CMS или пропишите OG-теги вручную в шаблоне сайта (файл header.php). Для интернет-магазинов на Битрикс полезно настроить автогенерацию og:image из фотографий товаров.

Tilda: Откройте настройки страницы, перейдите в раздел «SEO». Поля для Open Graph уже есть — заполните заголовок, описание и загрузите изображение. Tilda сама формирует мета-теги.

OpenCart: Установите модуль Open Graph из маркетплейса расширений или добавьте теги вручную в файл header.tpl вашей темы. Для каталогов с сотнями товаров автоматическая генерация из названия и фото товара экономит часы работы.

Ручная установка (статический HTML): Вставьте мета-теги прямо в секцию . На вкладке генерации тегов ToolsPivot собирает готовый код по заполненной форме — просто скопируйте и вставьте. Если нужно создать полный набор мета-тегов с нуля, воспользуйтесь генератором мета-тегов.

Связь OG-тегов с SEO и поведенческими факторами

OG-теги напрямую не влияют на позиции в Google и Яндексе. Но они влияют на то, как часто и охотно вашим контентом делятся. А это уже работает на SEO косвенно.

Карточка с понятной картинкой и заголовком привлекает больше внимания и кликов, чем пустая или обрезанная. Больше кликов — больше переходов на сайт. Больше переходов — лучше поведенческие факторы, которые Яндекс учитывает при ранжировании.

Плюс социальная активность: когда ссылку активно репостят, комментируют и обсуждают, на сайт приходят новые люди, а у контента больше шансов получить ссылки. Google официально не подтверждает прямое влияние соцсигналов на ранжирование.

Для комплексного подхода к SEO рекомендуем добавить на страницу Schema-разметку. OG-теги отвечают за соцсети, Schema — за расширенные сниппеты в поисковой выдаче. Вместе они покрывают оба канала.

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