E-ticaret filtreleme tasarımı: Kullanıcıyı ürüne hızlı ulaştırmak

E-ticaret filtreleme tasarımı, kullanıcının binlerce ürün arasından doğru ürüne saniyeler içinde ulaşmasını sağlayan kritik bir UX bileşenidir; ancak yanlış yapılandırılan filtre sistemi aynı zamanda ciddi bir teknik SEO sorununa dönüşebilir.

Faceted navigation (çok boyutlu filtreleme) olarak da adlandırılan bu sistem, kullanıcıya renk, beden, fiyat aralığı, marka ve stok durumu gibi birden fazla kriter üzerinden eş zamanlı filtreleme yapma imkânı sunar. Kullanıcı deneyimi açısından güçlü bir araç olan bu yapı, doğru SEO entegrasyonu olmadan arama motorlarında ciddi teknik sorunlara yol açabilir.

⠀

Filtre türleri ve doğru bileşen seçimi

⠀

E-ticaret filtreleme tasarımında filtre türleri, ürün kataloğunun niteliğine ve kullanıcı ihtiyacına göre belirlenmelidir:

Checkbox filtresi: Birden fazla seçeneğin aynı anda işaretlenebildiği en yaygın filtre türüdür. Marka veya kategori gibi karşılaştırmalı seçimlerde tercih edilir. "Nike + Adidas" gibi çoklu seçime izin vermesi, kullanıcının sonuç havuzunu genişletmesini sağlar.

Range slider: Fiyat aralığı ve boyut gibi sayısal değerler için idealdir. Minimum ve maksimum değerin aynı anda ayarlanabildiği çift tutamaçlı (dual-handle) slider, tek girdi alanına göre çok daha iyi bir kullanıcı deneyimi sunar.

Renk swatchi: Renk filtresi için metin etiket yerine küçük renkli daireler (swatch) kullanmak, seçimi hem hızlandırır hem de görsel olarak destekler. Swatchlar tıklanabilir alan olarak yeterince büyük olmalıdır (minimum 32x32px).

Toggle/switch: Stok durumu veya indirimli ürünler gibi ikili (açık/kapalı) seçenekler için uygundur.

Filtre sıralaması: Kullanıcı araştırmaları, en çok kullanılan filtrenin en üste yerleştirildiğinde dönüşümün arttığını göstermektedir. Analizlerden fiyat aralığı, marka ve renk filtrelerinin büyük çoğunlukta birinci sıraya taşındığı görülür.

⠀

Faceted navigation ve SEO: Duplicate content sorunu

⠀

E-ticaret filtreleme tasarımının en kritik teknik boyutu, URL yapısı ve duplicate content (yinelenen içerik) sorunudur. Her filtre kombinasyonu yeni bir URL oluşturduğunda Google, aynı veya çok benzer içeriğe sahip yüzlerce hatta binlerce URL'yle karşılaşır.

Örneğin:

• /erkek-ayakkabi?renk=mavi
• /erkek-ayakkabi?renk=mavi&marka=nike
• /erkek-ayakkabi?marka=nike&renk=mavi

⠀

Bu üç URL aynı içeriği gösterse de farklı URL'ler olarak dizine eklenmeye çalışılır. Bu durum crawl bütçesini tüketir, PageRank dağılımını bozar ve SEO performansını olumsuz etkiler.

Çözüm için kullanılan temel yöntemler şunlardır:

Canonical tag: Filtre sayfaları canonical tag ile ana kategori URL'sine işaret etmelidir. Bu sayede Google, filtre sayfalarının içeriğini orijinal sayfanın kopyası olarak değerlendirir ve ana sayfayı sıralar.

Noindex: Filtre sayfalarına meta name="robots" content="noindex, follow" etiketi eklenerek bu sayfaların dizine eklenmesi engellenir. "Follow" değeri, sayfadaki linklerin takip edilmesini sağlar.

JavaScript ile URL yönetimi: Filtreleme URL'yi değiştirmek yerine hash parametrelerini (#renk=mavi) kullanırsa, Google bu sayfaları ayrı URL olarak değerlendirmez. Ancak bu yaklaşım, filtre sayfalarının doğrudan paylaşılabilirliğini de ortadan kaldırır.

