Skip to content Skip to sidebar Skip to footer

Breadcrumb Nedir?

Breadcrumb, internet sitelerinin kullanıcı deneyimini geliştirmek ve gezinmeyi kolaylaştırmak amacıyla kullanılan bir web tasarım terimidir. Bu terim, kullanıcının ziyaret ettiği sayfalardan başlangıç sayfasına veya ana sayfaya geri dönmesini sağlayan bir bağlantıdır. Böylelikle kullanıcılar, site içinde gezinirken konumlarını takip edebilir ve istedikleri sayfaya geri dönebilirler.

Breadcrumb Kökeni

Breadcrumb (ekmek kırıntısı), Hansel ve Gratel masalından esinlenilerek web sitelerinde kullanılan bir gezinme aracına verilen isimdir. Bu terim, kullanıcılara bir web sitesi içindeki konumlarını göstererek ve daha önce gezindikleri sayfalara hızlıca dönüş imkanı sağlayarak gezinme deneyimini kolaylaştırır.

Hansel ve Gratel masalındaki sahne, ormanlık alanda kaybolan iki kardeşi temsil eder. Hansel, yollarını bulmak için yanına ekmek kırıntıları alır ve bu kırıntıları sererek geçtikleri yolu işaretler. Benzer şekilde, web sitelerinde breadcrumb, kullanıcının bulunduğu sayfanın site içindeki yerini belirtir. Böylece kullanıcılar, gezdikleri sitenin hiyerarşisini ve nerede olduklarını daha iyi anlayarak kaybolma hissinden kurtulurlar.

Bu gezinme aracı, özellikle büyük ve karmaşık web sitelerinde kullanıcı deneyimini artırmak için önemli bir rol oynar. Kullanıcılar, breadcrumb sayesinde site içinde gezinirken daha kolay bir şekilde hedef sayfalara ulaşabilirler. Örneğin, bir e-ticaret sitesinde bir ürün sayfasındayken breadcrumb, kullanıcının kategorilere geri dönmesine veya daha önceki bir arama sonucuna hızlıca ulaşmasına yardımcı olur.

Breadcrumb Türleri

Breadcrumb, bir web sitesindeki gezinme yapısını gösteren ve kullanıcıların bulundukları konumu anlamalarına yardımcı olan önemli bir navigasyon öğesidir. Breadcrumb, genellikle sayfanın üst kısmında yer alır ve site içindeki tıklama yollarını yansıtır. Bu nedenle, breadcrumblar, site sahipleri tarafından özelleştirilebilir ve sitenin yapısına uygun olarak tasarlanabilir. Breadcrumb’ın farklı türleri ve yapıları mevcuttur ve yaygın olarak kullanılan üç tip breadcrumb türü şunlardır:

Hiyerarşi Odaklı Breadcrumb

Hiyerarşi odaklı breadcrumb, günümüzde web sitelerinde yaygın olarak kullanılan ve SEO dostu bir yapıdır. SEO uzmanları tarafından birçok web sitesi için önerilen bu yapı, kullanıcıların site içerisindeki konumlarını ve gezdikleri sayfaların site içindeki yol ve hiyerarşisini net bir şekilde göstermeyi amaçlar.

Bir örnek üzerinden açıklamak gerekirse: “Anasayfa > Elektronik > Kulaklıklar > Apple Kulaklıklar > Apple Airpods Pro.”

Yukarıdaki örnekte, kullanıcı anasayfadan başlayarak adım adım takip edebileceği bir yol gösterilmektedir. Kullanıcılar, breadcrumb’ı kullanarak herhangi bir adıma kolayca geri dönebilir ve istedikleri sayfaya hızlıca ulaşabilirler.

Bu yapı, web sitelerinde gezinmeyi kolaylaştırmakla kalmaz, aynı zamanda SEO açısından da avantaj sağlar. Arama motorları, breadcrumb’ları sayfanın içeriğini ve yapısını anlamak için kullanır ve bu da sitenin daha iyi indekslenmesine ve kullanıcıların arama sonuçlarında doğru sayfalara yönlendirilmesine yardımcı olur.

Özellik ve Etiket Odaklı Breadcrumb (Ekmek Kırıntısı)

Özellik ve etiket odaklı breadcrumb yapıları, özellikle e-ticaret sitelerinde arama yapan kullanıcıların kolayca takip edebilmelerini sağlamak için kullanılan bir yönlendirme sistemidir. Bu yapılar, sayfalar arasındaki hiyerarşik bağlantıları göstermenin yanı sıra, ziyaret edilen ürün veya sayfa ile ilgili ek özellikleri ve etiketleri kullanıcılara sunar.

