Breadcrumb, web sitelerinde kullanıcıların bulundukları sayfanın hangi hiyerarşide olduğunu gösteren bir navigasyon aracıdır. Adını, ünlü Hansel ve Gretel masalından alır; masalda çocuklar ormanda kaybolmamak için ardında ekledikleri ekmek kırıntılarıyla yol bulurlar. Web sitesindeki breadcrumb’lar da benzer şekilde kullanıcıya, bulunduğu sayfanın üstündeki sayfalara kolayca ulaşma imkanı tanır.
Breadcrumb Nedir?
Breadcrumb, bir web sayfasında, genellikle üst kısımda ve yatay olarak sıralanan, kullanıcının bulundukları sayfadan önceki sayfalara kolayca dönmesini sağlayan bir navigasyon sistemidir. Temel olarak, kullanıcının web sitesinde hangi konumda olduğunu anlamasına yardımcı olur. Bir breadcrumb yapısı genellikle şu şekilde görünür:
Ana Sayfa > Kategoriler > Elektronik > Akıllı Telefonlar > iPhone 13
Bu örnekte, kullanıcı, ana sayfadan başlayarak ürün kategorilerine ve en son akıllı telefonlar kategorisine gitmiştir.
Breadcrumb Türleri
Breadcrumb’lar genel olarak üç farklı türde kullanılabilir:
Konum Temelli Breadcrumb
Bu tür breadcrumb, kullanıcının web sitesindeki yerini gösterir. Web sitesinin hiyerarşisine göre, kullanıcının bulunduğu sayfaya giden yolu izler. Çoğu web tasarım bu tür breadcrumb’ları kullanır.
Örnek:
Ana Sayfa > Elektronik > Akıllı Telefonlar > iPhone 13
Yol Temelli Breadcrumb
Yol temelli breadcrumb, kullanıcının siteyi gezerek gittiği yolu gösterir. Bu tür breadcrumb’lar, kullanıcıların daha önce ziyaret ettikleri sayfaları takip etmelerine yardımcı olur. Ancak, genellikle e-ticaret sitelerinde kullanılmaz.
Örnek:
Ana Sayfa > iPhone 13 > Detaylar > Yorumlar
Özellik Temelli Breadcrumb
Bu tür breadcrumb’lar, özellikle e-ticaret sitelerinde kullanılır. Kullanıcılar, filtreler veya ürün özelliklerine göre sayfaları daraltarak farklı kategorilerde gezinebilirler.
Örnek:
Ana Sayfa > Elektronik > Akıllı Telefonlar > Fiyat: 1000-2000 TL > Marka: Apple
Kullanıcı Deneyimi İçin Önemi
Breadcrumb, web sitesinin kullanıcı deneyimini (UX) iyileştirmek için oldukça önemlidir. Sağladığı faydalar aşağıdaki şekildedir:
- Kolay Navigasyon: Kullanıcıların web sitesinde bulundukları sayfadan geri dönmelerini kolaylaştırır. Sayfalar arasında geçiş yaparken, kullanıcılar ana sayfaya ya da önceki kategori sayfalarına hızlıca ulaşır.
- Ziyaretçi Kaybını Azaltır: Kullanıcılara yeni sayfalara gitme fırsatı sunduğundan, ziyaretçilerin sadece bir sayfada takılmalarını engeller. Bu da siteden çıkma oranını (bounce rate) düşürür.
- Site Yapısının Anlaşılmasını Kolaylaştırır: Web sitesinin yapısını kullanıcıya gösterir ve onları sayfanın bağlamı hakkında bilgilendirir. Kullanıcılar, sitenin nasıl organize edildiğini ve hangi konumda olduklarını daha iyi anlarlar.
- Kolayca Geri Dönme: Kullanıcılara sadece tek bir tıklamayla daha üst düzey sayfalara geri dönme imkanı tanır. Bu, menüleri tekrar kullanma veya arama yapma zorunluluğundan daha hızlı ve kolay bir çözüm sunar.
SEO’ya Breadcrumb Katkısı
Breadcrumb’lar sadece kullanıcı deneyimini iyileştirmekle kalmaz, aynı zamanda SEO açısından da büyük faydalar sağlar:
- Arama Motorları İçin Daha İyi Endeksleme: Arama motorlarına web sitesinin yapısı hakkında bilgi verir ve arama motorları siteyi daha kolay indeksler.
- Arama Sonuçlarında Görünürlük Artışı: Bu eklentiler, arama motorlarında zengin snippet’lar (rich snippets) olarak görüntülenebilir. Bu, kullanıcıların arama sonuçlarından sitenizi daha iyi anlamalarına yardımcı olur ve tıklama oranlarını (CTR) artırır.
- Zengin Snippet’lar: Doğru şekilde yerleştirilmiş breadcrumb’lar, arama sonuçlarında başlıkların altında bir breadcrumb izi olarak görünür. Bu da sitenizin arama sonuçlarında daha dikkat çekici ve anlaşılır olmasını sağlar.
- Dahili Bağlantılar (Internal Linking): Site içinde doğru bağlantılar kurarak güçlü bir dahili bağlantı yapısı oluşturur. Bu, sayfalar arasında link değerinin dağılmasına yardımcı olur ve SEO’yu iyileştirir.
Web Sitenize Breadcrumb Nasıl Eklenir?
Breadcrumb’ları sitenize eklemek oldukça kolaydır. İşte adım adım nasıl yapılır:
1- Breadcrumb Türünü Seçin
Sitenizin yapısına en uygun türü seçin. Eğer web sitenizin net bir hiyerarşisi varsa, konum temelli breadcrumb kullanmanız genellikle en iyi seçenektir.
2- Web Sayfalarınıza Breadcrumb Ekleyin
Breadcrumb’ı sayfanın üst kısmına, genellikle ana içeriğin ve başlıkların üzerinde yerleştirin. Böylece kullanıcılar kolayca görür ve erişir.
3-Erişilebilirliği Sağlayın
Breadcrumb’ların herkes için erişilebilir olduğundan emin olun. Semantik HTML etiketleri (örneğin <nav> ve <ul>) kullanarak erişilebilir ve kullanıcı dostu breadcrumb’lar oluşturun.
4- Schema.org ile İşaretleme
Arama motorlarının breadcrumb’ları doğru şekilde tanıyabilmesi ve zengin snippet olarak görüntüleyebilmesi için, schema.org’daki BreadcrumbList işaretleme biçimini kullanarak sayfaları işaretleyin. Örnek:
<div class="breadcrumb">
<ul>
<li><a href="/">Ana Sayfa</a></li>
<li><a href="/elektronik">Elektronik</a></li>
<li><a href="/elektronik/akilli-telefonlar">Akıllı Telefonlar</a></li>
<li>iPhone 13</li>
</ul>
</div>
5- Breadcrumb’ları Test Edin
Breadcrumb’ları ekledikten sonra, tüm sayfalarda ve cihazlarda düzgün çalıştığından emin olun. Google’ın Yapısal Veri Test Aracı ile breadcrumb’ların doğru şekilde işaretlendiğinden emin olabilirsiniz.
En İyi Uygulamalar
Breadcrumb’larınızı daha etkili hale getirmek için aşağıdaki en iyi uygulamaları göz önünde bulundurabilirsiniz:
- Basit ve Açıklayıcı Etiketler Kullanın
Her breadcrumb bağlantısının, kullanıcılara nereye gideceklerini açıkça anlatan basit ve açıklayıcı etiketlere sahip olması gerekir.
- Breadcrumb Seviyelerini Sınırlayın
Breadcrumb’ların çok uzun olmamasına dikkat edin. Genellikle 3-5 seviyeden fazla olmaması önerilir.
- Mevcut Sayfayı Vurgulayın
Sonuncu bağlantı tıklanabilir olmamalıdır. Bunun yerine, mevcut sayfa vurgulanmalıdır.
- Tutarlı Olun
Breadcrumb’ları tüm sayfalarda tutarlı bir şekilde yerleştirin ve site yapısını doğru yansıttığından emin olun.
Yapılan Yaygın Hatalar
- Breadcrumb’ları Aşırı Karmaşık Hale Getirmek: Breadcrumb’ları basit ve anlaşılır tutun. Gereksiz öğelerden veya karmaşık hiyerarşilerden kaçının.
- Sayfalar Taşındığında Breadcrumb’ları Güncellemeyi Unutmak: Sayfalar taşındığında veya yeniden organize edildiğinde breadcrumb’ları da güncellemek önemlidir. Kırık linkler kullanıcı deneyimini olumsuz etkileyebilir.
- Çok Fazla Breadcrumb Seviyesi Kullanmak: Çok uzun bağlantı dizileri kullanıcıları bunaltabilir. Bu nedenle, breadcrumb seviyelerini fazla uzatmamaya özen gösterin.
Popüler Web Sitelerinde Breadcrumb Örnekleri
Bazı popüler web siteleri breadcrumb kullanımında oldukça başarılıdır:
- Amazon
Amazon, kategori yapısını ve ürün detaylarını net bir şekilde göstermek için konum temelli breadcrumb kullanır. - Etsy
Etsy, ürünlerin filtrelenmesi ve daraltılması için özellik temelli breadcrumb kullanır. - Wikipedia
Wikipedia, konum temelli breadcrumb kullanarak, kullanıcıların makale yapısını ve daha önce okudukları sayfaları kolayca takip etmelerini sağlar.
Özet olarak breadcrumb’lar, hem kullanıcı deneyimini hem de SEO’yu iyileştiren önemli bir web tasarım aracıdır. Web sitenize breadcrumb eklemek, sitenizin daha kullanışlı ve erişilebilir olmasını sağlar. Ayrıca, arama motorları için önemli bir avantaj sağlar.
İçindekiler