Поиск по сайту — подсказки, опечатки и ранжирование

Мы — веб-студия Фрейм. Ниже — прикладная методика по теме: архитектура, UX‑паттерны, инженерия интерфейсов, скорость и метрики. Пишем от лица команды, которая ежедневно проектирует сложные сайты и продукты.

Задача поиска на сайте

Внутрисайтовый поиск — это интерфейс для прямого намерения: пользователь уже знает, что ему нужно, и хочет получить релевантный результат быстрее, чем через меню. Хорошая выдача убирает «шум», правильно учитывает морфологию русского языка, допускает опечатки и выводит карточки с понятными метаданными. На десктопе поиск часто выступает альтернативой навигации, а на мобиле — основным маршрутом. Поэтому мы закладываем строгую дисциплину подсказок, индексации и ранжирования.

Поле ввода и автодополнение

Ширина и фокус: на десктопе — видимая строка ввода с явной кнопкой, на мобиле — иконка/поле в шапке, крупная зона касания.
Подсказки: появляются через 150–250 мс после начала набора. Сначала — точные совпадения, затем — популярные запросы, далее — категории/разделы.
История: сохраняем последние 5–10 запросов (локально), показываем их до ввода как быстрый старт.
Клавиатура: Enter — к выдаче, стрелки — навигация по подсказкам, Esc — очистка/закрытие.

Опечатки и морфология

Русская морфология разрушает наивный «поиск по подстроке»: один термин имеет десятки форм. Мы нормализуем запросы и документы (лемматизация), используем анализатор для склонений и делаем подсветку совпадений по базовой форме слова. Для опечаток — расстояние Дамерау‑Левенштейна, фонетические ключи, а также словари доменных терминов. Если исправление неоднозначно — показываем «Возможно вы имели в виду…» и отдаем оба варианта с разными весами.

Ранжирование результатов

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

Карточки выдачи и метаданные

Заголовок и фрагмент: показываем релевантный сниппет с подсветкой совпадений; не обрезаем слова, сохраняем контекст.
Тип и дата: бейдж «статья/услуга/кейс», дата публикации/обновления, время чтения — помогает фильтровать взглядом.
Действия: быстрые CTA: «читать», «перейти», «открыть в новой вкладке». Для документов — «скачать».
Маркировка: schema.org/ItemList + BreadcrumbList для вторичной навигации и сниппетов в поисковиках.

Фильтры и уточнение запроса

Фасеты по типам контента, датам, рубрикам и тегам. Мы не перегружаем панель: сначала 3–5 ключевых фасетов, остальные — под «Показать еще». Выбранные фильтры — чипы над выдачей с быстрым снятием. Состояние фильтров включаем в URL, чтобы шарить ссылку на конкретный срез.

Техническая часть и индекс

Индексация инкрементальная; дубликаты удаляем по каноническим URL. Документы имеют тип/вес/временную метку и список токенов для быстрых апдейтов. На фронтенде — дебаунс запросов, отмена устаревших промисов, предзагрузка подсказок по топ‑N. Выдача постраничная, время ответа — до 200–300 мс из кеша.

Доступность и мобильность

Поле поиска имеет label, подсказки — список с ролями combobox/listbox, элементы — option со стрелочной навигацией и явным фокусом. На мобильном — полноэкранный режим ввода, закрытие свайпом или кнопкой. Контрасты и размер шрифта соответствуют WCAG AA/AAA.