Студия превью SERP и соцкарточек

Показывает Google SERP (пиксельная обрезка на десктопе/мобиле), карты X и OpenGraph с SEO-диагностикой перед запуском

Введите метаданные страницы, и инструмент отрендерит три реальных таргета:

  1. Карточка Google SERP — обрезка заголовка на десктопе (~600px) и мобиле (~920px) считается по реальным пиксельным ширинам Arial (string-pixel-width), а не просто по количеству символов.
  2. Карточка X (Twitter) — раскладки summary и summarylargeimage.
  3. Карточка OpenGraph — стиль LinkedIn/Facebook с рекомендуемым соотношением og:image 1.91:1.

Также запускается SEO-диагностика перед запуском: короткий/длинный заголовок, обрезка по устройствам, длина описания, неэкранированные символы, валидность канонического URL, подчёркивания vs дефисы, og:image по HTTPS/валидность, длина og:description, og:site_name, отсутствие twitter:card — плюс подсказки, когда заголовок намекает на структурированные данные FAQ / HowTo / Product.

Как использовать:

  • Заполните то, что есть; остальное оставьте пустым, чтобы увидеть пробелы.
  • Выберите устройство: десктоп, мобайл или оба.
  • Используйте таблицу диагностики как чеклист запуска.

Примеры результатов

1 Примеры

Превью страницы обзора в SERP и соцкарточках

Пиксельное обрезание заголовка на десктопе/мобиле, карточки X и OpenGraph, диагностика.

SERP desktop/mobile + Twitter + OpenGraph previews with diagnostics.
Показать параметры ввода
{ "title": "Best Running Shoes 2026 — Tested & Reviewed | RunLab", "description": "We tested 40 running shoes for comfort, durability, and speed. See our top picks for road, trail, and racing in 2026.", "url": "https://runlab.example.com/best-running-shoes-2026", "ogImage": "https://runlab.example.com/og/shoes-1200x630.jpg", "ogDescription": "The 2026 running shoe guide, lab-tested for every type of runner.", "siteName": "RunLab", "twitterCard": "summary_large_image", "device": "both" }

Ключевые факты

Категория
Разработка и Web
Типы входных данных
text, textarea, select
Тип результата
html
Покрытие примерами
4
API доступен
Yes

Обзор

Студия превью SERP и соцкарточек позволяет мгновенно оценить отображение веб-страницы в результатах поиска Google с точным пиксельным расчетом обрезки заголовков для десктопов и мобильных устройств, а также в социальных сетях X (Twitter) и OpenGraph. Инструмент автоматически проводит SEO-диагностику метаданных, помогая выявить критические ошибки разметки, проблемы с длиной описаний и некорректные URL-адреса перед публикацией страницы.

Когда использовать

  • •Перед публикацией новых статей или посадочных страниц для проверки корректности отображения сниппетов в Google.
  • •При оптимизации метатегов OpenGraph и Twitter Cards для улучшения кликабельности (CTR) в социальных сетях.
  • •Для быстрого аудита длины заголовков и описаний с учетом реальной пиксельной ширины символов Arial.

Как это работает

  • •Введите заголовок страницы, мета-описание, канонический URL и ссылку на изображение OpenGraph в соответствующие поля формы.
  • •Выберите тип карточки Twitter (summary или summary_large_image) и предпочтительное устройство для предпросмотра поисковой выдачи.
  • •Изучите сгенерированные превью для Google SERP, X и OpenGraph, а также ознакомьтесь с отчетом SEO-диагностики, указывающим на ошибки и возможности улучшения.

Сценарии использования

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

Примеры

1. Оптимизация сниппета для обзора беговых кроссовок

SEO-специалист
Контекст
Специалист готовит к публикации подробный обзор беговой обуви и хочет убедиться, что заголовок не обрежется в Google, а картинка в соцсетях привлечет клики.
Проблема
Заголовок может быть слишком длинным для мобильной выдачи, а разметка Twitter Card не настроена.
Как использовать
Ввести заголовок, описание, URL и ссылку на og:image, выбрав тип карточки summary_large_image.
Пример конфигурации
{
  "title": "Best Running Shoes 2026 — Tested & Reviewed | RunLab",
  "description": "We tested 40 running shoes for comfort, durability, and speed. See our top picks for road, trail, and racing in 2026.",
  "url": "https://runlab.example.com/best-running-shoes-2026",
  "ogImage": "https://runlab.example.com/og/shoes-1200x630.jpg",
  "twitterCard": "summary_large_image",
  "device": "both"
}
Результат
Инструмент показал точную пиксельную обрезку заголовка на мобильных и десктопах, подтвердил корректность пропорций og:image и сгенерировал превью карточки X.

