Breadcrumb Nedir?

Breadcrumb yani türkçe karşılığı ile ekmek kırıntısı, kullanıcılara web sitesinin hangi bölümünde olduğunu belirten, gezinmeyi kolaylaştıran bir navigasyon sistemidir. Breadcrumb yapısı sadece kullanıcılara değil arama motoru botlarına da site hiyerarşisi ve sayfalar arasındaki ilişki hakkında bilgi verir. Arama motoru botlarının crawl işlemi sırasında sayfalar arasında kolayca gezinebilmesini sağlar ve dizine eklenmeyi kolaylaştırır.

Breadcrumb terimi adını Hansel ve Gretel isimli ünlü çocuk masalından alır. Bu masalda karakterler ormanda yollarını kaybetmemek için ekmek kırıntısı bırakarak ormanda dolaşırlar. Breadcrumb yapısı da kullanıcılara anasayfadan ne kadar uzaklaştıklarını ve web sitesinin tam olarak neresinde olduklarını belirtir. Bu yüzden ekmek kırıntısı yani breadcrumb olarak anılır.

Kullanıcı deneyimini geliştirmek ve arama motorlarına web sitesi hiyerarşisi hakkında daha iyi bilgi vermek amacıyla kullanılan bu yapı büyük e-ticaret sitelerinde ve blog sayfalarında karşımıza çıkar.

Örneğin bir e-ticaret sayfası için “Anasayfa>Kategori>Ürün” veya bir blog sayfası için “Anasayfa>Blog>Blog İçeriğinin Adı” şeklinde breadcrumb yapısı oluşturulabilir. Böylece kullanıcılar anasayfadan ne kadar uzakta olduklarını görebilir ve kolayca bir önceki sayfaya veya ana sayfaya ulaşabilir.

Breadcrumb Çeşitleri Nelerdir?

Breadcrumb yapısı site büyüklüğüne, site içeriğine veya tercihe göre farklı şekillerde oluşturulabilir. Özelleştirilebilir olduğu için  siteler arasında farklılık gösterebilir. Yaygın olarak kullanılan 3 çeşit breadcrumb yapısı mevcuttur:

• Site hiyerarşisine göre düzenlenen
• Özelliklere/filtrelere göre düzenlenen
• Gezinme geçmişine göre düzenlenen

Hiyerarşi (Lokasyon) Odaklı Breadcrumb

Bu yöntem SEO dostu olması ve kullanıcı deneyimini üst düzeyde iyileştirmesi sebebiyle en çok tercih edilen breadcrumb yöntemidir. Özellikle büyük web sitelerinde kullanımı tercih edilir. Lokasyon odaklı breadcrumb yapısında kullanıcılar, hangi sayfada olduklarını ve bulundukları sayfanın hiyerarşik konumunu net bir şekilde görebilirler. Kullanıcılar bu yol haritasında istedikleri sayfaya tıklayarak web sitesinin ilgili bölümüne geçebilir. 

Örnek: Anasayfa>Elektronik>Cep Telefonu> Iphone 13

Özellik (Attribute) Odaklı Breadcrumb

Hiyerarşi odaklı breadcrumb yapısından farklı olarak özelliğe bağlı oluşturulan breadcrumb yapısında sayfaya ait title dikkate alınmaz .Özellik odaklı breadcrumb yapısı kullanan sitelerde filtreleme alanında yapılan seçimlere ait bir yol haritası kullanıcılara gösterilir.

Daha çok kullanıcının yaptığı arama ve bulunduğu sayfanın içeriği hakkında bilgi vermeye yarar. E-ticaret sitelerinin filtre yapılarında yaygın olarak kullanılır.

Örnek: Anasayfa>Erkek>Pantolon>Kot Pantolon> Small

Gezinme Geçmişi Odaklı Breadcrumb

Tam olarak ekmek kırıntısı mantığıyla çalışan, kullanıcıların web sitesindeki ziyaret ettikleri sayfaların dinamik olarak sıralandığı breadcrumb yapısıdır. Büyük sitelerde kullanıcı deneyimini olumsuz etkileyeceği için pek tercih edilen bir yöntem değildir. Sayfaya web sitesi dışından gelen kullanıcılar diğer kategorileri ziyaret etmediği için breadcrumb yapısında da göremezler.

Örnek: Anasayfa>İlk ziyaret edilen sayfa> İkinci sayfa> Üçüncü sayfa> Mevcut sayfa

SEO İçin Breadcrumb Neden Önemlidir?

Breadcrumb yapısı arama motoru botlarının tarama ve keşfetme sürecine yardımcı olur. Botlar, sayfaları bağlantılar aracılığıyla taradığı için her bir breadcrumb aslında botlar için keşfedilecek yeni bir sayfa anlamına gelir. Breadcrumb yapısında belirtilen bağlantılar sayesinde site içi link yapısı güç kazanır. Böylece arama motorlarının site hiyerarşisini daha iyi anlaması sağlanır.

Google, sonuç sayfalarında  kullanıcılara site içeriği hakkında daha iyi fikir verebilmek için, siteye ait breadcrumb yapısını da göstermektedir. Böylece SERP’de sayfa içeriği hakkında daha fazla bilgi vermeyi mümkün kılar.

Breadcrumb yapısı kullanıcıların site içerisine gezinmesini kolaylaştırarak sitede geçirilen süreyi artırır. Kullanıcının site içerisinde kaybolmasını önleyeceği için bounce rate yani hemen çıkma oranının düşmesine olanak sağlar.

