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 символов, и он останется целым на любой платформе.

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

Валидатор XML-карты сайта

Проверьте XML-карту сайта в браузере: ошибки разбора, отсутствующие адреса, повторы URL и распространённые значения полей.

Инструмент проверки заголовков безопасности HTTP

Вставьте HTTP-заголовки ответа и локально проверьте HSTS, CSP, clickjacking, MIME, referrer и политики cross-origin.

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

Вставьте сырой HTML-код, при желании укажите базовый URL и получите чистый список без дубликатов всех внешних ссылок http/https в коде для проверки ссылок и анализа SEO.

Проверка длины мета-описания

Измерьте мета-описание в символах и расчётных пикселях, сравните редакционные ориентиры и макеты для компьютера и телефона.

Канонический генератор тегов

Создайте действительный тег ссылки rel=canonical для любого URL. Включает проверку URL и типичные ошибки, которых следует избегать.

Симулятор выдачи Google

Посмотрите приблизительный сниппет в стиле Google с лимитами символов для телефона и компьютера. Черновик остаётся в текущем сеансе браузера.

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