2. Проверка метаданных главной страницы интернет-магазина

Маркетолог
Контекст
Маркетолог запускает рекламную кампанию для нового бренда одежды и хочет проверить, как ссылка на главную страницу выглядит при отправке в мессенджерах и соцсетях.
Проблема
Отсутствие названия сайта в разметке и возможные ошибки в каноническом URL.
Как использовать
Заполнить поля заголовка, описания, URL, названия сайта и ссылки на логотип бренда в качестве og:image.
Пример конфигурации
{
  "title": "Купить стильную одежду бренда TrendLook | Официальный сайт",
  "description": "Новая коллекция дизайнерской одежды с доставкой по всей стране. Скидки первым покупателям.",
  "url": "https://trendlook.example.com/",
  "ogImage": "https://trendlook.example.com/images/og-main.jpg",
  "siteName": "TrendLook",
  "device": "both"
}
Результат
Выявлена ошибка использования нижнего подчеркивания в тестовом URL, подтверждено корректное отображение названия сайта в блоке OpenGraph.

Проверить на примерах

image
Примеры постов в социальных сетях
Примеры текста из социальных сетей для тестирования извлечения хэштегов и упоминаний
title token social
sample
Протокол ActivityPub Децентрализованной Социальной Сети
Примеры протокола ActivityPub для федеративных социальных сетей, совместимости с Mastodon и децентрализованных социальных медиа
title token social
sample
Примеры Тегов Docker-образов
Коллекция ссылок на Docker-образы с различными реестрами, репозиториями, тегами и дайджестами
matched family image
image
Примеры QR-кодов
Примерные изображения QR-кодов для тестирования инструментов чтения и генерации QR-кодов
matched family image
image

Связанные хабы

Инструменты конвертации форматов изображений и анимированного экспорта
Сравните конвертеры JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 и инструменты экспорта анимированных изображений в одном хабе.
Инструменты для очистки, оформления и пакетной подготовки изображений
Соберите в одном хабе инструменты для очистки изображений, обрезки, добавления полей и рамок, пакетного изменения размера и сжатия, водяных знаков и финальной визуальной подготовки.
Инструменты метаданных изображений, EXIF и очистки приватности
Сравните просмотрщики метаданных, инспекторы EXIF/IPTC/XMP, исправление ориентации, редакторы метаданных и инструменты удаления приватных данных из изображений.

FAQ

Как рассчитывается обрезка заголовка в Google SERP?

Обрезка рассчитывается на основе реальной пиксельной ширины шрифта Arial (~600px для десктопов и ~920px для мобильных устройств), а не по простому количеству символов.

Какие социальные сети поддерживают формат OpenGraph?

Формат OpenGraph используется Facebook, LinkedIn, Telegram и многими другими платформами для генерации превью страниц.

Что проверяет встроенная SEO-диагностика?

Она проверяет длину тегов, обрезку на устройствах, валидность URL, протокол HTTPS для изображений, наличие разметки Twitter и подсказывает возможности для микроразметки.

Какое соотношение сторон рекомендуется для og:image?

Рекомендуется использовать изображение с соотношением сторон 1.91:1 (например, 1200x630 пикселей) для корректного отображения без обрезки.

Можно ли проверить отображение только для мобильных устройств?

Да, в настройках инструмента можно выбрать отображение только для мобильных устройств, только для десктопа или для обоих вариантов сразу.

Документация API

Конечная точка запроса

POST /ru/api/tools/serp-social-preview-studio

Параметры запроса

Имя параметра Тип Обязательно Описание
title text Да -
description textarea Нет -
url text Да -
ogImage text Нет -
ogDescription textarea Нет -
siteName text Нет -
twitterCard select Нет -
device select Нет -

Формат ответа

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-serp-social-preview-studio": {
      "name": "serp-social-preview-studio",
      "description": "Показывает Google SERP (пиксельная обрезка на десктопе/мобиле), карты X и OpenGraph с SEO-диагностикой перед запуском",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=serp-social-preview-studio",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]