ГлавнаяИнструментыSEOПроверка сниппета
Проверка title и description с превью сниппета
Вставьте заголовок и описание страницы — калькулятор измерит их ширину в пикселях, покажет, где поисковая выдача поставит многоточие, подсветит слова запроса и найдёт типичные ошибки. Готовые теги <title> и <meta name="description"> — одной кнопкой.
—
Примерное превью
Ширина измеряется шрифтом Arial в вашем браузере. Ограничения — практические ориентиры, а не официальные лимиты: поисковые системы меняют вёрстку выдачи и нередко переписывают сниппеты.
Теги для <head>
Расчёт идёт в вашем браузере — введённые данные никуда не отправляются.
Как пользоваться
- Вставьте title и descriptionТекст из тега <title> и из <meta name="description"> вашей страницы или черновик для новой.
- Выберите выдачуGoogle или Яндекс, компьютер или телефон. Для Google длина считается в пикселях, для Яндекса — в символах.
- Добавьте запросСлова запроса выделятся в превью так, как их выделяет поиск, а калькулятор подскажет, каких слов не хватает.
- Скопируйте тегиИсправьте замечания и скопируйте готовые теги: кавычки и спецсимволы уже экранированы.
Почему длину title меряют в пикселях
Поисковая выдача ограничивает заголовок не числом символов, а шириной блока. Буквы в пропорциональном шрифте разной ширины: «ш» и «Ж» в несколько раз шире «i» и «l», заглавные шире строчных. Поэтому 60 символов одного заголовка помещаются в строку, а 52 символа другого — уже нет.
Калькулятор измеряет текст так же, как это делает браузер: рисует его на невидимом холсте (canvas.measureText) шрифтом, близким к шрифту выдачи, и сравнивает ширину с практическим ориентиром. Если текст не помещается, он обрезается по последнему целому слову и дополняется многоточием — так, как это обычно выглядит в выдаче.
Это не официальные лимиты. Google в документации прямо пишет, что не ограничивает длину элемента <title> и мета-описания: ссылки заголовков и сниппеты обрезаются по ширине экрана устройства. Ориентиры выше широко используются SEO-специалистами и описывают типичную вёрстку; поисковые системы её регулярно меняют. Яндекс пиксельных ограничений не публикует и чаще собирает описание из текста страницы, поэтому для него калькулятор показывает ориентир в символах.
Практический вывод: длина — не цель. Важно, чтобы суть страницы и ключевые слова стояли в первых 40–50 символах, а хвост заголовка можно было потерять без потери смысла.
Как Google и Яндекс формируют сниппет
Заголовок результата Google называет «ссылкой заголовка» (title link). Чаще всего он берётся из тега <title>, но система учитывает и другие источники: главный видимый заголовок и заголовки на странице, текст og:title, крупный и выделенный текст, анкоры ссылок на страницу. Google меняет заголовок, если <title> пустой, одинаковый на многих страницах, переполнен ключевыми словами или не соответствует содержанию.
Текст сниппета Google в основном строит по содержимому страницы и подбирает под конкретный запрос. Мета-описание используется, когда оно точнее описывает страницу, чем фрагменты текста. Поэтому один и тот же URL по разным запросам может показываться с разными описаниями.
Яндекс
Яндекс формирует заголовок сниппета на основе тега <title> и может дополнить или изменить его, если заголовок слишком короткий или неинформативный. Описание Яндекс берёт из мета-тега description или из текста страницы — в зависимости от того, что лучше отвечает на запрос. В справке Яндекс Вебмастера рекомендуют делать title и description уникальными для каждой страницы и отражающими её содержание.
Почему сниппет переписывают
- Title одинаковый на многих страницах: «Главная», «Каталог», «Clew».
- Заголовок перечисляет ключевые слова через запятую вместо того, чтобы назвать страницу.
- Описание не отвечает на запрос, по которому страницу нашли.
- Текст кричит: ЗАГЛАВНЫЕ буквы, «!!!», обещания без конкретики.
Как написать title и description для страницы SaaS
Для лендингов, страниц функций и статей блога SaaS-продукта хорошо работает одна и та же схема.
- Запрос — в начало. «Онбординг пользователей в SaaS без разработчиков — Clew» лучше, чем «Clew — платформа, которая помогает…». Бренд в начало ставят, только если его уже ищут по имени.
- Один title — одна страница. Страницы тарифа, функции и статьи не должны конкурировать одним и тем же заголовком.
- Конкретика в описании. Что человек получит: «туры, подсказки и чеклисты в интерфейсе», «оплата российской картой», «бесплатный тариф навсегда». Никаких выдуманных цифр.
- Совпадение с интентом. Если запрос информационный — «как повысить активацию», — описание обещает ответ, а не продажу.
- Без дублей между title и description. Описание продолжает заголовок, а не пересказывает его.
Хороший сниппет приводит в продукт тех, кому он действительно нужен. Дальше всё решает первая сессия — о том, как её выстроить, в статье «Продуктовый онбординг».
Источники
- Google Search Central. Influencing your title links in search results — developers.google.com/search/docs/appearance/title-link.
- Google Search Central. Control your snippets in search results — developers.google.com/search/docs/appearance/snippet.
- Справка Яндекс Вебмастера: рекомендации по заголовку и описанию страницы, формирование сниппета — yandex.ru/support/webmaster.
- MDN Web Docs. CanvasRenderingContext2D: measureText() — developer.mozilla.org.
- HTML Living Standard: элемент title и мета-тег description — html.spec.whatwg.org.
Частые вопросы
Какая оптимальная длина title?
Для Google практический ориентир — около 600 пикселей, это примерно 50–60 символов в зависимости от букв. Для Яндекса ориентируйтесь примерно на 60 символов. Официальных лимитов нет: длинный заголовок просто обрежется, поэтому главное ставьте в начало.
Какая оптимальная длина description?
Для Google на компьютере — около 920 пикселей, это примерно две строки или 150–160 символов; на телефоне видно меньше. Google не ограничивает длину мета-описания, но обрезает сниппет по ширине экрана, а часто и вовсе собирает его из текста страницы.
Почему Google показывает не мой title?
Google может сформировать заголовок из других источников — главного заголовка на странице, og:title, текста ссылок, — если title пустой, дублируется на многих страницах, переполнен ключевыми словами или не соответствует содержанию. Сделайте title уникальным, коротким и точно описывающим страницу.
Почему в выдаче не моё description?
И Google, и Яндекс подбирают текст сниппета под запрос. Если фрагмент текста страницы отвечает на запрос лучше, чем мета-описание, покажут его. Это нормально; мета-описание всё равно стоит писать — оно используется по многим запросам.
Как калькулятор считает длину в пикселях?
Текст отрисовывается на невидимом холсте браузера шрифтом Arial нужного размера (20 px для заголовка, 14 px для описания), и функция measureText возвращает ширину. Это приближение к вёрстке выдачи, а не точная копия.
Нужно ли ставить бренд в title?
Обычно да, но в конце: «Генератор UTM-меток — Clew». В начало бренд ставят, если его уже знают и ищут по названию, например на главной странице.
Нужен ли тег meta keywords?
Нет. Google не использует meta keywords для ранжирования. Заполнять его не нужно, а список ключевых слов в открытом виде подсказывает конкурентам вашу семантику.
Ещё в разделе «SEO»
- Генератор Open Graph
Какие теги Open Graph нужны странице и как будет выглядеть превью ссылки?
- Проверка читаемости текста
Насколько текст сложен для чтения и какие предложения слишком длинные?
- Счётчик символов и знаков
Сколько в тексте символов, слов и абзацев — и помещается ли он в title, тему письма или пуш?
- Транслитерация и генератор ЧПУ
Как превратить заголовок на кириллице в чистый адрес страницы?
- Генератор и проверка robots.txt
Какое правило robots.txt разрешает или запрещает этот URL для нужного робота?
- Генератор hreflang
Какими тегами hreflang связать языковые версии страницы?
- Генератор UTM-меток
Как собрать единообразные UTM-ссылки для каждой кампании и канала?
- UTM-метки для Яндекс Метрики
Как эта ссылка ляжет в отчёт «Метки UTM» и что в ней ломает склейку источников?
- QR-коды с UTM-метками
Какое место на выставке или какая листовка привели посетителей — и как пометить каждый QR-код?