Фильтры на сайте: как упростить навигацию и повысить конверсию

Фильтр на сайте — это инструмент, с помощью которого покупатель отбирает товары по нужным параметрам: цене, цвету, размеру, бренду и другим характеристикам. От его настройки зависит, насколько быстро посетитель найдёт подходящий товар и сделает заказ.

Вместе с Павлом Моисеевым — руководителем отдела SEO-продвижения Kadema Digital — разберём форматы фильтров, принципы настройки панели и способы получить трафик из поиска на отфильтрованные страницы.

Какие фильтры бывают

Ниже мы разберём разные виды фильтров и для каких задач они подходят.

Чекбокс — это элемент, с помощью которого покупатель отмечает одно или несколько значений из списка. Его используют для характеристик с понятным набором вариантов: бренда, материала, цвета, страны производства. Если покупатель ищет товары разных брендов, ему не нужно искать каждый по отдельности — достаточно отметить их в одном блоке. Например, в Спортмастере можно вывести на экран одежду Nike, Adidas и Puma и сравнить варианты между собой.

Выпадающий список — это поле, которое раскрывает доступные значения по клику. Такой формат используют, когда нужно показать характеристику, но не занимать ей постоянное место в каталоге. Это особенно удобно для параметров, которыми покупатели пользуются реже или у которых много значений. В М.Видео подобные перечни собраны в компактные кнопки: покупатель видит больше товаров на экране, а нужный список раскрывает по клику.

Переключатель — это элемент с двумя состояниями: включён и выключен. Его используют для условий, которые можно применить или убрать одним нажатием. Например, «Только в наличии», «Со скидкой» или «Бесплатная доставка». Такие параметры удобно размещать в верхней части панели, чтобы покупатель мог быстро включить нужное условие.

Ползунок диапазона — это шкала с двумя бегунками, которые задают минимальное и максимальное значение. Он подходит для числовых характеристик, например цены, мощности, объёма памяти или диагонали. Лучше всего работает в сочетании с полями для ручного ввода, чтобы покупатель мог указать точные значения. Например, в Ozon такой фильтр используют для выбора объёма моющего средства, веса товара и других параметров, где важно задать границы.

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

Фильтр по рейтингу — это выбор минимальной оценки товара. Он помогает отсеять позиции с низкими оценками и оставить товары с нужным рейтингом. Такой вариант уместен в категориях, где люди ориентируются на отзывы, например в электронике, бытовой технике или косметике.

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

Как определить, какие параметры выводить

Выпишите характеристики, по которым отличаются товары в каталоге. Для смартфонов это бренд, диагональ, объём памяти и камера, для одежды — размер, цвет, материал и фасон. Далее проверьте, какие из перечисленных параметров влияют на выбор покупателя — их и выносите в фильтры. Например, в магазине одежды посмотрите, какую информацию покупатели чаще уточняют у менеджеров или ищут через поиск. Если спрашивают «есть ли чёрное платье 46 размера миди», добавьте цвет, размер и длину.

Проверьте, помогает ли параметр сузить каталог. Посмотрите, сколько товаров остаётся после выбора каждого значения. Если фильтр почти не меняет выдачу или оставляет всего несколько редких товаров, он не нужен. Например, для магазина одежды фильтр «Материал» имеет смысл, если в каталоге есть хлопковые, льняные, шерстяные и синтетические вещи. Если же 90% моделей состоит из полиэстера — этот параметр не нужен.

Уберите дубли и приведите значения к единому формату. Если товары загружаются из 1С, проверьте поля, которые используются для фильтрации. Например, объедините поля «Размер» и «Размер одежды», а значения «XL», «XL размер» и «XL-размер» приведите к одному виду.

Проверьте фильтрацию на реальных товарах. Выберите несколько параметров одновременно и посмотрите, как меняется каталог. Например, для платья задайте цвет, размер, длину и цену. Затем откройте несколько карточек из полученной выдачи и сопоставьте указанные в них параметры с выбранными значениями фильтров. Если характеристики совпадают, фильтр работает корректно.

Как настроить фильтры на сайте: основные правила

