Проверка и симулятор OGP
- Безопасно
- Результаты диагностики не сохраняются и нигде не публикуются.
Заметки
Инструмент для проверки OGP-тегов и симуляции того, как страница выглядит при публикации в соцсетях.
Полезен при создании OGP-изображений и тестировании HTML meta-тегов.
Источник ввода
Выберите один из трёх способов.
| URL сайта | Подходит для общедоступных сайтов. |
|---|---|
| HTML-код | Подходит для сайтов в разработке или с ограничениями доступа. |
| Файл изображения | Подходит для проверки вида OGP-изображения во время создания. |
Результат диагностики
Оценка по трём уровням.
| Оценка A | Соответствует всем рекомендуемым требованиям. |
|---|---|
| Оценка B | Соответствует обязательным пунктам, но есть рекомендации. |
| Оценка C | Некоторые пункты требуют исправления. |
Рекомендуемый пример
Настройки ниже покрывают основные соцсети.
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Описание страницы">
<meta property="og:url" content="URL страницы">
<meta property="og:image" content="URL OGP-изображения">
<meta property="og:type" content="Тип страницы">
<meta property="og:site_name" content="Название сайта">
<meta name="twitter:card" content="Тип Twitter Card">Подробности тегов
Базовые OGP-теги
Теги, которые можно использовать в разных соцсетях. Рекомендуется указать все следующие.
Используйте атрибут `property`.
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Описание страницы">
<meta property="og:url" content="URL страницы">
<meta property="og:image" content="URL OGP-изображения">
<meta property="og:type" content="Тип страницы">
<meta property="og:site_name" content="Название сайта">og:title
Задаёт заголовок страницы. Обычно совпадает со значением тега `title`.
В X (Twitter), если отсутствует, Twitter Card может быть отключена — поэтому это фактически обязательный тег.
<meta property="og:title" content="Заголовок страницы">Пример
<meta property="og:title" content="Проверка и симулятор OGP">og:description
Задаёт описание страницы. Обычно совпадает со значением тега `description`.
В большинстве соцсетей, если опущено, может использоваться `description` как fallback.
<meta property="og:description" content="Описание страницы">Пример
<meta property="og:description" content="Проверьте настройки OGP и посмотрите, как ваша страница будет выглядеть при публикации в соцсетях — по URL или исходному HTML. Поддерживает X, Facebook и LINE и умеет симулировать по файлу изображения.">og:url
Укажите URL страницы в виде абсолютного URL.
<meta property="og:url" content="URL страницы">Пример
<meta property="og:url" content="https://develop.tools/ogp-simulator/">og:image
Укажите URL OGP-изображения как абсолютный URL. Рекомендуемый размер: `1200px`×`630px`.
Поскольку изображение может отображаться как 1:1, держите важную информацию в центральной зоне `630px`×`630px`.
<meta property="og:image" content="URL OGP-изображения">Пример
<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">og:type
Указывает тип страницы.
| website | Главная страница сайта |
|---|---|
| article | Страницы не главные, например статьи |
| blog | Главная страница блога |
| product | Страницы деталей продукта/услуги |
<meta property="og:type" content="Тип страницы">Пример
<meta property="og:type" content="article">og:site_name
Указывает название сайта. Обычно одинаково для всех страниц.
<meta property="og:site_name" content="Название сайта">Пример
<meta property="og:site_name" content="develop.tools">Теги X (Twitter)
Теги, которые X (бывш. Twitter) использует в приоритете.
Если базовые OGP-теги заданы, вы можете опустить все эти теги без проблем.
Задавайте `twitter:card` только если хотите контролировать размер миниатюры.
Используйте атрибут `name`.
<meta name="twitter:card" content="Тип Twitter Card">
<meta name="twitter:title" content="Заголовок страницы">
<meta name="twitter:description" content="Описание страницы">
<meta name="twitter:image" content="URL миниатюры">
<meta name="twitter:site" content="Имя пользователя X/Twitter сайта">
<meta name="twitter:creator" content="Имя пользователя X/Twitter автора">twitter:card
Задаёт тип Twitter Card. Укажите, если хотите большую миниатюру.
Если опущено, будет `summary`.
| summary | Маленькая миниатюра (квадрат) + информация о сайте рядом |
|---|---|
| summary_large_image | Большая миниатюра + информация о сайте снизу |
<meta name="twitter:card" content="Тип Twitter Card">Пример
<meta name="twitter:card" content="summary_large_image">Теги Facebook
Теги, которые использует Facebook.
Укажите их, если хотите использовать аналитические функции Facebook.
<meta property="fb:app_id" content="ID приложения Facebook">