Поиск и фильтры на сайте-каталоге: логика, пустые результаты и URL
Как настроить поиск по названию и артикулу, полезные фильтры, пустую выдачу, мобильный интерфейс и адреса страниц без бесконтрольного роста URL.
Главное за 30 секунд
Поиск и фильтры помогают покупателю сузить ассортимент до подходящих позиций. Их качество зависит от структуры характеристик, словаря названий и понятного поведения интерфейса. Сначала проверьте реальные запросы клиентов и данные каталога. Затем опишите выбор параметров, пустые результаты и сохранение состояния в адресе. Правила индексации определяйте отдельно для категорий и технических комбинаций.
Разведите поиск известного товара и подбор
Покупатель, который знает артикул, ожидает точное совпадение. Человек с задачей «материал для влажного помещения» ищет подходящие характеристики и объяснение выбора. Эти сценарии требуют разной логики. Соберите запросы из переписки с менеджерами и текущего внутреннего поиска, если данные уже есть. Удалите контакты и другие личные сведения перед анализом. Разделите примеры на точный артикул, название, разговорный синоним, характеристику и задачу. Такая подборка станет набором проверки после разработки, а не только списком пожеланий к поисковому движку.
В каталоге и интернет-магазине следующий шаг отличается, но выбор позиции должен быть понятен в обоих случаях. Для сложной продукции полезнее сочетать категории, фильтры и консультацию. Поиск по всему тексту инструкции может находить товар по случайному упоминанию другого изделия, поэтому источники совпадений следует взвешивать. Название и артикул обычно важнее длинного описания, однако приоритеты проверяют на своём ассортименте. Отдельно договоритесь, входит ли в общую выдачу контент о применении или только товарные карточки.
Подготовьте данные перед интерфейсом
Создайте словарь характеристик с понятными названиями, единицами и разрешёнными значениями. У одной категории может быть диаметр, у другой материал и способ монтажа. Общий набор десятков полей перегружает подбор. Для числовых параметров согласуйте единицы и правила диапазона. Значения в миллиметрах и сантиметрах должны сравниваться после нормализации. Для перечислений устраните разные написания одного свойства. Пустое поле обозначает неизвестное значение, а не универсальную совместимость. Такой товар требует отдельной проверки или видимого пояснения.
Проверьте, какая доля выбранной категории содержит данные для каждого фильтра. Если параметр заполнен только у части ассортимента, применение фильтра может скрыть подходящие товары. Сообщите владельцу каталога о пробеле и выберите временное поведение. Артикулы храните как идентификаторы с сохранением значимых символов, а дополнительные варианты написания используйте для поиска. На сайте производителя технические значения подтверждает специалист. Команда разработки не должна выводить совместимость по внешнему сходству моделей. Сначала подготовьте контрольную категорию, затем переносите проверенную схему на другие группы.
Опишите сочетание фильтров простыми правилами
Если человек выбирает два значения одного параметра, обычно ожидается выбор любого из них. Если он сочетает материал и размер, ожидает товары, соответствующие обоим условиям. Это распространённая логика, но её следует зафиксировать явно и проверить на вашем каталоге. Число результатов рядом с параметром должно означать определённое состояние: текущую выдачу с добавленным значением или все позиции категории. Меняющиеся счётчики без понятного правила создают ощущение ошибки. Для диапазона задайте границы, единицы и поведение неправильного ввода.
Показывайте применённые условия рядом с результатами и дайте снять отдельное значение. Кнопка сброса очищает фильтры, а судьбу поисковой строки и сортировки нужно согласовать. После выбора параметра можно обновлять выдачу сразу или использовать кнопку применения, особенно на телефоне. Решение зависит от длительности загрузки и количества полей. Для B2B-каталога полезно сохранять отбор при просмотре карточки, чтобы закупщик продолжал составлять список. Объясните доступность товара отдельно от его соответствия техническим параметрам: найденная позиция может требовать подтверждения поставки.
Сделайте поиск устойчивым к обычным вариантам ввода
Сначала проверьте точный артикул, артикул с пробелами и название на разных регистрах. Затем добавьте утверждённые синонимы и распространённые написания. Исправление опечаток полезно, если оно сохраняет исходный запрос и показывает, что было предложено другое совпадение. Для близких артикулов автоматическая замена опасна: отличающийся символ может обозначать другой товар. Точное совпадение должно быть узнаваемо в выдаче. Подсказки помогают перейти к позиции, категории или исправленному запросу, но их назначение нужно показывать рядом с названием.
W3C в паттерне combobox описывает управление списком подсказок с клавиатуры и передачу состояния вспомогательным технологиям. Если команда создаёт такой элемент, следует проверить выбор стрелками, Enter и закрытие списка. Обычный поиск с кнопкой тоже может быть удобным, если сложные подсказки пока не нужны. В техническом задании перечислите контрольные запросы и ожидаемые позиции. После выпуска собирайте запросы без результата, чтобы дополнять словарь на основе реального поведения, а не предположений о языке покупателей.
Помогите человеку при пустом результате
Разделяйте отсутствие совпадений, ошибку загрузки и категорию без опубликованных товаров. В первом случае покажите запрос и активные параметры. Предложите снять конкретный слишком узкий фильтр, проверить артикул или обратиться к специалисту. Во втором случае объясните технический сбой и дайте повторить загрузку с сохранением выбора. В третьем уместно описать состояние категории или предложить связанные направления. Одинаковый текст «ничего не найдено» скрывает причины и мешает человеку понять, какое действие полезно. Пустая выдача тоже часть полноценного сценария.
Не подменяйте выбранные параметры незаметно. Если предложены похожие позиции, обозначьте, какое условие они не выполняют и что нужно проверить. Для технических товаров близкое название не доказывает совместимость. Полезна кнопка запроса, которая передаёт менеджеру поисковую строку и отбор вместе с контактом. Принципы понятного следующего действия применимы и здесь: человек должен знать, что получит после обращения. Отдельно проверьте отсутствие результатов на телефоне, где панель фильтров может скрывать важное пояснение или кнопку сброса.
Сохраните состояние для ссылки и возврата
Закупщик часто отправляет подборку коллеге и возвращается после просмотра карточки. Полезно хранить поисковую строку, фильтры, сортировку и страницу списка в предсказуемом адресе. При открытии ссылки интерфейс восстанавливает допустимые параметры. Неизвестные значения обрабатывайте понятным способом, сохраняя доступную часть отбора. MDN описывает History API для управления историей навигации; конкретную схему команда выбирает по архитектуре сайта. Важен наблюдаемый результат: кнопка браузера «Назад» возвращает человека к прежней выдаче, а ссылка открывает согласованное состояние.
Договоритесь о стабильном порядке параметров и единых обозначениях. Один и тот же отбор не должен получать разные адреса из-за порядка нажатий. Из адреса исключают контакты и другие личные сведения. После изменения ассортимента старая ссылка может показывать другой состав, поэтому это ссылка на правило отбора, а не сохранённый коммерческий документ. Для выбора платформы проверьте поддержку таких состояний заранее. Функцию следует оценивать по возврату, прямому открытию и передаче коллегам, а не только по обновлению карточек на экране.
Условный пример: подбор крепежа по размеру и покрытию
Представим вымышленный каталог крепежа. Это учебный пример, а обозначения и параметры служат для проверки логики. Покупатель знает артикул и вводит его с пробелом. Поиск показывает точное соответствие после согласованной нормализации. Другой посетитель выбирает категорию, два возможных покрытия и один диапазон длины. Выдача объединяет покрытия и одновременно применяет диапазон. На карточке человек видит характеристики, а после возврата сохраняется выбранный отбор. Ссылку на эту выдачу можно открыть в отдельном браузере и получить те же условия.
Затем покупатель добавляет несовместимый с имеющимся ассортиментом размер. Интерфейс показывает пустой результат и перечисляет активные параметры. Он предлагает снять размер, сохранив категорию и покрытия. Если посетитель оставляет условия, форма передаёт их специалисту для проверки возможной поставки. Вторая проверка имитирует отказ сервера: человек получает сообщение о загрузке и кнопку повторения, а отбор остаётся на месте. Такой набор отличает проблему данных от проблемы связи. Пример не утверждает наличия продукции или её технической применимости, поскольку это устанавливает владелец каталога.
Согласуйте URL фильтров с поисковой стратегией
Каждая комбинация параметров может создавать новый адрес, и их число быстро растёт. Google в документации по фасетной навигации объясняет управление обходом таких URL. Сначала определите, какие сочетания действительно заслуживают отдельной публичной страницы: устойчивый спрос, достаточный ассортимент и содержательное объяснение выбора. Остальные адреса могут оставаться состояниями интерфейса. В документации Google по структуре URL каталога есть рекомендации по предсказуемым адресам и параметрам. Эти правила следует применить вместе с картой категорий и реальным способом загрузки страниц.
Canonical и ограничения обхода решают разные задачи, поэтому согласуйте их с техническим специалистом. Закрытие адреса от робота влияет на возможность прочитать его содержимое и директивы. Для выбранных посадочных страниц подготовьте стабильный адрес, заголовок, полезный текст и внутренние ссылки. Проверяйте итоговые ответы сервера и карту сайта по чеклисту SEO перед запуском. При обсуждении разработки каталога принесите контрольные запросы, словарь параметров и примеры пустой выдачи. Такой комплект позволяет оценить поиск, интерфейс и технические адреса как связанную рабочую функцию.
Проверьте сохранение отбора на маленьком экране
На телефоне панель фильтров часто открывается поверх списка. Пользователь должен увидеть текущие значения, количество найденных позиций и кнопку применения, если она предусмотрена. При закрытии панели договоритесь, сохраняется ли незавершённый выбор. Возврат к списку должен оставлять понятный результат, а длинные названия параметров должны читаться целиком. Проверьте ввод диапазона экранной клавиатурой и переход между полями. Плавающая кнопка не должна перекрывать последнее значение или ссылку на помощь. Эти состояния стоит смотреть на реальном устройстве с крупным шрифтом.
Сортировку отделите от фильтрации визуально и по смыслу. Выбор порядка меняет расположение найденных товаров, а выбор параметра меняет их состав. После обновления списка сообщайте количество доступным способом и сохраняйте удобное положение для продолжения просмотра. Если используется подгрузка, проверьте возврат из карточки к ранее открытому месту. Контрольный сценарий должен включать переход по прямой ссылке, открытие товара и возврат. Такая проверка обнаруживает потери контекста, которые трудно заметить при просмотре одной страницы в макете.
Первичные источники и документация
Следующий шаг
Если хотите применить схему к своему проекту, обсудите структуру и рабочие сценарии сайта. Сначала зафиксируем исходные данные и критерии готовности, затем оценим объём работ.
Посчитайте стоимость под вашу задачу
Ориентир. Финальная смета — после брифа по задачам.
Бесплатная диагностика за 24–48 часов: посмотрим ситуацию, скажем что даст результат, дадим смету.