Örnek olarak, bir kullanıcının bir e-ticaret sitesinde “Kadın” kategorisindeki “Tişört”leri filtreleyerek “Small” bedeninde ve “Yeşil” renkteki tişörtleri seçtiğini düşünelim. Bu özellik ve etiket odaklı breadcrumb yapısında, kullanıcıya şu şekilde bir yönlendirme sunulacaktır:

Anasayfa > Kadın > Tişört > Small > Yeşil Tişörtler

Bu sayede kullanıcılar, filtreleme işlemlerinin sonucunda ulaştıkları sayfada bulunan özellikleri ve etiketleri kolayca görebilir ve istedikleri kategorideki ürünlere hızlı bir şekilde ulaşabilirler.

Genellikle web sitelerindeki sidebarlarda bulunan filtreleme özellikleri, özellik ve etiket tabanlı breadcrumb yapısı kullanan sitelerde gezinme kolaylığı sağlar. Kullanıcılar, istedikleri özellikleri ve etiketleri seçtikçe breadcrumb üzerinde bu tercihler görüntülenir ve kullanıcılara hangi adımları izlediklerini net bir şekilde gösterir. Bu da kullanıcı deneyimini artırır ve alışveriş sürecini daha keyifli ve etkili hale getirir.

Gezinme geçmişi odaklı breadcrumblar, adından da anlaşılacağı gibi kullanıcıların bir web sitesini gezinirken gerçekleştirdikleri tıklama yoluyla oluşan link yapılarıdır. Bu yapılar, internet gezinme geçmişiyle benzer işlevi görerek kullanıcılara gezdikleri sayfaları takip etme imkanı sağlar.

Örneğin, kullanıcı bir web sitesinde “Anasayfa”ya girdikten sonra “Bir Önceki Sayfa”ya, ardından “Bir Önceki Sayfa”dan “Bir Önceki Sayfa”ya ve en sonunda “Mevcut Sayfa”ya tıklarsa, breadcrumblar aşağıdaki gibi görüntülenecektir:

Anasayfa > Bir Önceki Sayfa > Bir Önceki Sayfa > Bir Önceki Sayfa > Mevcut Sayfa

Ya da başka bir örnek olarak:

Anasayfa (A) > E > F > C > D > B

Ancak, çok sayıda alt kategori ve tıklama yolu barındıran sitelerde, bu tip breadcrumblar kullanıcı deneyimini karmaşık hale getirebilir ve esneklikten yoksun olabilir. Bu nedenle, bu tür breadcrumbları planlayan sitelerin, site link derinliği ve site link mimarisi konusunda dikkatli ve titiz bir şekilde düşünmeleri gerekmektedir.

Kullanıcı deneyimini iyileştirmek için, gezinme geçmişi odaklı breadcrumbların kullanıcıların gezinmeyi daha anlaşılır ve kolay hale getirecek şekilde tasarlanması önemlidir. Aynı zamanda, sitenin yapısı ve içeriği göz önünde bulundurularak breadcrumbların kullanılacağı en uygun alanlar belirlenmelidir.

Sonuç olarak, gezinme geçmişi odaklı breadcrumblar, kullanıcıların web sitesindeki yolculuklarını takip etmelerine yardımcı olan önemli bir navigasyon aracıdır. Doğru şekilde tasarlandığında, kullanıcı deneyimini olumlu yönde etkileyerek sitenin daha kullanıcı dostu ve anlaşılır olmasını sağlar.

Seo Açısından Breadcrumb

Breadcrumb kullanımı, bir web sitesi için hem kullanıcı deneyimi (UX) hem de SEO (arama motoru optimizasyonu) açısından büyük önem taşımaktadır. Breadcrumbs, isminden de anlaşılacağı üzere ekmek kırıntılarına benzer bir yapıya sahip olup, site içindeki yol haritasını ve içerik haritasını göstermeye yönelik kullanıcı dostu yapılar olarak işlev görür. Kullanıcılara site dolaşımı konusunda yardımcı olmak amacıyla tasarlanmış olan breadcrumbs, sitenin hiyerarşik yapısını anlamak ve istenilen bir üst başlığa ya da gezinme geçmişine hızlıca dönmek için büyük kolaylık sağlar.

