Softonic

Предпросмотр Open Graph

Шаг 1 / 2
Далее

Введите заголовок, описание, название сайта, URL страницы и URL изображения, и этот инструмент отрисует живые карточки Facebook и X (Twitter), которые обновляются с каждым нажатием клавиши. Это дизайнерская песочница для ваших тегов Open Graph: ничего не загружается и не публикуется, так что вы можете отрепетировать длину заголовка и кадрирование изображения, пока карточка не станет выглядеть как надо, а затем перенести формулировки в свои настоящие теги og:.

Как собирается предпросмотр

  1. 1

    Введите поля карточки

    Заголовок, название сайта, описание, URL страницы и URL изображения. Каждое поле соответствует одному тегу og:.

  2. 2

    Следите за обновлением карточек

    Макеты Facebook и X перерисовываются по мере ввода, используя реальную вёрстку и обрезку текста каждой платформы.

  3. 3

    Добавьте URL изображения

    Вставьте абсолютный адрес изображения по https, чтобы увидеть кадрирование; оставьте поле пустым, и карточка Facebook покажет заглушку.

  4. 4

    Перенесите в свои теги og:

    Когда карточка читается хорошо, перенесите тот же заголовок, описание и изображение в метатеги своей страницы.

Во что превращается каждое поле

Поле Тег Open Graph Как показывается на карточке
Заголовок og:title Жирный заголовок, обрезанный до одной строки
Описание og:description Серый подзаголовок, ограниченный двумя строками
Название сайта og:site_name Маленькая надпись над заголовком Facebook
URL og:url Показывается домен; его задаёт хост
URL изображения og:image Кадрируется до 1.91:1 на обеих карточках

Инструмент считывает хост из введённого URL, поэтому https://blog.example.com/post покажет на карточке blog.example.com.

Две карточки и чем они различаются

  • Facebook показывает изображение, обрезанное до 1.91:1, затем домен капителью, жирный заголовок в одну строку и описание не более чем в две строки. Без URL изображения отрисовывается серая заглушка, а это самая частая причина плоского шеринга без картинки в реальной жизни.
  • X (Twitter) показывает скруглённую карточку summary_large_image: изображение с кадрированием 2:1, домен, заголовок и описание под ним.

Как подогнать формулировки

  • Заголовок: ориентируйтесь на 60-70 символов. Facebook обрезает около 88, X около 70, поэтому заголовок в пределах 70 остаётся целым везде.
  • Описание: держите примерно в 160 символов; карточка ограничивает его двумя строками, остальное отбрасывается.
  • Изображение: проектируйте под 1200 x 630 px, чтобы кадрирование 1.91:1 было аккуратным, и размещайте по абсолютному URL https://. Относительный путь не загрузится, когда теги выйдут в прод.
  • Название сайта: короткое, только бренд, без слогана. Оно стоит над заголовком как надпись.

Контрольный список ко дню публикации

  • [ ] Заголовок менее 70 символов
  • [ ] Описание менее 160 символов
  • [ ] URL изображения абсолютный (https, не // и не относительный путь)
  • [ ] Изображение спроектировано под 1200 x 630 px, JPG или PNG
  • [ ] URL совпадает с каноническим, который вы выложите
  • [ ] Формулировки перенесены в настоящие теги og: и затем проверены инструментом

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

Нет. Вы вводите поля карточки вручную, а инструмент рисует макет того, как они будут выглядеть. Это дизайнерская песочница, а не скрейпер, поэтому он работает и до того, как страница вышла в сеть. Чтобы прочитать теги, уже присутствующие на странице, вставьте HTML этой страницы в Open Graph Checker.

Карточку Facebook и карточку X (Twitter) с большим изображением. Они используют одни и те же значения Open Graph, поэтому карточка, которая хорошо читается здесь, служит хорошим ориентиром для LinkedIn, Slack, Discord и других приложений, разворачивающих ссылки из тех же тегов og:, каждое со слегка разными ограничениями.

Потому что поле изображения пустое или вставленный URL не является рабочим абсолютным адресом https. Добавьте полный URL изображения по https, и кадрирование появится сразу. Когда выйдете в прод, держите файл менее 5 МБ и отдавайте его с публичным content-type image/*.

Каждая платформа обрезает в своей точке (Facebook около 88 символов, X около 70), и макет карточки это отражает. Сократите заголовок до 60-70 символов, и он останется целым на любой платформе.

Сопутствующие инструменты

Генератор карты сайта

Вставьте список URL и создайте корректную карту сайта XML с changefreq, priority и необязательным lastmod, готовую к сохранению и отправке в Search Console.

Проверка смешанного контента

Просканируйте любую страницу на HTTPS в поисках небезопасных HTTP-ресурсов, которые вызывают предупреждения о смешанном контенте и ломают значок замка в браузере.

Парсер UTM

Вставьте URL кампании и прочитайте пять стандартных UTM-меток (source, medium, campaign, term и content) с каждым декодированным значением. Быстрый способ проверить ссылку отслеживания перед отправкой.

Инструмент для извлечения метаданных

Извлеките метаданные страницы из любого URL: название, метаописание, Open Graph, карточки в Twitter, канонический URL и структурированные данные в формате JSON-LD.

Предпросмотр сниппета SERP по URL

Вставьте URL и посмотрите, как его заголовок, метаописание и канонический URL выглядят вживую в виде сниппета Google. Берётся прямо со страницы, без ручного копирования.

Анализатор заголовков безопасности

Вставьте свои заголовки HTTP-ответа и получите приоритизированные советы по заголовкам безопасности, которые важны: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, Referrer-Policy и другим.

Инструмент доступен на других языках