↗ oglabTEST ENVIRONMENTВсе сценарии ↗
OPEN GRAPH / TWITTER CARDS

Хорошая ссылка.
Отличное превью.

Лаборатория Open Graph и Twitter Cards: картинки, описания, видео и все стандартные типы объектов.

Выбрать сценарий ↓
12 OG типов4 Twitter Cards100% статический HTML
↗ LINK PREVIEWИЛЛЮСТРАЦИЯ
OG Lab: тестовая обложка
og-testoway.ruslansoloviev.ru

Хорошие ссылки начинаются с превью

Лаборатория Open Graph и Twitter Cards: картинки, описания, видео и все стандартные типы объектов.

Добавит ?v=…; canonical останется прежним.
ВЫБЕРИ СЦЕНАРИЙ

Одна ссылка. Один тест.

17 сценариев ↙
01 ↗
WEBSITE

Большая картинка

Базовая карточка: заголовок, описание и большая обложка.

summary_large_image
02 ↗
WEBSITE

Компактная карточка

Квадратная миниатюра и короткое описание для Twitter Summary.

summary
03 ↗
ARTICLE

Статья

Заметка о хороших превью. Автор, дата публикации, раздел и теги.

summary_large_image
04 ↗
PROFILE

Профиль

Тестовый автор OG Lab. Имя, фамилия и username в метаданных.

summary
05 ↗
BOOK

Книга

Демонстрационная книга с автором, ISBN и датой выпуска.

summary_large_image
06 ↗
MUSIC

Песня

Восьмисекундный синтезированный тон. Альбом, исполнитель и номер трека.

summary_large_image
07 ↗
MUSIC

Альбом

Тестовый альбом Signal: трек, исполнитель и дата релиза.

summary_large_image
08 ↗
MUSIC

Плейлист

Тестовая подборка с создателем и связанным треком.

summary_large_image
09 ↗
MUSIC

Радиостанция

Тестовый объект радиостанции с указанным создателем.

summary
10 ↗
VIDEO

Фильм

Тестовый ролик: реальный MP4, встроенный плеер и метаданные фильма.

player
11 ↗
VIDEO

Эпизод

Первый эпизод тестового сериала со ссылкой на объект video.tv_show.

player
12 ↗
VIDEO

Сериал

Тестовый сериал Signal. Режиссёр, актёр и дата релиза.

summary_large_image
13 ↗
VIDEO

Другое видео

Видео для проверки og:video и Twitter Player Card.

player
14 ↗
WEBSITE

Приложение · fixture

Синтетические App ID для проверки парсинга. Установка не работает.

app
15 ↗
WEBSITE

Несколько картинок

Две og:image с отдельными размерами и alt. Первая — приоритетная.

summary_large_image
16 ↗
WEBSITE

Только Open Graph

Контрольный пример без twitter:* для проверки поведения fallback.

og only
17 ↗
WEBSITE

Кириллица & символы «✓»

Проверка UTF-8: ёжик, кавычки «превью», амперсанд & и эмодзи 🚀.

summary_large_image
ЧТО УВИДИТ ПАРСЕР

Метаданные этой страницы

Теги уже в исходном HTML. JavaScript нужен только для кнопок и фильтра.

<meta property="og:title" content="Хорошие ссылки начинаются с превью — OG Lab">
<meta property="og:type" content="website">
<meta property="og:url" content="https://og-testoway.ruslansoloviev.ru/">
<meta property="og:description" content="Лаборатория Open Graph и Twitter Cards: картинки, описания, видео и все стандартные типы объектов.">
<meta property="og:site_name" content="OG Lab">
<meta property="og:locale" content="ru_RU">
<meta property="og:determiner" content="">
<meta property="og:image" content="https://og-testoway.ruslansoloviev.ru/assets/lime.png">
<meta property="og:image:url" content="https://og-testoway.ruslansoloviev.ru/assets/lime.png">
<meta property="og:image:secure_url" content="https://og-testoway.ruslansoloviev.ru/assets/lime.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="OG Lab: светлая типографика и цветное кольцо на тёмной сетке">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Хорошие ссылки начинаются с превью — OG Lab">
<meta name="twitter:description" content="Лаборатория Open Graph и Twitter Cards: картинки, описания, видео и все стандартные типы объектов.">
<meta name="twitter:image" content="https://og-testoway.ruslansoloviev.ru/assets/lime.png">
<meta name="twitter:image:alt" content="OG Lab: тестовая обложка lime">
<meta name="twitter:site" content="@oglab_fixture">
<meta name="twitter:creator" content="@oglab_fixture">
01 / ОТКРОЙ

Выбери отдельный URL

У каждого сценария свой canonical и свой набор тегов. Так результаты не смешиваются.

02 / ОТПРАВЬ

Вставь ссылку в чат

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

03 / СРАВНИ

Учти кеш превью

При повторной проверке используй кнопку «Новая тестовая ссылка». У платформ может оставаться собственный кеш.