SERP Snippet Preview — превью title и description для Google
Бесплатный инструмент проверки, как ваш title и meta description будут отображаться в выдаче Google на desktop и mobile. Измеряет ширину в пикселях, предупреждает об обрезке.
Что такое SERP-сниппет и почему его важно оптимизировать
SERP-сниппет (search engine results page snippet) — это блок, которым ваша страница появляется в выдаче Google: синий заголовок (title), URL или breadcrumb, description и опционально favicon с датой. Это единственное, что видит пользователь до клика, и от него зависит, нажмёт он именно ваш результат или нет из 10 других.
Статистика Advanced Web Ranking (2024): средний CTR первой органической позиции — 28%, второй — 15%, третьей — 11%. Но разница между хорошо оптимизированным сниппетом и плохим — до 2x в пределах одной позиции. Первая позиция со слабым title может иметь CTR 18%, а третья с сильным — 17%. То есть оптимизация сниппета эквивалентна прыжку на 2 позиции выше.
Как Google отображает сниппет: три ключевых ограничения
1. Title — 580 пикселей на desktop, 340 на mobile
Google не считает символы, а измеряет пиксели в шрифте Arial. Для русского и украинского текста каждый символ занимает в среднем ~10px, для английского — ~9px. Это объясняет, почему разные инструменты дают разные числа: одни меряют символы латиницы, другие кириллицы, третьи — реальные пиксели.
Наш инструмент использует HTML5 Canvas measureText() с тем же шрифтом, который использует Google (Arial 20px на desktop, 16px на mobile). Точность — ±5 пикселей от фактического отображения в SERP.
Что происходит при превышении: Google обрезает title многоточием (…) и выбирает для отображения другой вариант — из H1, из текста страницы, из анкоров. Это называется title rewriting — с 2021 года Google переписывает 60-80% titles.
2. Description — 920 пикселей на desktop, 680 на mobile
Description имеет больший запас места, но и здесь есть лимит. Оптимальный диапазон — 120-160 символов для desktop, 90-100 для mobile. Если description короче — выглядит как незаполненный или механически сгенерированный тег, снижает доверие.
Google показывает ваш meta description в 37% случаев (Ahrefs, 2023). В остальных — генерирует сниппет из текста страницы под конкретный запрос. Это не повод не писать description: он работает как fallback и влияет на тот же CTR-сигнал.
3. URL или breadcrumb — до 74 символов
Длинные URL обрезаются из середины: analytics.net.ua/blog/seo/.../meta-description-guide. Чтобы избежать этого: (1) короче slug без лишних категорий, (2) BreadcrumbList schema — Google заменит URL на цепочку Блог › SEO › Meta description.
Psycho-оптимизация title: как писать под клик
Технические требования к длине — это минимум. Для высокого CTR title должен ещё и работать психологически:
- Основной ключ — в первых 60 символах. Google подчёркивает ключ, совпадающий с запросом, жирным — визуальный магнит.
- Цифры и даты.
15 примеров,Гайд 2026,За 10 минут— цифры останавливают глаз и выглядят конкретно. - Брендовый суффикс — только для известных брендов.
| Analytics.net.uaдобавляет 20-30px, оправдано только если бренд — сам по себе магнит (Amazon, IKEA, TechCrunch). - Скобки и разделители.
— как сделать,| гайд,[2026 обновлено]— разбивает монолитный заголовок на сканы. - Избегайте clickbait. Google наказывает за несоответствие content ↔ title через поведенческие сигналы (bounce rate, pogo-sticking).
Как писать description, который Google не заменит
Google заменяет ваш description, когда он (а) не соответствует содержимому, (б) слишком обобщён, (в) не содержит потенциального ключа запроса. Чтобы ваш вариант остался:
- Повторите основной ключ сразу. Первые 100 символов важнейшие.
- Включите 2-3 дополнительных ключа-синонима. Покрываете вариативные запросы.
- Конкретные цифры, факты.
За 15 минут,5 шагов,30 примеров— Google предпочитает конкретику над абстракциями. - Call-to-action.
Узнайте…,Сравните…,Скачайте…— сигнализирует пользователю, что на странице будет что-то полезное. - Правильная морфология. Description читают люди, не краулер — пишите полными предложениями без seo-пыли.
Favicon: невидимый фактор CTR
С 2019 года на mobile и с 2020 на desktop Google показывает favicon слева от URL. Маленькая иконка, о которой владельцы часто забывают, даёт до 8% CTR-boost (Advanced Web Ranking).
Правильный favicon:
- Размер минимум 48×48 пикселей (меньше — Google заменит на стандартный глобус)
- Формат SVG или PNG
- Контрастный к белому фону
- Простой силуэт без мелких деталей (16×16 — окончательный размер в SERP)
- Путь:
<link rel="icon" href="/favicon.png" sizes="48x48">в<head>
Структура идеального сниппета: чек-лист
- Title ≤580px (~60 символов), ключ в первых 60 символах, цифра или год
- Description 120-160 символов, ключ повторён 1-2 раза, CTA в конце
- URL короткий (без
/category/subcategory/old-post-id-12345/) или замена на breadcrumb - Favicon 48×48+, контрастный, простой
- Article schema для даты (если релевантно)
- Open Graph для расшариваний (наш инструмент генерирует вместе с meta)
Частые вопросы (FAQ)
Сколько символов должно быть в title для Google?
Не символов, а пикселей: ~580px desktop, 340px mobile. Это примерно 60 символов латиницей или 55 кириллицей, но точная цифра зависит от ширины букв. Инструмент измеряет реальные пиксели через Canvas API.
Берёт ли Google из title исключительно то, что написано в meta?
Нет. С 2021 года Google переписывает title в 60-80% случаев, когда ваш meta не соответствует контенту или слишком длинный. Чтобы сохранить свой вариант — соблюдайте лимит 580px и пишите релевантный заголовок.
Влияет ли meta description на ранжирование?
Напрямую — нет, косвенно — через CTR. Качественный description увеличивает кликабельность на 10-30%, а CTR — рейтинговый сигнал.
Сколько символов должно быть в description?
Оптимально 120-160 символов (680-920 пикселей) desktop, 95 символов (680px) mobile. Идеал — 150 символов.
Google показывает дату публикации — откуда она берётся?
Из Article JSON-LD datePublished или Open Graph article:published_time. Чтобы управлять — используйте наш Schema Generator.
Что такое breadcrumb в сниппете вместо URL?
BreadcrumbList schema заменяет URL на цепочку навигации — чище вид, выше CTR. Генерируется через Schema Generator.
Можно ли использовать эмодзи в title?
Технически да, но они занимают 20-30px и не всегда рендерятся. 1 эмодзи в начале для новостей/e-commerce — ок, для B2B — не рекомендуется.
Как сделать favicon заметным?
Минимум 48×48px, контрастный к белому, простой силуэт. Путь: <link rel="icon" href="/favicon.png" sizes="48x48">.
Почему мой description разный в разных запросах?
Google формирует сниппет под конкретный запрос в 63% случаев, извлекая релевантный фрагмент со страницы. Ваш meta description — fallback.
Связанные термины
Другие инструменты
UTM Decoder — расшифровка и аудит UTM-меток онлайн
Бесплатный UTM-decoder: распарсите любую ссылку — увидите utm_source, utm_medium, utm_campaign, gclid, fbclid и ошибки атрибуции GA4.
Проверка мета-тегов онлайн — Title, Description, OG | Бесплатно
Бесплатный онлайн-инструмент проверки title, description и Open Graph. Превью в Google desktop и mobile, подсчёт символов и пикселей.
UTM Builder — генератор UTM-меток для Google Analytics | Бесплатно
Бесплатный UTM-генератор: создайте корректную ссылку с utm_source, utm_medium, utm_campaign. Превью в GA4 и типовые значения для Google, Facebook, email.