Расставьте параметры по важности. Характеристику, спрятанную внизу длинной панели, человек не заметит: потратит время на прокрутку, не найдёт товар и уйдёт с сайта. Вверху выводите характеристики, которые чаще всего выбирают пользователи, второстепенные убирайте в сворачиваемые группы. Например, в каталоге одежды сначала покажите размер, цвет и цену, а материал и фасон перенесите ниже.

Обновляйте фильтры и каталог сразу после изменения параметров. Пересчитывайте количество товаров рядом с каждым значением после изменения параметров. Сразу показывайте новую выдачу и скрывайте варианты, для которых подходящих позиций не осталось. Пример: в каталоге 200 женских ветровок. Покупатель выбирает размер 46 — система оставляет 8 подходящих моделей, а остальные убирает из выдачи.

Скрывайте длинные списки. Показывайте несколько наиболее востребованных вариантов, а остальные позиции скрывайте за кнопкой «Показать ещё». Тогда список не будет занимать весь экран и не помешает выбору других параметров. Например, из 30 брендов сначала покажите пять самых популярных, а остальные спрячьте за выпадающий список.

Показывайте выбранные параметры над каталогом. Покупатель должен видеть, какие условия заданы, и удалять их по одному, не сбрасывая остальные. Рядом разместите кнопку полного сброса. Например, если выбраны размер, цвет и цена, покупатель может убрать только цвет и продолжить поиск по размеру и цене.

Если места немного, объединяйте позиции в сворачиваемые группы и показывайте в заголовке их количество. Например, вместо списка брендов выведите лаконичную подпись «Furla: +2», как в Яндекс Маркете.

Выносите фильтры на отдельный экран в мобильной версии. Не занимайте ими пространство каталога: открывайте параметры по отдельной кнопке, а после настройки возвращайте покупателя к списку товаров. Например, добавьте отдельную кнопку в верхнюю часть каталога и закрепите её при прокрутке.

Как настроить страницы фильтров под поисковый трафик

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

Отберите комбинации для продвижения

Соберите в Вордстате запросы с характеристиками товаров и подберите сочетания, которые люди используют в поиске. Каждый из них проанализируйте по следующим критериям:

• Поисковый спрос. Чем он выше, тем больше потенциального трафика получит страница.
• Коммерческий интент. Если на первых позициях в выдаче страницы магазинов с товарами, сочетание подходит для SEO-страницы. Если там преимущественно статьи и обзоры — отдельная вкладка в каталоге не нужна.
• Ассортимент. Если в каталоге всего одна-две подходящие модели, отдельная страница не даст покупателю выбора и вряд ли будет полезна. Подмена отсутствующих товаров похожими моделями проблему не решит: человек, который ищет красные платья миди, ожидает увидеть именно такие товары.

Сформулируйте отдельные URL

Адрес должен отражать содержание страницы, чтобы поисковик и пользователь могли понять, что находится по ссылке. Например:

✅ /platya/krasnye/midi/ — по адресу понятно, что на странице собраны красные платья длины миди.

❌ /catalog?color=red&length=midi — ссылка содержит технические параметры, непонятно содержимое страницы.

Чтобы не путаться и не наделать дублей, пропишите последовательность отображения характеристик, например, сначала выводите категорию, затем цвет и длину, как в примере выше.

Заполните SEO-элементы и добавьте текст, если он нужен

Для каждой страницы задайте отдельные Title и H1 с названием категории и характеристиками. Формулировки должны соответствовать тому, что покупатель видит в каталоге. Например, для страницы с красными платьями миди:

SEO-текст добавляйте, когда каталогу не хватает информации по теме. Короткий блок может раскрыть особенности моделей, материалы, размеры или другие характеристики, которые важны при выборе. Полноценной товарной выдаче дополнительный текст не нужен: покупатель сразу видит подходящие модели, а поисковик получает информацию из заголовков, характеристик и карточек.

Закройте лишние комбинации от индексации

В поиске оставляйте страницы с реальным спросом и полноценным ассортиментом. Для остальных адресов настройте noindex, чтобы поисковики не добавляли в индекс множество URL с одинаковым содержанием. Проще всего включить эту настройку в CMS:

• 1С-Битрикс: в настройках «Умного фильтра» есть опция «Закрыть от индексации». При её включении система сама добавит нужный тег noindex.
• Tilda: в настройках отдельной страницы выберите вкладку Facebook & SEO → Отображение в поисковой выдаче → Задать специальные мета-данные → поставьте или снимите галочку «Запретить поисковикам индексировать эту страницу» → сохраните изменения.

