Описание
Как пользоваться инструментом
- Заполните поля — заголовок, описание, ссылку на страницу, адрес картинки, тип и имя сайта.
- Посмотрите предпросмотр — справа сразу видно, как ссылка будет выглядеть карточкой в соцсети.
- При желании включите twitter:card — теги для карточек на части площадок.
- Скопируйте или скачайте код и вставьте его в раздел
<head>страницы. «Пример» подставит образец, «Очистить» — сбросит поля.
Что такое Open Graph
Open Graph — это набор специальных мета-тегов в коде страницы, которые подсказывают соцсетям и мессенджерам, как показать ссылку. Когда вы отправляете адрес во ВКонтакте, Telegram или MAX, они читают эти теги и собирают аккуратную карточку с заголовком, описанием и картинкой вместо «голой» ссылки.
Разметку придумали в Facebook (компания Meta признана в РФ экстремистской и запрещена), но сегодня её понимают практически все платформы, поэтому Open Graph стал общим стандартом для красивого вида ссылок.
Зачем настраивать карточки
- Больше переходов. Заметная карточка с картинкой и заголовком привлекает внимание сильнее, чем простая ссылка.
- Контроль вида. Вы сами задаёте, какой заголовок, текст и картинка появятся, а не отдаёте это на усмотрение платформы.
- Узнаваемость. Единое оформление ссылок поддерживает стиль бренда.
Основные теги
- og:title. Заголовок карточки — обычно совпадает с названием страницы.
- og:description. Краткое описание (1–2 предложения).
- og:image. Адрес картинки. Рекомендуемый размер —
1200×630пикселей. - og:url. Канонический адрес страницы.
- og:type. Тип содержимого:
website— сайт или страница,article— статья,product— товар. - og:site_name. Название сайта.
Про картинку
Картинка — самая заметная часть карточки. Лучше всего подходит изображение 1200×630 пикселей: оно показывается крупным баннером. Маленькие картинки платформа может обрезать или показать миниатюрой. Готовую обложку стоит облегчить перед загрузкой — сжатием изображений, чтобы страница не тяжелела.
Open Graph и обычные мета-теги
Open Graph отвечает за вид ссылки в соцсетях, а обычные мета-теги (title и description) — за то, как страница выглядит в результатах поиска. Это разные теги, и заполнять стоит и те, и другие. Посмотреть, какие теги уже стоят на готовой странице, поможет проверка мета-тегов; о том, где они находятся и как их читать, есть отдельная статья — как посмотреть title и description любого сайта.
Где разместить и как проверить
Готовый код вставляется в раздел <head> страницы — в большинстве систем управления сайтом это делается через настройки SEO или шаблон. После публикации проверьте результат: отправьте ссылку в мессенджер или используйте инструмент отладки платформы. Если карточка не обновилась — соцсеть показывает закэшированную версию, и кэш нужно сбросить через её отладчик.
Частые вопросы
- Куда вставлять код? В раздел
<head>страницы, через настройки SEO или шаблон сайта. - Почему карточка не обновилась после правок? Соцсети кэшируют данные. У многих платформ есть инструмент отладки, который сбрасывает кэш и перечитывает теги.
- Нужны ли теги twitter:card? Они помогают части платформ показать карточку правильно. Если включить, они добавятся к коду.
- Обязательны ли все поля? Минимум — заголовок, описание и картинка; остальные улучшают результат.
- Влияет ли Open Graph на позиции в поиске? Напрямую нет — он управляет видом ссылки в соцсетях, а не ранжированием.