Robots.txt ile engelleme: Filtre parametrelerinin crawl edilmesini engellemek için Disallow: /*?*renk= gibi kurallar eklenebilir. Ancak bu yöntem kaba bir çözümdür ve yanlış yapılandırma önemli sayfaları da engelleyebilir.

⠀

⠀

⠀

Hangi filtre sayfaları SEO değeri taşır?

⠀

E-ticaret filtreleme tasarımında tüm filtre kombinasyonlarını noindex etmek doğru değildir. Bazı filtre sayfaları organik arama trafiği çekebilecek potansiyele sahiptir:

• "Nike erkek koşu ayakkabısı" gibi yüksek arama hacimli kombinasyonlar, SEO değeri taşıyan özel landing page olarak ele alınabilir.
• Bu sayfalara özel içerik (H1, meta description, kısa kategori açıklaması) eklenerek indexe açılabilir.
• Ancak bu karar keyword araştırmasına dayalı olmalı, her marka+kategori kombinasyonu için otomatik olarak uygulanmamalıdır.

⠀

Google Search Console'daki "Dizine eklenmedi — robots.txt tarafından engellendi" veya "Yinelenen içerik (canonical olmayan)" raporları, filtreleme SEO sorunlarını tespit etmek için düzenli olarak incelenmelidir.

⠀

Mobilde filtre UX: Drawer pattern ve dokunma tasarımı

⠀

E-ticaret filtreleme tasarımının mobil versiyonu, masaüstünden temelden farklıdır. Ekran genişliği kısıtlı olduğundan filtreler sidebar'da değil, ayrı bir katmanda (drawer) sunulur.

Drawer pattern: "Filtrele" butonuna tıklandığında soldan veya alttan kayan bir panel açılır. Filtreler bu panelde seçilir ve "Uygula" butonuyla liste güncellenir. Bu yaklaşım mobil ekranda filtre alanından içerik alanının çalınmasını önler.

Mobil filtre UX'inde dikkat edilmesi gereken noktalar:

• "Kaç sonuç bulundu?" bilgisi filtre panelinde dinamik olarak güncellenmelidir; kullanıcı uygulamadan önce kaç ürün göreceğini bilmek ister.
• Seçili filtreler panel dışarısında "etiket (chip)" formatında gösterilmelidir; böylece kullanıcı aktif filtreleri tek tıkla kaldırabilir.
• Filtre seçenekleri accordion yapısında gruplansın; tüm filtreler aynı anda gösterildiğinde uzun kaydırma gerektiren bir liste oluşur.
• "Tüm filtreleri temizle" seçeneği her zaman erişilebilir konumda olmalıdır.

⠀

⠀

⠀

⠀

Arama ve filtre entegrasyonu ile performans etkisi

⠀

E-ticaret filtreleme tasarımında arama kutusu ile filtre sistemi entegre çalışmalıdır. Kullanıcı "mavi spor ayakkabı" aramasını yaptıktan sonra renk filtresi zaten "Mavi" seçili olarak gelmeli; bu entegrasyon hem hız hem de kullanıcı beklentisi açısından kritiktir.

Performans: Her filtre değişikliğinde sayfanın yeniden yüklenmesi (full page refresh) kabul edilemez yavaşlıktır. AJAX tabanlı filtreleme (sayfa yenilenmeden içeriğin güncellenmesi) standart olmalıdır. Ancak bu yaklaşımda arama motoru botlarının JavaScript'i işleyip işleyemediği test edilmelidir; JavaScript olmadan sayfaya erişildiğinde filtre sonuçları görünür olmalı ya da server-side rendering (SSR) uygulanmalıdır.

Facet sayısı ve performans: Çok sayıda filtre seçeneği (örneğin 20'den fazla marka), sayfa yüklenirken tüm seçeneklerin DOM'a eklenmesini zorlaştırır. "Daha fazla göster" veya arama içi filtre (filtre arama kutusu) ile bu yük azaltılabilir.

⠀

Sık Sorulan Sorular

⠀

Filtre sayfaları canonical mi olmalı, noindex mi?

Genel kural şudur: arama hacmi taşıyan anlamlı kombinasyonlar (örneğin belirli marka + kategori) indexe açılabilir; rastgele kombinasyonlar canonical veya noindex ile yönetilmelidir. Google Search Console verileri bu kararı nesnel olarak destekler.

Filtre değiştiğinde URL değişmeli mi?

Evet; URL'nin güncellenmesi hem kullanıcının sonucu paylaşabilmesini hem de tarayıcı geri tuşunun doğru çalışmasını sağlar. history.pushState() veya replaceState() ile sayfa yenilenmeden URL güncellenebilir.

E-ticaret filtreleme tasarımı Core Web Vitals'ı etkiler mi?

Evet. Her filtre değişikliğinde tetiklenen DOM güncellemeleri ve layout shift, CLS (Cumulative Layout Shift) değerini olumsuz etkileyebilir. Filtre uygulandığında sonuç listesinin minimum boyut değişikliğiyle güncellenmesi ve skeleton loading kullanılması bu riski azaltır.

⠀

Blakfy olarak e-ticaret filtreleme tasarımını teknik SEO gereksinimleriyle birlikte değerlendiriyor; faceted navigation yapısını hem kullanıcının ürüne hızlı ulaşacağı hem de arama motorlarının doğru sayfaları dizine ekleyeceği biçimde kurgulamak için veriye dayalı bir yaklaşım benimsiyoruz.