Breadcrumb Tasarımı: Hiyerarşiyi Gösterir, Geçmişi Değil

Breadcrumb küçük bir bağlantı dizisi, o yüzden üzerine düşünmeye değmezmiş gibi görünüyor. Oysa çoğu sitede iz yolu iki farklı işi aynı anda yapmaya çalışıyor: sayfanın hiyerarşideki yerini göstermek ve kullanıcının geldiği yolu hatırlatmak. Bu ikisi aynı şey değil; hangisini seçtiğiniz hem işaretlemeyi hem önbelleği etkiliyor.

Konum tabanlı mı, geçmiş tabanlı mı

Konum tabanlı breadcrumb sayfanın site ağacındaki yerini gösterir ve o sayfa için sabittir. Geçmiş tabanlı olan ise kullanıcının tıklama sırasını yansıtır, yani tarayıcının geri tuşunun yatay hali olur. Peki ziyaretçi arama motorundan doğrudan derin bir ürün sayfasına düştüyse geçmiş tabanlı iz yolu ne gösterecek? Hiçbir şey, ya da tek bir öğe. Organik trafiğin büyük kısmı ana sayfayı hiç görmediği için doğru varsayılan konum tabanlısıdır; geçmiş tabanlısı yalnızca adımların gerçekten sıralı olduğu akışlarda (başvuru formu, sipariş adımları) anlam taşır.

Bir sayfa iki yere birden aitse

Asıl zor durum burada başlıyor. "Yaz İndirimi" koleksiyonundan girilen elbise ile "Kadın Giyim > Elbise" altından girilen elbise aynı sayfa. İz yolunu ziyaretçinin geldiği referansa göre üretmek ilk bakışta zekice görünür, sonra iki taraftan birden çarpar: aynı URL her ziyaretçiye farklı HTML döndürdüğü için tam sayfa önbelleği devre dışı kalır (bu bedeli breadcrumb'a ödemeye değmez), üstelik arama sonuçlarında görünen yol ile sayfadaki yol tutmaz.

Çözüm sıkıcı ama çalışıyor: her içeriğe bir birincil kategori atayın, iz yolunu ondan üretin, sabit tutun. İkincil kategoriye dönüş yolu gerekiyorsa onu breadcrumb'a değil, sayfa içindeki "ilgili koleksiyon" bağlantısına verin.

İşaretleme sayfada görünenle aynı olmalı

Arama sonuçlarında URL yolunun yerine kategori adımlarının çıkmasını sağlayan şey schema.org BreadcrumbList. JSON-LD tarafı birkaç satır:

{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ {"@type": "ListItem", "position": 1, "name": "Ana Sayfa", "item": "https://ornek.com/"}, {"@type": "ListItem", "position": 2, "name": "Kadın Giyim", "item": "https://ornek.com/kadin-giyim"}, {"@type": "ListItem", "position": 3, "name": "Uzun Elbise"} ] }

Son öğede item yok, çünkü kullanıcı zaten orada. position 1'den başlar ve boşluksuz artar. En sık yapılan hata ise işaretlemenin ekranda görünen iz yolundan farklı olması: kategori adını arama için işaretlemede uzatıp sayfada kısaltmak, yapısal verinin tümüyle yok sayılmasıyla sonuçlanabilir.

Erişilebilirlikte asıl iş klavyede değil

"Klavyeyle gezilebilsin" tavsiyesi doğru gelir ama boştur. Breadcrumb bağlantılardan oluşur, bağlantılar da varsayılan olarak sekme sırasına girer. O kısım siz hiçbir şey yapmadan çalışıyor.

Gerçek iş şurada: iz yolunu <nav aria-label="Breadcrumb"> içine alın, sıralı liste kullanın, son öğeye aria-current="page" verin, ayırıcıyı metne değil CSS'e bırakın. Metin olarak konan ">" karakterini ekran okuyucu "büyüktür" diye okur; dört seviyeli bir yolda kullanıcı bunu dört kez duyar.

Hemen çıkma oranını gerçekten düşürür mü

Bu iddiaya hemen her rehberde rastlanıyor, dayanağı nadiren gösteriliyor. Breadcrumb'ın ölçülebilir katkısı daha dar bir yerde: dışarıdan derin bir sayfaya inen ziyaretçiye siteden çıkmak yerine bir üst kategoriye geçme seçeneği veriyor. Etkisini kendi analitiğinizde görmek zor değil, iz yolu bağlantılarına ayrı bir olay etiketi koyup tıklanma oranına bakmanız yeterli. Tıklanmıyorsa breadcrumb hâlâ yön gösteriyordur ama gezinme yükünü taşımıyordur, o zaman da tasarımda ona ayrılan yeri sorgulayın.

Nerede hiç gerekmez

Derinliği ikiyi geçmeyen sitelerde iz yolu üst menünün söylediğini tekrar eder. Açılış sayfalarında, ödeme adımlarında ve tek seviyeli bloglarda da yer kaplamaktan başka iş görmez. Dar ekranda dört seviyeli bir yolu sığdırmak için ortadaki adımları üç noktaya indiriyorsanız, cevabını aramanız gereken soru "bunu nasıl kısaltırım" değil, "bu sayfa neden dört kat derinde" olmalı.