Open Graph Preview
Предпросмотр карточек для социальных сетей
Open Graph теги
18/60 символов
93/200 символов
Рекомендуемый размер: 1200×630px
HTML код
<meta property="og:title" content="Заголовок страницы" /> <meta property="og:description" content="Описание страницы для предпросмотра в социальных сетях. Оптимальная длина — 155-200 символов." /> <meta property="og:image" content="" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:site_name" content="Example Site" /> <meta property="og:type" content="website" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Заголовок страницы" /> <meta name="twitter:description" content="Описание страницы для предпросмотра в социальных сетях. Оптимальная длина — 155-200 символов." /> <meta name="twitter:image" content="" />
Предпросмотр
О сервисе Open Graph Preview
Open Graph Preview показывает, как ваша страница будет выглядеть при публикации ссылки в соцсетях — VK, Facebook, Telegram и других. Инструмент анализирует og:title, og:image, og:description и отображает превью карточки. Это помогает убедиться, что ссылки выглядят привлекательно и корректно.
Часто задаваемые вопросы
Open Graph — это набор мета-тегов (og:title, og:image, og:description и др.), которые указывают соцсетям, как отображать ссылку на вашу страницу. Без них соцсети могут подставить случайный текст или изображение.
Рекомендуемый размер — 1200×630 пикселей (соотношение 1.91:1). Минимум — 600×315. Изображение должно быть читаемым при уменьшении и содержать важную информацию в центре.
VK, Facebook и другие кэшируют превью. После изменения og:image нужно обновить кэш через отладочные инструменты платформы (например, Facebook Sharing Debugger) или подождать обновления.
Telegram поддерживает Open Graph. Если og-теги настроены, Telegram автоматически подтянет title, description и изображение. Дополнительные теги не требуются.
Введите URL страницы в Open Graph Preview — инструмент загрузит страницу и покажет, какие og-теги обнаружены и как будет выглядеть карточка. Если тегов нет, вы увидите пустое или некорректное превью.
Полезные статьи
Руководства и советы по теме