Breadcrumb’ların kullanımı, kullanıcı deneyimini önemli ölçüde artırmaktadır. Ziyaretçiler, sitenin hiyerarşik yapısını daha hızlı ve kolay bir şekilde kavrayarak istedikleri bilgiye ulaşabilirler. Aynı zamanda, breadcrumbs sayesinde gezinme geçmişine geri dönme olanağı da kullanıcılar için sağlanır. Bu sayede, kullanıcılar aradıkları bilgiyi bulmak için tekrar tekrar geri gitmek zorunda kalmazlar ve site içinde daha rahat bir dolaşım deneyimi yaşarlar.

Özellikle e-ticaret siteleri ve içerik açısından zengin, kategorilere ayrılmış siteler, breadcrumbs kullanımından en fazla faydayı elde eden siteler arasındadır. Bu tür sitelerde, kullanıcıların doğru ürüne veya içeriğe hızlıca ulaşması gerekmektedir. Breadcrumbs, sitenin düzgün bir link hiyerarşisine sahip olmasını sağlayarak, kullanıcılara istedikleri bilgiye ulaşma konusunda büyük bir kolaylık sunar.

Breadcrumbs’ların SEO açısından önemi de göz ardı edilemez. Arama motoru botları, breadcrumbs’ları takip ederek site içindeki yapıyı anlamak ve indekslemek konusunda yardımcı olur. Böylece, sitenin daha iyi bir şekilde indekslenmesi ve arama sonuçlarında daha üst sıralarda yer alması sağlanır. Ancak, breadcrumbs’ların etkili olabilmesi için sitenin sağlıklı ve hiyerarşik bir link yapısına sahip olması gereklidir.

Breadcrumblar Sitelere Hangi Teknik Avantajları Sağlar?

Breadcrumblar, web siteleri için teknik açıdan önemli avantajlar sunar. Başarılı breadcrumb kullanımı, pek çok başarılı web sitesinin site içi hiyerarşisinin, taranabilirliğinin, iyileştirilmiş tarama bütçesinin ve sağlıklı pagerank aktarımının temel nedenlerinden biridir.

Günümüzde büyük ve orta ölçekli her türlü web sitesinde aktif olarak kullanılan breadcrumblar, arama motoru botlarının siteleri başarılı şekilde taramasını, çözümlemesini ve anlamlandırmasını son derece etkili bir şekilde sağlar. Arama motorları, lokasyon tabanlı, hiyerarşik breadcrumb kullanılan sitelerde sayfaların site içi link derinliğini ve hiyerarşisini çok daha kolay belirleyebilirler. Bu özellik, özellikle büyük boyutlu siteler için inanılmaz bir ranking sinyali avantajı sağlar.

Breadcrumb kullanımının sağladığı teknik avantajlara daha detaylı bir şekilde değinelim:

Site İçi Hiyerarşi: Breadcrumb, kullanıcıların gezindiği sayfanın konumunu gösterir ve site içindeki hiyerarşik yapının bir haritasını sunar. Bu sayede kullanıcılar, site içinde kolayca dolaşabilir ve istedikleri içeriğe hızlı bir şekilde ulaşabilirler.

Taranabilirlik: Arama motoru botları, breadcrumb yapılarını kullanarak sayfalar arasındaki ilişkileri anlar ve sitenin hangi konseptler etrafında düzenlendiğini çözer. Bu sayede botlar, sitenin içeriğini daha iyi indeksleyebilir ve arama sonuçlarında daha doğru şekilde gösterir.

İyileştirilmiş Tarama Bütçesi: Breadcrumb, arama motorlarının sitenizi tarama bütçesini daha verimli kullanmasına yardımcı olur. Botlar, breadcrumb sayesinde önemli sayfalarınıza daha kolay ulaşabilir ve sayfa tarama süreçlerini daha etkin bir şekilde yönetebilir.

Pagerank Aktarımı: Breadcrumb, sitenizdeki sayfalar arasında iç bağlantıları sağlar ve sayfa otoritesinin (pagerank) etkili bir şekilde aktarılmasına yardımcı olur. Böylece, popüler sayfalarınızın otoritesi diğer sayfalara geçer ve sitenizin genel olarak daha iyi sıralamalara ulaşması desteklenir.

Breadcrumb Oluşturulurken Nelere Dikkat Edilmelidir?

