Предпросмотр Open Graph и социальных карточек

Что такое Предпросмотр Open Graph и социальных карточек?

Это визуальный инструмент предпросмотра карточек Open Graph (OG) и социальных карточек. Метатеги Open Graph и Twitter Card сообщают платформам, какой заголовок, описание и изображение показать, когда кто-то делится вашей ссылкой, а этот инструмент воссоздаёт такую карточку ссылки, чтобы вы могли проверить её перед публикацией. Маркетологи, авторы контента и разработчики используют его при запуске статьи в блоге, целевой или товарной страницы, чтобы убедиться, что заголовок не обрезается, изображение заполняет рамку, а домен читается корректно. Выберите платформу с помощью сегментированного переключателя, чтобы увидеть её конкретный макет: X, Facebook и LinkedIn отображают крупное баннерное изображение с заголовком и описанием под ним, тогда как Slack и Discord показывают компактную карточку с акцентной полосой, доменом и небольшой миниатюрой. Строка домена автоматически выводится из URL страницы. Инструмент лишь моделирует карточку из введённых вами значений — он не сканирует вашу действующую страницу и не считывает её существующие метатеги.

Как пользоваться Предпросмотр Open Graph и социальных карточек

1. Введите заголовок страницы, который должен отображаться как заголовок карточки.
2. Напишите описание (строку-резюме, показываемую под заголовком).
3. Вставьте абсолютный URL изображения (идеально 1200×630), чтобы загрузить изображение предпросмотра.
4. Введите URL страницы — домен на карточке выводится из него.
5. Переключайтесь между X, LinkedIn, Slack, Discord и Facebook, чтобы сравнить макет каждой платформы.
6. Корректируйте заголовок и описание, пока ничего не обрезается и карточка выглядит правильно.

Примеры

Часто задаваемые вопросы

Какие платформы я могу предпросмотреть?

Пять: X (Twitter), LinkedIn, Slack, Discord и Facebook. X, Facebook и LinkedIn отрисовываются как баннерные карточки с крупным изображением, тогда как Slack и Discord используют компактный стиль разворота с акцентной полосой и небольшой миниатюрой. Используйте переключатель платформ, чтобы мгновенно переключаться между ними.

Считывает ли он теги Open Graph с моей действующей страницы?

Нет. Он не сканирует и не загружает вашу страницу и не разбирает её существующие метатеги. Он строит карточку исключительно из заголовка, описания, URL изображения и URL страницы, которые вы вводите, поэтому это предпросмотр-сценарий, а не валидатор опубликованной страницы.

Откуда берётся изображение предпросмотра?

Изображение загружается напрямую вашим браузером из введённого вами URL изображения — оно идёт с собственного хоста изображения в ваш браузер, минуя наши серверы. Если изображение не появляется, проверьте, что URL абсолютный (начинается с https://) и общедоступен.

Почему мой заголовок или описание обрезается в карточке?

Социальные платформы обрезают длинные заголовки и описания, и предпросмотр имитирует это, ограничивая количество строк. Если текст обрезается здесь, скорее всего, он обрежется и при публикации, поэтому сократите его, пока он не уместится.

Отправляются ли мои данные на сервер?

Нет. Заголовок, описание и URL, которые вы вводите, остаются в вашем браузере и никогда не загружаются, не записываются и не хранятся нами. Единственный внешний запрос — это загрузка вашим браузером изображения предпросмотра по указанному вами URL, что является обычным поведением браузера.