Kullanıcı Deneyimi İçin Breadcrumb Neden Önemli?

SEO için önemli olduğu kadar kullanıcı deneyimi için de önemli olan breadcrumb kullanıcılara farklı avantajlar sunduğu için tercih edilmektedir. Bu avantajlardan bazıları şunlardır:

• Az yer kaplar, kullanıcıları rahatsız etmez
• Hızlı gezinmeyi ve bir üst kategoriye gitmeyi kolaylaştırır
• Basit bir yapısı olduğu için kullanımı kolaydır, kullanıcı gitmek istediği sayfaya tıklar ve gider
• Web sitesini tanımayan, ilk defa gelen kullanıcıların site yapısını anlamasını ve kolayca keşif yapmasını sağlar.

Breadcrumb Nasıl Olmalı?

Breadcrumb yapısının kullanıcılar tarafından fark edilmesi ve tıklanabilir olması önemlidir. Bu yüzden tasarımı ve konumu hakkında dikkat edilmesi gereken bazı unsurlar vardır.

Breadcrumb Boyutu

Boyut için genel kabul görmüş bir kural olmasa da breadcrumb boyutunun sayfa içerisinde kolay fark edilecek, ancak tüm dikkatleri üzerine çekmeyecek şekilde tasarlanması önerilmektedir.

Breadcrumb Konumu

Breadcrumb kullanıcıların kolayca fark edebileceği bir yerde olmalıdır. Genellikle sayfanın sol üst köşesinde veya ana kategorilerin yer aldığı navbar’ın altında olacak şekilde konumlandırılır. Böylece kullanıcıların kolayca görebilmesi ve kullanabilmesi hedeflenir.

Hiyerarşi & Tutarlılık

Web sitesinde breadcrumb yapısı kullanılmaya karar verildiyse tüm sayfa tiplerine eklenmesi en iyi uygulama olacaktır. Böylece kullanıcıların kafalarının karışması önlenecek ve tutarlılık sağlanacaktır. Ayrıca breadcrumb hiyerarşisi her zaman anasayfadan ilgili sayfanın bağlı olduğu kategorilere doğru ilerleyecek şekilde tasarlanmalıdır.

Son Sayfanın Tıklanabilir Olmamalı

Breadcrumb içindeki son sayfanın yani kullanıcıların görüntülediği sayfanın tıklanabilir olmasının bir anlamı yoktur. Bu yüzden son sayfa tıklanabilir olmayacak şekilde ayarlanmalıdır. Son sayfa için farklı bir font, belirgin bir punto kullanılması kullanıcı için hangi sayfada bulunduğunu anlamayı kolaylaştıracaktır.

Ayraç Seçimi

Breadcrumb kullanılırken sayfalar ve kategoriler arasında ayraç kullanılmalıdır. Çoğu zaman > ve / ayraçları tercih edilse de bu seçim tasarım tercihine göre değişebilir. Burada önemli olan çok dikkat çekici tasarımlar kullanarak kullanıcıları birincil navigasyon sisteminden ve sayfanın ana içeriğinden uzaklaştırmamaktır.

Breadcrumb yapısında tercih edilebilecek ayraç türleri:

• Büyüktür işareti (Anasayfa > Kategori > Ürün)
• Eğik çizgi (Anasayfa / Blog / İçerik Adı)
• Tire (Anasayfa – Hizmetler – SEO)

Anchor Text Seçimi

Anchor text yani bağlantı metni anahtar kelime içermelidir. Böylece kullanıcı ve arama motorlarının sayfa içeriğini anlaması kolaylaşır. Kullanıcıların gezinirken hangi sayfayla karşılaşacağını anlamalarına da yardımcı olur. Böylece bounce rate düşmesine de katkıda bulunur.

Google ve Breadcrumb İlişkisi

Google, yönergelerine uygun bir şekilde yapılandırılmış veri ile sayfaya eklenen breadcrumb yapısını arama sonuçlarında da kullanıcılara göstermektedir. Böylece kullanıcılar sadece sayfa URL'sini değil, breadcrumb yapısındaki anahtar kelimeleri de görebilmektedir. Bu sayede kullanıcılara sayfa hakkında verilen bilginin artması hedeflenir.

Breadcrumb yapısının arama sonuçlarında da görünür olmasını sağlamak için sayfaya Schema ile yapılandırılmış veri eklenmesi gerekmektedir. Yapılandırılmış veri eklemek için üç çeşit yol vardır; mikro veriler, RDFa ve JSON-LD. Google bu üç yöntem arasından JSON-LD kullanımını öneriyor.

JSON-LD kullanarak Schema ile yapılandırılmış veri işaretlemesi yapmak için sayfaya aşağıdaki gibi bir kod eklenmesi gerekir.

Burada yer alan “itemListElement” listedeki öğeleri barındıran kapsayıcı bir öğedir. “ListItem” belirtilen öğeye ait detayları barındırır. Burada belirtilen detaylarda “Position” breadcrumb yapısındaki bağlantının sıra numarasını yani pozisyonunu ifade eder. “name” Bağlantı metni yani anchor text için kullanılacak metini belirtmeye yarar. Son olarak “item” değeri ise bağlantı verilecek sayfaya ait URL’in eklendiği alandır.

Schema Markup Validator aracını kullanarak sayfada yer alan breadcrumb ve diğer yapılandırılmış verilerle alakalı bilgileri görmek, geçersiz olan yapılandırılmış verilerdeki değerleri kontrol etmek mümkündür.