Если в вашей CMS-системе такой настройки нет, попросите разработчика добавить на страницы с параметрами в URL код <meta name="robots" content="noindex, follow">.

Раз в месяц открывайте в Яндекс Вебмастере раздел «Страницы в поиске» и смотрите, сколько URL с фильтрами попало в индекс. Если поисковик добавил туда лишние комбинации, проверьте настройки автоматического закрытия.

Типичные ошибки при настройке фильтров

Не отображаются применённые фильтры. Покупатель не видит, какие параметры уже выбраны, и не может удалить только один из них. Из-за этого ему приходится заново настраивать поиск при изменении одного условия. Показывайте выбранные значения над каталогом и добавляйте возможность убрать каждый параметр отдельно.

Нет фильтров по важным характеристикам. Покупатель тратит больше времени на поиск подходящего товара и может уйти с сайта, не найдя нужный вариант. Магазин теряет потенциальную продажу. Добавляйте в каталог параметры, по которым покупатели сравнивают товары: например, разрешение для телевизоров или тип кожи для косметики.

Слишком много значений одного параметра. Десятки вариантов занимают много места и перегружают интерфейс. Покупателю приходится долго искать нужное значение. Показывайте первые 5–7 наиболее востребованных вариантов, остальные скрывайте под кнопкой «Показать ещё».

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

Несогласованные данные о товарах. Разные обозначения одной характеристики и пропуски в данных искажают результаты поиска. Например, товары одного размера могут быть указаны как «46», «46 размер» и «46/RU». Приводите значения к единому формату и заполняйте обязательные характеристики, чтобы товары корректно попадали в выдачу.

Фильтры на сайте: рекомендации

• Настраивайте фильтры под реальные потребности покупателей. Анализируйте поисковые запросы, обращения к менеджерам и поведение покупателей в каталоге, чтобы понять, какие параметры влияют на выбор. Убирайте фильтры, которые не сужают выдачу, и добавляйте те, по которым покупатели чаще всего сравнивают товары.
• Продумывайте удобство навигации на каждом этапе. Располагайте важные параметры вверху панели, показывайте выбранные значения над каталогом и выносите фильтры на отдельный экран в мобильной версии. Так покупатель быстрее проходит путь от поиска до оформления заказа.
• Используйте фильтры как источник SEO-трафика. Создавайте отдельные страницы под востребованные комбинации характеристик, задавайте для них понятные URL, Title и H1. Закрывайте от индексации лишние сочетания, чтобы избежать дублей и не потерять позиции в выдаче.

Фильтры на сайте: частые вопросы

Сколько фильтров должно быть на странице?

Фиксированного количества нет. Добавляйте параметры, которые помогают покупателю сузить каталог и выбрать подходящий товар. Например, для смартфонов это бренд, цена, диагональ экрана, объём памяти и камера.

Как понять, какие параметры добавить?

Изучите характеристики товаров, поисковые запросы и действия покупателей в каталоге. Оставьте параметры, которые встречаются у многих позиций и помогают сузить выбор. Например, при выборе одежды позиции отбирают по размеру, цвету и материалу.

Чем фильтр отличается от сортировки?

Фильтр убирает неподходящие позиции из результатов, а сортировка меняет порядок отображения. В первом случае покупатель может быстро найти в каталоге футболки синего цвета до 1000₽, во втором — отсортировать все модели по рейтингу, чтобы сначала увидеть самые популярные варианты.

Могут ли фильтры навредить SEO?

Да, если каждое сочетание характеристик получает отдельный URL, а поисковик индексирует все эти адреса. Например, магазин одежды может создать отдельные страницы для красных платьев, красных платьев размера 42 и сотен других сочетаний. Из-за подобных дублей в поиске появляется много похожих страниц, и поисковику сложнее определить, какую из них показывать пользователю. Часть ссылок получает низкие позиции или не попадает в поиск.

Как понять, увеличили ли фильтры конверсию?

Сравните поведение покупателей до и после внедрения или проведите A/B-тест. Смотрите не только на общую конверсию, но и на действия внутри каталога: долю пользователей, которые применили фильтр, перешли в карточку, добавили товар в корзину и оформили заказ.