Хорошая ссылка.
Отличное превью.
Лаборатория Open Graph и Twitter Cards: картинки, описания, видео и все стандартные типы объектов.

Хорошие ссылки начинаются с превью
Лаборатория Open Graph и Twitter Cards: картинки, описания, видео и все стандартные типы объектов.
Одна ссылка. Один тест.
Большая картинка
Базовая карточка: заголовок, описание и большая обложка.
summary_large_image02 ↗Компактная карточка
Квадратная миниатюра и короткое описание для Twitter Summary.
summary03 ↗Статья
Заметка о хороших превью. Автор, дата публикации, раздел и теги.
summary_large_image04 ↗Профиль
Тестовый автор OG Lab. Имя, фамилия и username в метаданных.
summary05 ↗Книга
Демонстрационная книга с автором, ISBN и датой выпуска.
summary_large_image06 ↗Песня
Восьмисекундный синтезированный тон. Альбом, исполнитель и номер трека.
summary_large_image07 ↗Альбом
Тестовый альбом Signal: трек, исполнитель и дата релиза.
summary_large_image08 ↗Плейлист
Тестовая подборка с создателем и связанным треком.
summary_large_image09 ↗Радиостанция
Тестовый объект радиостанции с указанным создателем.
summary10 ↗Фильм
Тестовый ролик: реальный MP4, встроенный плеер и метаданные фильма.
player11 ↗Эпизод
Первый эпизод тестового сериала со ссылкой на объект video.tv_show.
player12 ↗Сериал
Тестовый сериал Signal. Режиссёр, актёр и дата релиза.
summary_large_image13 ↗Другое видео
Видео для проверки og:video и Twitter Player Card.
player14 ↗Приложение · fixture
Синтетические App ID для проверки парсинга. Установка не работает.
app15 ↗Несколько картинок
Две og:image с отдельными размерами и alt. Первая — приоритетная.
summary_large_image16 ↗Только Open Graph
Контрольный пример без twitter:* для проверки поведения fallback.
og only17 ↗Кириллица & символы «✓»
Проверка 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">Выбери отдельный URL
У каждого сценария свой canonical и свой набор тегов. Так результаты не смешиваются.
Вставь ссылку в чат
Проверь карточку в нужном приложении. Картинка выше — иллюстрация, реальный вид определяет платформа.
Учти кеш превью
При повторной проверке используй кнопку «Новая тестовая ссылка». У платформ может оставаться собственный кеш.