Breadcrumb (kırmızı başlık) oluşturulurken, kullanıcı deneyimini artırmak ve kullanıcıların gezinti sürecini kolaylaştırmak için bazı önemli noktalara dikkat edilmelidir.

Breadcrumb Ayraç Seçimi

Breadcrumb ayraç seçimi, web sitelerinde kullanıcı deneyimini artırmak ve kullanıcıların sayfalar arasında gezinirken hiyerarşiyi anlamalarına yardımcı olmak için son derece önemlidir. Breadcrumb yapısı, kullanıcılara gezdikleri sayfanın konumunu ve site içindeki yolculuklarını göstererek kullanıcıların kaybolma riskini azaltır ve gezinmeyi kolaylaştırır.

Günümüzde web sitelerinin çoğunda ve Google’da en yaygın olarak kullanılan ayraç biçimi “>” işaretidir. Bu ayraç, breadcrumbların site içi hiyerarşileri ve tıklama yollarını aktarmaları açısından en uygun ve anlaşılır işaret olarak kabul edilir. “> ” işareti, breadcrumb’ın amacını en iyi şekilde yansıtır ve kullanıcıların sayfalar arasındaki ilişkiyi hızlıca anlamalarına yardımcı olur.

Tabii ki, tasarımsal (UI) kaygılar da göz önünde bulundurulmalıdır ve özgün bir breadcrumbla tasarımı düşünülüyorsa, “-“,”&”,”/”,”*” gibi ifadeler de kullanılabilir. Ancak, kullanıcıların üstteki sayfa gezinme deneyimi ve breadcrumb’ın amacı unutulmamalıdır. Kullanıcının rahatlıkla yapıyı algılayabileceği ve gezinmeyi kolaylaştıran işaretler, breadcrumb ayracı olarak seçilmelidir.

Breadcrumb Sayfa Üst Boyutu

Breadcrumbların sayfa üzerindeki boyutu, kullanıcı deneyimini olumsuz etkilememek ve sitenin temasına uygun bir görüntü sunmak için önemlidir. Breadcrumblar, sayfalara eklenen önemli elementlerdir ve site yapısını destekleyerek kullanıcıların gezinme süreçlerini kolaylaştırır. Ancak, bu yapıların boyutları, sayfa akışına uygun ve göze hoş görünen şekilde tasarlanmalıdır.

Breadcrumbların boyutu, gereğinden büyük ya da küçük olmamalıdır. Eğer breadcrumb yapıları çok büyük olursa, kullanıcıların sayfa içeriğini görüntülemesini zorlaştırabilir ve sayfayı yorucu hale getirebilir. Aynı şekilde, çok küçük breadcrumb yapıları da kullanıcıların bunları fark etmesini güçleştirebilir ve gezinme deneyimini olumsuz etkileyebilir.

Bu nedenle, breadcrumb yapıları, sitenin temasına uygun olarak tasarlanmalı ve sayfanın üst kısmında uygun bir konumlandırma ile sunulmalıdır. Kullanıcıların rahatlıkla görüntüleyebileceği, dikkat dağıtmayan ve aşırı abartılı olmayan boyutlarda olmalıdır. Böylece, kullanıcılar sitenin hiyerarşisini anlamak ve gezinmeyi kolaylaştırmak için breadcrumbları kullanabilirler.

Breadcrumbların Konumu

Makale içerisinde değindiğimiz gibi, breadcrumbların sayfa üzerindeki en yaygın kullanım konumu, sayfanın sol üst bölümüdür. Bu konum, kullanıcıların sayfaya ilk girişte kolaylıkla görüntüleyebilmelerini sağlar ve dünya genelindeki kullanıcıların okuma dikkat ağırlığının özellikle sol tarafta olması sebebiyle tercih edilir.

Breadcrumblar, websitenizin UI (Kullanıcı Arayüzü) yapısı göz önüne alınarak, sayfanın üst orta bölümünde de sıkça kullanılmaktadır. Bu kullanım, kullanıcıların sayfa içeriklerine daha hızlı bir şekilde ulaşmalarına yardımcı olur ve kullanıcı deneyimini olumlu yönde etkiler.

Websitenizde, kullanıcıların daha kolay şekilde erişebileceği ve olumlu bir sayfa üstü deneyim yaşayabileceği herhangi bir alana breadcrumblarınızı ekleyebilirsiniz. Bu noktada, sadece kullanıcılar değil, aynı zamanda arama motoru botlarının da sayfa üzerinde breadcrumb yapınızı keşfedebilmesi ve ilgili yapıda yer alan linkleri takip edebilmesi için sayfalarınızın üst bölümlerini kullanmanız son derece önemlidir.

