Генератор Open Graph — разметка и превью ссылки для соцсетей
Заполните og-теги один раз — и ссылку на ваш сайт красиво покажут ВКонтакте, Telegram, WhatsApp, LinkedIn, Discord и Pinterest. Живой предпросмотр покажет карточку до публикации. Если разметка уже есть, вставьте её код: инструмент разберёт теги, укажет на пробелы и заполнит поля найденными значениями.
Проверить готовую разметку валидатор
Вставьте содержимое <head> страницы или её HTML целиком — разберём разметку, покажем найденные теги, укажем на пробелы и подставим значения в поля ниже. Код никуда не отправляется: разбор идёт прямо в браузере, поэтому проверить можно и закрытую страницу, и локальный макет.
<head>.
| Тег | Значение |
|---|
Основные данные
Обязательные теги Open Graph — без них большинство площадок вообще не построят карточку.
Изображение og:image
Без картинки большинство платформ не покажут карточку вообще — ссылка отобразится как обычный текст.
https:// — относительные пути большинство площадок не распознают
ВКонтакте vk:image
ВКонтакте по умолчанию читает обычные теги Open Graph выше — отдельно ничего заполнять не нужно. Но у VK есть собственный тег vk:image: если он указан, VK покажет именно эту картинку вместо og:image, игнорируя её. Полезно, когда нужна разная картинка для VK и остальных площадок — например, с другим текстом или логотипом.
Для статей article:*
Эти теги имеют смысл, только если выше выбран og:type = article. Для остальных типов контента их можно не заполнять.
article:tag
Twitter Card (X*) twitter:*
Доступ к X (Twitter*) ограничен на территории РФ по требованию Роскомнадзора. Включайте эти теги, только если сайт нацелен и на зарубежную аудиторию — площадка не заблокирована в большинстве других стран.
Живой предпросмотр
Так примерно будет выглядеть карточка при шаринге ссылки — обновляется при каждом изменении.
Готовый код
Вставьте эти строки в <head> страницы. Обновляется автоматически.
Код формируется локально в браузере — ничего не отправляется на сервер Neorank.
* Соцсети Facebook и Instagram принадлежат компании Meta, деятельность которой признана экстремистской и запрещена на территории РФ. Доступ к X (Twitter) ограничен на территории РФ Роскомнадзором.
Open Graph и Twitter Card — в чём разница
Два разных протокола решают одну задачу — управляют превью ссылки, но работают независимо друг от друга.
Open Graph
Открытый протокол, разработанный Facebook* в 2010 году. Сегодня его читают десятки площадок независимо от происхождения.
- ВКонтакте — с оговоркой: своя картинка через
vk:imageприоритетнееog:image - Telegram
- Discord, Slack
- Facebook*, Instagram* — при использовании через VPN
Twitter Card
Собственный протокол X (Twitter*) с префиксом twitter:. Появился независимо от Open Graph и не наследует его автоматически.
- Работает только на X (Twitter*)
- Без своих тегов X подставит данные из Open Graph — но только
title,descriptionиimage - Тип карточки (
twitter:card) всегда нужно указывать отдельно — у Open Graph аналога нет - Ограничение на вес картинки — 1 МБ, у Open Graph лимита нет
Как площадки получают эти данные
Каждая соцсеть при получении ссылки отправляет на сайт собственного краулера (например, у X это Twitterbot), который читает HTML страницы и ищет мета-теги в блоке <head>. Если теги добавляются через JavaScript после загрузки страницы, краулер может их не увидеть — важно, чтобы они присутствовали в исходном HTML.
Площадки агрессивно кешируют превью — иногда на 24–72 часа. После изменения тегов на уже опубликованной ссылке проверьте валидатором конкретной платформы, чтобы обновить кеш.
Обязательные и необязательные теги
Строго обязательны четыре тега Open Graph: og:title, og:type, og:image и og:url. Без og:image большинство платформ вообще не построят карточку — ссылка покажется обычным текстом.
Для Twitter Card обязателен только twitter:card — остальные теги можно не дублировать, если Open Graph уже настроен: X подхватит недостающие поля из него автоматически.
Размер и формат изображения
Универсальный размер — 1200×630 px (соотношение сторон примерно 1.91:1). Он корректно отображается и в Open Graph, и в Twitter Card без обрезки. Минимум для крупной карточки в X — 600×314 px, изображения меньшего размера площадка может показать мелкой миниатюрой или не показать вовсе.
Форматы JPEG, PNG и WebP поддерживаются везде. SVG для og:image/twitter:image использовать не стоит — краулер X его не распознаёт.
Facebook* и Instagram* в контент-маркетинге
Meta*, которой принадлежат Facebook* и Instagram*, признана экстремистской организацией, её деятельность запрещена на территории РФ. Это не отменяет технической совместимости Open Graph — теги остаются рабочим стандартом, но продвижение и реклама именно в этих сетях для российских компаний юридически невозможны.
При упоминании этих площадок в текстах на сайте юристы рекомендуют указывать пометку о запрете — как это сделано и на этой странице.
Теги Open Graph: что отвечает за каждую часть карточки
Полный набор свойств, которые имеет смысл заполнять на обычном сайте, — с пометкой, без чего карточка не соберётся вовсе.
Open Graph — открытый протокол микроразметки, придуманный в Facebook* в 2010 году и с тех пор ставший общим стандартом. Он решает одну задачу: когда человек отправляет ссылку, площадка не гадает, что показать, а берёт заголовок, описание и картинку из мета-тегов в <head>. Без разметки соцсеть подставит первый попавшийся текст и случайное изображение со страницы — или не покажет карточку вообще.
Влияет ли Open Graph на позиции в поиске
Напрямую — нет. Ни Яндекс, ни Google не используют og-теги как фактор ранжирования: это разметка для соцсетей и мессенджеров, а не для поисковой выдачи. Смысл в другом: аккуратная карточка заметно повышает вероятность клика, когда ссылкой делятся в чате или канале, и ссылка без превью в ленте выглядит как обрывок текста.
Поэтому Open Graph стоит воспринимать как часть работы с трафиком из соцсетей и рассылок, а не как способ подняться в выдаче. Утверждения вроде «правильная разметка поднимает CTR на 20–50%» встречаются на сайтах конкурентов, но ни одна из площадок таких цифр не публиковала, — относитесь к ним осторожно.
Как проверить og-разметку и обновить превью ссылки
Самая частая жалоба звучит так: «теги поправили, а в мессенджере всё равно старая картинка». Разбираемся, почему так и что делать.
Шаг 1. Убедиться, что теги вообще есть в коде
Откройте страницу, нажмите правую кнопку → «Просмотр кода страницы» и скопируйте содержимое. Вставьте его в блок «Проверить готовую разметку» выше — инструмент покажет, какие теги нашлись, каких не хватает, и подставит найденные значения в поля.
Важная деталь: смотреть нужно именно исходный код, а не то, что показывает инспектор в браузере. Краулеры соцсетей не выполняют JavaScript, поэтому теги, добавленные скриптом после загрузки, для них не существуют — в инспекторе они видны, а в карточке не учитываются.
Шаг 2. Сбросить кеш площадки
Площадки запоминают карточку при первом обращении к ссылке и дальше показывают сохранённую версию. Поэтому после правки тегов старые сообщения не изменятся, а новые публикации какое-то время могут отдавать прежнее превью. Сбросить кеш можно вручную:
Частые причины, по которым карточка не собирается
Относительный путь в og:image
Адрес вида /img/cover.jpg краулер не достроит до полного — он не знает, от какого домена считать. Нужен абсолютный адрес с https://. Та же история с og:url.
Инструмент предупреждает об этом сразу, как только в поле появляется относительный путь.
Картинка недоступна или слишком мелкая
Изображение должно открываться по прямой ссылке без авторизации и редиректов. Универсальный размер — 1200×630 px: он соответствует пропорции примерно 1,91:1 и корректно показывается и в Open Graph, и в Twitter Card.
Слишком мелкие картинки площадка может показать миниатюрой или проигнорировать. SVG для og:image лучше не использовать — распознают его не все краулеры.
Теги подставляются скриптом
Одностраничные приложения часто добавляют мета-теги уже после загрузки. Для человека всё выглядит правильно, но краулер видит пустой <head> и карточку не строит.
Лечится серверным рендерингом или предгенерацией страниц — так теги оказываются в исходном HTML.
Страница закрыта от краулера
Если раздел требует авторизации, отдаёт 403 или закрыт правилами в robots.txt, краулер площадки до тегов не доберётся. Карточка будет пустой независимо от качества разметки.
Проверить доступность страницы можно, открыв её в браузере в режиме инкогнито, — без сохранённой сессии.
Способы сброса кеша приведены по документации и справочным материалам самих площадок: бот @WebpageBot в Telegram, метод pages.clearCache в API ВКонтакте, Sharing Debugger в панели для разработчиков Facebook*. Список свойств Open Graph — по спецификации протокола ogp.me. Рекомендуемые размеры изображения — сложившаяся практика площадок, а не единый норматив: точные требования у каждой свои и со временем меняются.
Частые вопросы об Open Graph и превью ссылок
Обязательные теги, размер картинки, проверка разметки и почему превью не обновляется.
Это набор мета-тегов в <head> страницы, которые управляют её карточкой при отправке ссылки: заголовком, описанием и картинкой. Протокол придумали в Facebook* в 2010 году, и он стал общим стандартом — теги читают ВКонтакте, Telegram, WhatsApp, LinkedIn, Discord и другие площадки.
Без разметки соцсеть подставляет первый попавшийся текст и случайное изображение со страницы либо не показывает карточку вовсе — ссылка выглядит как голый адрес.
Четыре: og:title, og:type, og:image и og:url. Без og:image большинство платформ карточку не покажут — ссылка отобразится обычным текстом.
Практически всегда стоит добавить ещё og:description и og:site_name: без описания карточка выглядит незаконченной. Для Twitter Card обязателен только twitter:card — остальное X подхватит из Open Graph.
Откройте исходный код страницы (правая кнопка → «Просмотр кода страницы»), скопируйте его и вставьте в блок «Проверить готовую разметку» на этой странице. Инструмент покажет все найденные теги, отметит недостающие обязательные и заполнит поля генератора — останется дописать нужное и забрать исправленный код.
Разбор идёт целиком в браузере, поэтому проверить можно и страницу за авторизацией, и локальный макет, который снаружи недоступен. Ничего никуда не отправляется.
Универсальный вариант — 1200×630 px. Это пропорция примерно 1,91:1, которая корректно отображается и в Open Graph, и в крупной карточке Twitter Card без обрезки по краям.
Картинка должна открываться по прямому абсолютному адресу — без авторизации, редиректов и относительных путей. Форматы JPEG, PNG и WebP поддерживаются повсеместно; SVG лучше не использовать, распознают его не все краулеры.
Площадки запоминают карточку при первом обращении к ссылке и дальше показывают сохранённую версию. Уже отправленные сообщения не изменятся вовсе, а новые публикации какое-то время будут отдавать прежнее превью.
Кеш сбрасывают вручную: в Telegram — ботом @WebpageBot, во ВКонтакте — методом pages.clearCache в разделе для разработчиков, в Facebook* — через Sharing Debugger. Если инструмента у площадки нет, помогает добавить к адресу параметр: для краулера это будет новая ссылка.
Чаще всего причин три: относительный путь в og:image вместо полного адреса; картинка недоступна по прямой ссылке; теги добавляются скриптом уже после загрузки страницы, а краулеры соцсетей JavaScript не выполняют.
Ещё одна ситуация — страница закрыта от краулера: требует авторизации, отдаёт ошибку или запрещена в robots.txt. Тогда карточка будет пустой независимо от качества разметки. Проверьте, открывается ли страница в режиме инкогнито.
Напрямую — нет. Ни одна из поисковых систем не использует og-теги как фактор ранжирования: это разметка для соцсетей и мессенджеров, а не для поисковой выдачи.
Польза в другом: аккуратная карточка повышает вероятность клика, когда ссылкой делятся в чате, канале или рассылке. Цифры вида «разметка поднимает CTR на 20–50%» встречаются на сайтах конкурентов, но ни одна площадка их не публиковала — доверять им не стоит.
Open Graph — открытый стандарт, который понимают десятки площадок. Twitter Card — собственный протокол X (Twitter*) с тегами с префиксом twitter:, появившийся отдельно и не наследующий Open Graph автоматически.
Если тегов twitter:* нет, X использует данные Open Graph как запасной вариант, но вид карточки — крупная или компактная — задаётся только тегом twitter:card. Поэтому его имеет смысл добавить, даже когда всё остальное уже описано в og-тегах.
В большинстве случаев нет: ВКонтакте, как Telegram и WhatsApp, читает стандартные теги Open Graph без доработок. Отдельно ничего заполнять не требуется.
Исключение — собственный тег vk:image. Он нужен, только если для VK хочется поставить другое изображение, отличное от og:image: например, с иным кадрированием под ленту.
Скопируйте готовый код и вставьте его внутрь тега <head> — до закрывающего </head>. На статическом сайте это правка шаблона, в популярных CMS теги обычно подставляет SEO-модуль или плагин, куда значения вводятся в админке для каждой страницы.
Ключевое требование одно: теги должны быть в исходном HTML, который отдаёт сервер. Если они появляются только после выполнения скриптов, краулеры площадок их не увидят.
Компания Meta*, которой принадлежат Facebook* и Instagram*, признана экстремистской, её деятельность запрещена на территории РФ. Продвижение и реклама именно в этих сетях для российских компаний юридически невозможны.
На техническую сторону это не влияет: Open Graph остаётся рабочим стандартом, который читают все остальные площадки. При упоминании этих сервисов в текстах на сайте принято ставить пометку о запрете — как сделано и на этой странице.