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 — ok, для 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.