Site İçi Link Mimarisi Önemi

Site içi link mimarisi, breadcrumb yapısını aktif hale getirmeden önce dikkatle düşünülmesi gereken önemli bir unsurdur. Sağlıklı, hiyerarşik ve anlamlı bir link yapısı oluşturmak, kullanıcılar ve arama motorları için oldukça önemlidir.

Özellikle çok sayıda sayfa ve farklı kategori altında bulunan içeriklerin olduğu bir sitede, breadcrumb yapılarının doğru şekilde kurgulanması gerekmektedir. Aksi takdirde, kullanıcılar ve arama motorları içerikleri anlamakta zorlanabilir ve site performansı olumsuz etkilenebilir.

Bu nedenle, site yöneticileri site kategori dağılımını düzenlerken titizlikle hareket etmelidir. Her ürün, kategori ve alt kategori sayfası hiyerarşik bir düzende planlanmalıdır. Bu sayede, içerikler arasındaki ilişkiler netleştirilir ve kullanıcılar içerikleri kolayca takip edebilir.

Ayrıca, linklerin anlamlı ve açıklayıcı olması da önemlidir. Kullanıcıların içeriklere hızlı ve doğru bir şekilde ulaşabilmesi için linklerin içerdikleri sayfanın konusunu açık bir şekilde ifade etmesi gerekir.

Unutulmamalıdır ki, iyi kurgulanmış bir site içi link mimarisi, SEO açısından da önemlidir. Arama motorları, sayfalar arasındaki ilişkileri daha kolay anlayarak içerikleri indeksleme ve sıralama süreçlerini daha etkili hale getirebilir.

Breadcrumb Nasıl Eklenir? Nasıl Oluşturulur?

Birçok yöntemle Breadcrumb eklenebilir ve oluşturulabilir. Bu yöntemler aşağıdaki başlıklarda açıklanmıştır.

Eklentiler ve İçerik Yönetim Sistemleri

WordPress gibi içerik yönetim sistemlerinde sitenizin kullanıcı deneyimini artırmak ve SEO süreçlerini kolaylaştırmak için harici eklentiler kullanabilirsiniz. Örneğin, Yoast SEO gibi eklentilerle sitenizin SEO performansını izleyebilir ve breadcrumb yapısını sitenize kolayca ekleyebilirsiniz.

Ancak, bazı içerik yönetim sistemleri alt yapılarında breadcrumb yapıları otomatik olarak aktif ve kullanılabilir durumdadır. Bu durum, tercih ettiğiniz içerik yönetim sistemine göre değişiklik gösterir. Örneğin, Shopify gibi içerik yönetim sistemlerinde, kolayca aktif edilebilir alt yapı destekli breadcrumb özelliği mevcuttur.

PHP & Javascript

Breadcrumb yapısı, kullanıcıların sitenizde gezinirken konumlarını takip etmelerine yardımcı olan bir navigasyon özelliğidir. Bu özellik, sitenizdeki kategorileri ve alt sayfaları hiyerarşik bir yapıda göstererek kullanıcıların daha kolay ve hızlı bir şekilde istedikleri içeriğe ulaşmasını sağlar.

Web site yöneticileri, eklentilere ve içerik yönetim sistemlerinin sağladığı özelliklere alternatif olarak, kendi kodlama bilgilerini kullanarak özelleştirilmiş breadcrumb yapıları oluşturabilirler. Bu özelleştirme işlemi için PHP veya JavaScript gibi programlama dillerini tercih edebilirler.

Örneğin, WordPress gibi alt yapılar kullanıyorsanız, harici olarak PHP fonksiyonları kullanarak sayfalara breadcrumb eklemek mümkündür. Bu şekilde, sitenizin hiyerarşik yapısını ziyaretçilere daha açık bir şekilde sunabilirsiniz.

HTML / CSS ile Breadcrumb Ekleme

HTML ve CSS kullanarak sayfalara breadcrumb eklemek oldukça kolay ve etkili bir yöntemdir. Breadcrumb, kullanıcıların mevcut sayfanın hiyerarşik konumunu anlamalarına yardımcı olan bir gezinme aracıdır. Bu sayede kullanıcılar, site içindeki konumlarını takip edebilir ve geriye dönüp daha üst düzey sayfalara ulaşabilirler.

Yorum Yap