Skuteczne przeszukiwanie katalogu produktów zaczyna się od dobrze zaprojektowanych filtrów. Poniższa instrukcja przeprowadzi Cię przez cały proces: od modelowania danych, przez wybór silnika, aż po interfejs i monitorowanie efektów. Nauczysz się, jak dobrać atrybuty, zbudować filtrowanie fasetowe, utrzymać spójny indeks, dbać o wydajność, projektować świetny UX i dostępność, zabezpieczyć SEO, skonfigurować cache, zaplanować skalowalność i podnieść konwersja.
Planowanie i projekt filtrowania
Ustal cele i miary sukcesu
Krok 1: Zdefiniuj mierzalne cele. Najczęstsze: skrócenie czasu do znalezienia produktu, wzrost CTR na listingu, poprawa współczynnika dodania do koszyka, skrócenie czasu renderu listy, spadek współczynnika odrzuceń na stronach wyników.
- Kluczowe KPI: czas do pierwszego kliknięcia, konwersja po użyciu filtrów, liczba filtrów na sesję, udział sesji z przynajmniej jednym filtrem, średni czas ładowania listy po filtrze.
- Zapisz bazowe wartości (benchmark) z obecnego systemu, by móc porównać przed/po.
Wybierz atrybuty i zasady filtrowania
Krok 2: Określ, po czym klienci realnie zawężają wybór. Najczęściej: kategorie, cena, marka, rozmiar, kolor, materiał, dostępność w magazynie, dostawa/odbiór, ocena, promocje, cechy techniczne (np. pojemność, moc, wymiary).
- Ustal typy filtrów: pojedynczy wybór, wielokrotny wybór, zakres (liczba, cena), przełączniki (np. tylko dostępne), hierarchiczne (kategoria → podkategoria), tagi (np. eco, premium).
- Zdefiniuj reguły łączenia: AND w obrębie jednego atrybutu, OR między wartościami, lub odwrotnie: w zależności od biznesu. Spisz to formalnie.
- Określ, które filtry są globalne (wszędzie), a które kontekstowe (tylko w wybranych kategoriach).
Model danych pod filtry
Krok 3: Zaprojektuj spójny słownik atrybutów. Ten sam znacznik „czerwony” niech będzie jedną wartością w całym katalogu, a nie „czerwony”, „Red”, „#FF0000”.
- Standaryzacja: normalizuj jednostki (cm vs mm), słowniki (np. marka), typy danych (liczby vs tekst).
- Warianty: zdecyduj, czy filtrujesz po produkcie głównym, czy po wariantach (kolor/rozmiar). Często warto indeksować warianty, ale łączyć je w kartach produktowych.
- Zakresy: predefiniuj „bucket’y” (np. 0–99, 100–199) lub użyj dynamicznej agregacji liczbowej.
Reguły jakości danych
Krok 4: Zbuduj proces, który pilnuje kompletności i poprawności atrybutów.
- Walidatory w CMS/PIM (wymagalność, typ, zakres).
- Raporty braków (produkty bez kluczowych atrybutów, niespójności jednostek).
- Automatyczna normalizacja (np. mapowanie „XL” → „Extra Large”).
Ryzyka SEO i projekt informacji
Krok 5: Zaplanuj, które kombinacje filtrów mogą mieć własne indeksowalne strony (landing pages), a które należy wygasić meta tagami. Unikniesz kanibalizacji i duplikacji treści.
- Wybierz kilka „money facets” do pozycjonowania (np. kategoria + marka + cecha kluczowa) i przygotuj dla nich dedykowane treści.
- Pozostałe kombinacje trzymaj jako noindex, kontroluj ich linkowanie wewnętrzne.
Warstwa danych i wyszukiwarki
Źródła i normalizacja
Krok 6: Zbierz dane z PIM/CMS/ERP, zunifikuj schemat, usuń duplikaty, ujednolić encje (produkt, wariant, marka, kategoria). To fundament późniejszej spójności i szybkości.
- Pipeline ETL/ELT: ekstrakcja (API/CSV), transformacja (walidacja, mapowanie), ładowanie (baza + silnik wyszukiwania).
- Idempotencja: procesy aktualizacji muszą być odporne na powtórne uruchomienia.
Wybór i konfiguracja silnika
Krok 7: Dobierz technologię facetów i agregacji: wyszukiwarka dokumentowa (Elasticsearch, OpenSearch, Solr), silnik „hosted” (Algolia, Meilisearch), lub baza kolumnowa z agregacjami.
- Wymagania: agregacje po atrybutach, filtry wielowartościowe, zakresy liczbowe, sortowanie różnymi kryteriami, highlight/synonimy (jeśli łączysz z wyszukiwaniem pełnotekstowym).
- Zadbaj o mapowanie typów (keyword vs text, integer/float, boolean, date) zgodne z przeznaczeniem facetów.
Projekt dokumentu i agregacji
Krok 8: Zdecyduj, co jest dokumentem: produkt czy wariant. Jeśli wariant, przechowuj atrybuty wspólne i wariantowe, oraz identyfikator rodzica do grupowania w UI.
- Dodaj pola do agregacji faset: wartości atrybutów jako tablice (np. [„czerwony”, „bawełna”]).
- Dla zakresów cenowych: przechowuj cenę katalogową, cenę po promocji, i selektor aktywnej ceny (np. aktualna cena). Ułatwi to obliczenia filtrów „tylko promocje”.
- Twórz „flattened” atrybuty dla często wykorzystywanych cech, by przyspieszyć agregacje.
Aktualizacja indeksu i spójność
Krok 9: Zaprojektuj mechanizm aktualizacji w oparciu o zdarzenia: produkt utworzony, zmieniony, stan magazynowy, cena, atrybut. Aktualizuj tylko zmienione dokumenty.
- Tryb near-real-time: batch co kilka minut + natychmiastowe push dla krytycznych zmian (stan, cena).
- Reindeksacja „na boku”: buduj nowy indeks, przełącz alias po zakończeniu, by uniknąć przerw.
Warianty i dostępność
Krok 10: Ustal logikę filtrowania po dostępności. Jeśli klient włączy „tylko dostępne”, pokaż tylko te produkty/warianty, które mają stan > 0, a w agregacjach nie wyświetlaj pustych wartości.
- Agregacje warunkowe: licz liczniki wartości po nałożeniu bieżących filtrów, by unikać „martwych” facetów.
- Konfiguruj kolejność wartości w filtrach (najpopularniejsze na górze, rzadkie na dole, z licznikiem sztuk).
Backend API do obsługi filtrów
Projekt kontraktu REST/GraphQL
Krok 11: Zdefiniuj spójny endpoint do listy produktów z facetami. Parametry powinny jednoznacznie określać stan filtrów, sortowanie i paginację.
- Przykładowe parametry: category, q (fraza), brand[], color[], price.min, price.max, rating.min, inStock, delivery.pickup, sort, page, perPage.
- Odpowiedź powinna zwracać: listę produktów (z minimalnym zestawem danych dla listingu), pager (page, total, perPage), facety (nazwa → lista wartości z licznikami), aktywne filtry (echo requestu).
Walidacja i ochrona
Krok 12: Waliduj wszystkie parametry. Ogranicz dozwolone pole sortowania, typy danych (liczba, boolean), zakresy, maksymalną liczbę wybranych wartości.
- Rate limiting i ochrona przed nadużyciami (np. zbyt głębokie kombinacje facetów generujące drogie zapytania).
- Sanity caps: limit OR’ów, limit zakresów, maksymalny page × perPage.
Paginate, sortuj, grupuj
Krok 13: Zapewnij stabilne sortowanie (np. po trafności, popularności, cenie rosnąco/malejąco, nowości). Paginacja oparta na offset/limit lub, przy bardzo dużych katalogach, na „search after”.
- Stabilne ID do „search after” (np. (sortKey, productId)) dla przewidywalności wyników.
- Grupowanie po produkcie nadrzędnym, gdy indeksujesz warianty: zwracaj reprezentanta wariantu (np. najtańszy dostępny).
Strategie buforowania
Krok 14: Zbuduj strategię cache’owania wielopoziomowego.
- HTTP: ETag/Last-Modified, krótkie TTL dla dynamicznych facetów, dłuższe dla statycznych kategorii.
- CDN/edge: klucze cache obejmują ścieżkę + posortowane parametry filtrów (unikaj różnicowania przez kolejność).
- Backend: cache wyników agregacji dla popularnych zestawów filtrów, invalidacja po zmianach danych.
Obserwowalność i testy wydajności
Krok 15: Mierz czasy odpowiedzi i obciążenie.
- Metryki: p50/p95/p99 dla zapytań z facetami, liczba dokumentów skanowanych, cache hit ratio, błędy.
- Testy obciążeniowe: symuluj popularne kombinacje filtrów, szczyty sezonowe, zimne i ciepłe cache.
Frontend i doświadczenie użytkownika
Architektura komponentów
Krok 16: Zbuduj niezależne komponenty: panel filtrów, lista produktów, licznik wyników, okruszki aktywnych filtrów, reset filtra, paginator, sortowanie.
- Komponenty powinny reagować na ten sam globalny stan filtrów (URL jako jedyne źródło prawdy).
- Unikaj pełnego przeładowania strony; użyj dynamicznego pobierania danych i aktualizacji listy.
Dostępność i klawiatura
Krok 17: Zaprojektuj pełną obsługę klawiaturą i czytnikami ekranu. Dodaj role i atrybuty ARIA, logiczny focus order, odpowiednie etykiety.
- Etykiety dla checkboxów i suwaków zakresu (min, max), opis zmian liczby wyników po zastosowaniu filtra.
- Kontrast i rozmiar hit-area na urządzeniach dotykowych.
Interakcje i mikrocopy
Krok 18: Zdecyduj, czy filtry stosują się natychmiast (auto-apply) czy po kliknięciu „Zastosuj”. Dla mobilnych często lepszy jest tryb „Zastosuj”, by uniknąć nadmiernych przeładowań.
- Chipsy/okruszki aktywnych filtrów nad listą, pojedyncze „Wyczyść wszystko”, a także czyszczenie pojedynczego filtra.
- Komponent zakresu: możliwość wpisania wartości i przesuwania suwaków; pokazuj aktualny zakres w tekście.
- Sortowanie widoczne i czytelne; zachowuj spójny wynik po zmianie sortu.
Mobile-first i wzorce układu
Krok 19: Na małych ekranach użyj wysuwanych paneli (off-canvas), sticky przycisku „Filtry”, oraz liczby wyników na przycisku „Pokaż X produktów”.
- Grupuj filtry wg ważności; najpierw kategoria/podkategoria, cena, dostępność, marka.
- Pamiętaj stan filtrów między przejściami, np. gdy klient wraca z karty produktu.
URL jako stan aplikacji
Krok 20: Reprezentuj stan filtrów w query stringu. Ułatwia to dzielenie się linkiem i powrót do wyników.
- Standaryzuj nazwy parametrów. Używaj wartości przyjaznych i stabilnych (slug zamiast ID, jeśli nie zmieniasz ich często).
- Porządkuj parametry (alfabetycznie) by zwiększyć skuteczność cache i porównywania URL.
Responsywność i płynność
Krok 21: Dodaj skeletony, zachowuj wysokość listy, by uniknąć skakania layoutu. Opóźnij drogą telemetrię poza krytyczną ścieżkę renderu.
- Debounce wysyłania zapytań przy szybkim klikaniu wielu wartości.
- Optymistyczne UI: zaznaczony filtr zmienia stan od razu, a wyniki docierają chwilę później.
SEO, analityka i utrzymanie
Faceted SEO bez duplikacji
Krok 22: Zdefiniuj politykę indeksacji dla stron z filtrami. Wybierz kilka strategicznych kombinacji do indeksowania i zbuduj dla nich unikalne treści (tytuł, opis, nagłówki, fragmenty poradnikowe).
- Pozostałe kombinacje oznacz meta robots noindex, ustaw rel=canonical na bazową stronę kategorii.
- Kontroluj linkowanie wewnętrzne: nie indeksuj niektórych linków facetów (nofollow), nie generuj indeksowalnych map dla trywialnych kombinacji.
Mierzenie efektów i diagnostyka
Krok 23: Zbieraj zdarzenia: otwarcie panelu filtra, klik w wartość, ustawienie zakresu, reset, zastosowanie, zmiana sortowania, klik w produkt po filtrze, zakup po filtrze.
- Dashboard: udział sesji z filtrowaniem, średnia liczba filtrów/sesję, „czas do produktu”, porównanie konwersji użytkowników filtrujących vs niefiltrujących.
- Mapy ciepła i nagrania sesji, by znaleźć martwe filtry lub nieintuicyjne interakcje.
A/B testy komponentów
Krok 24: Eksperymentuj z ułożeniem i treścią: pozycja panelu, auto-apply vs przycisk, kolejność filtrów, etykiety, domyślne rozwinięcie sekcji.
- Testuj jeden element naraz; mierz wpływ na czas znalezienia produktu, CTR listy, konwersję i wydajność.
- Jeśli to możliwe, różnicuj eksperymenty między desktopem i mobilem.
Utrzymanie, jakość i edge cases
Krok 25: Przygotuj listę przypadków brzegowych i automatyczne testy e2e (np. dla topowych kategorii i filtrów).
- Brak wyników: zaproponuj usunięcie ostatniego filtra, pokaż bliskie kategorie lub popularne produkty.
- Zmiany asortymentu: filtrowanie nie może trzymać „martwych” wartości: odświeżaj agregacje.
- Zmiany cen: zakresy muszą od razu odzwierciedlać promocje i wyprzedaże.
Wielojęzyczność i rynki
Krok 26: Dla wielu krajów: osobne indeksy per rynek, lokalne słowniki wartości, lokalne jednostki (US vs EU), różne reguły dostępności i podatków.
- Parametry URL niech będą stabilne między językami (np. stałe klucze, tłumaczenia po stronie prezentacji).
- Wersjonowanie słowników: zmiany nazw wartości nie powinny psuć linków.
Wydajność i koszty operacyjne
Krok 27: Ustal budżet wydajnościowy per interakcja (np. TTFB API do 300 ms p95, render do 1 s p95 dla listy po filtrze) oraz plan kontroli kosztów (rozmiar indeksu, liczba replik, limity zapytań).
- Agregacje tylko dla widocznych filtrów: resztę licz na żądanie lub lazy.
- Prefetch facetów dla najpopularniejszych kategorii i zestawów filtrów w godzinach szczytu.
Przykładowe ścieżki wdrożenia w popularnych ekosystemach
Krok 28: WooCommerce: zasil produkty do wyszukiwarki (np. ElasticPress/Algolia), mapuj atrybuty Woo jako facety, zamień domyślne query na zapytania do silnika. Shopify: użyj Search & Discovery + app do facetów lub zewnętrzny silnik i storefront API. Magento/OpenMage: włącz Elastic, normalizuj atrybuty w EAV, zbuduj adapter API.
- Custom headless: GraphQL/REST BFF, indeks w Elastic/Meili, SSR listy na edge dla SEO, dehydracja stanu dla klienta.
- Marketplace: osobny wymiar filtrów per sprzedawca, atrybuty wspólne z namespacingiem, ostrzejsze limity zapytań.
Lista kontrolna gotowości produkcyjnej
Krok 29: Przed startem przejdź checklistę:
- Dane: kompletność kluczowych atrybutów > 98%, walidatory działają, brak duplikatów.
- Indeks: poprawne mapowanie typów, szybkie agregacje p95, reindeks „na boku”.
- API: walidacja parametrów, limity, monitoring, logowanie błędów, mechanizmy circuit breaker.
- Frontend: dostępność (ARIA, focus), mobile-first, szybkie renderowanie, stabilny layout.
- SEO: polityka noindex/canonical dla facetów, wybrane landing pages mają treści.
- Analityka: eventy wdrożone, dashboardy gotowe, alerty na spadki konwersji.
- Cache: klucze deterministyczne, TTL per typ zasobu, invalidacja po aktualizacji danych.
Rozszerzenia i przyszłe usprawnienia
Krok 30: Po stabilizacji rozważ funkcje zaawansowane:
- Dynamiczne układanie filtrów wg popularności i przewidywanej użyteczności (uczenie maszynowe).
- Podpowiedzi filtrów kontekstowe (np. „Najczęściej wybierane dla tej kategorii”).
- Wykluczenia (NOT) i różnicowanie filtrów po dostępności kanału (online/odbiór w sklepie).
- Synonimy i transliteracja dla wyszukiwania + filtry (np. „bordowy” ≈ „burgund”).
Tomek Bogucki
Tomek Bogucki tworzy treści dla bloga icomSEO: praktyczne poradniki o SEO, reklamie i marketingu internetowym.
