Breadcrumb, Türkçe adıyla “sayfa işaretleri yolu”, kullanıcıların ve arama motoru botlarının sitemizde yer alan hiyerarşiyi anlamasına ve bu yapı çerçevesinde hareket etmesine yardımcı olan bağlantılar kümesine verilen isimdir. Alt kategorilerden oluşan bir sitenin daha hızlı gezilebilmesini sağlayan bir sistemdir.

Breadcrumb yani Türkçe adıyla Ekmek Kırıntısı kullanıcıların internet sitenizin hangi sayfasında olduğunu ve bu sayfanın sitenizin hiyerarşik düzeninin neresinde olduğunu gösteren bir yönlendirme navigasyonudur. Genellikle sitenizin üst kısmında yatay şekilde bulunur. İsmini herkesin bildiği “Hansel ile Gratel” adlı masalda iki kardeşin eve geri dönüş yolunu bulabilmek için yola ekmek kırıntıları bırakmasından alır.

Breadcrumb, birçok sayfaya sahip internet sitelerinde (E-Ticaret, Blog vs) bir önceki kategoriye dönmek, site hiyerarşisini anlamak veya baktığınız sayfa ile alakalı başka sayfaları görmek isteyen kullanıcılar ve arama motoru botları için vazgeçilmez bir öğedir. Kısaca sitenizin kullanılabilirliğini büyük ölçüde arttırır ve arama motorları tarafından sevilir.

Kullanıcı deneyimi açısından baktığımızda da sayfalarınız arasında rahat dolaşılabilmesi kullanıcıların sitenizde daha fazla kalmasını sağlayacaktır. Her SEO uzmanı tarafından bilinen bir şey varsa o da kullanıcılar gözetilerek yapılan her iyileştirme Google tarafından da sevilir. Günümüzde internet trafiğinin yarısından fazlasının mobilden sağlandığını düşündüğünüzde bu yapının kullanımı arama sonuçlarında çıkan sayfalarınızın link kısmını aşağıdaki gibi daha dikkat çekici kılar.

 

Breadcrumb kullanmaya başlamadan önce dikkat edilmesi gereken hususlar nelerdir?

Öncelikle breadcrumb kullanmaya başlamadan önce almanız gereken 3 karar var. Bunlara beraber bakalım;

Breadcrumb Ayracı Seçimi

Breadcrumb ayracı olarak neyi kullanacağınıza karar vermeniz gerekmektedir. Genellikle sayfalar arasındaki hiyerarşiyi belirtmek için ( > ) büyüktür işareti ile ayrım kullanılır. Fakat sizin tasarımınıza uygun değilse tire, nokta veya eğik çizgi kullanabilirsiniz.

Aşağıda klasik kullanımlarında dışında olan birkaç kullanım örnek olarak gösterilmiştir.

www.seohocasi.com

seohocasi breadcrumb

www.webtures.com.tr

webtures breadcrumb

Breadcrumb Büyüklüğü

Breadcrumb büyüklüğü de kullanıcılarınızın gözüne batmayacak fakat istediklerinde görebilecekleri boyutta olmalıdır. Biz genellikle sitelerin menü boyutuyla aynı boyutta veya onlardan biraz küçük bir şekilde düzenlenmesi gerektiğini düşünüyoruz.

Örnek olarak www.webtures.com.tr

webtures breadcrumb yerleşim

Breadcrumb Konumu

Breadcrumb etiketlerinin sayfanızdaki konumu menünün hemen altında sola yatık bir şekilde veya ortada olmalıdır. Sağ kısımda olan kullanım ise ancak sitenizin tasarımı sizi bu şekilde kullanmaya mecbur bıraktığında kullanılmalıdır.

Örnek olarak www.seohocasi.com

seohocasi breadcrumb görünüm

 

Breadcrumb nasıl kullanılır?

Breadcrumb, Google’ın ve birçok arama motorunun standart olarak kabul ettiği Schema.org etiketlemeleriyle yapılmalıdır.  Eğer WordPress gibi bir hazır sistem kullanıyorsanız Yoast benzeri SEO eklentileri kurarak bu özelliği etkinleştirebilirsiniz. Fakat kendinize özel bir yazılımınız varsa ve bu yapıyı sonradan kazandırıyor veya düzenliyorsanız kullanmanız gereken etiket standartlarına http://schema.org/BreadcrumbList tıklayarak ulaşabilirsiniz.  Örnek olarak sizin için bir E-Ticaret sitesi için kullanım nasıl olmalıdır ona bakacağız.

Örnek kodlama yapısı:

<ol itemscope itemtype=”http://schema.org/BreadcrumbList”>

<li itemprop=”itemListElement” itemscope

itemtype=”http://schema.org/ListItem”>

<a itemprop=”item” href=”http://siteadi.com“>

<span itemprop=”name”>Ana Sayfa</span></a>

<meta itemprop=”position” content=”1” />

</li>

<li itemprop=”itemListElement” itemscope

itemtype=”http://schema.org/ListItem”>

<a itemprop=”item” href=” http://siteadi.com/pasta-kaliplari“>

<span itemprop=”name”>Pasta Kalıpları</span></a>

<meta itemprop=”position” content=”2” />

</li>

<li itemprop=”itemListElement” itemscope

itemtype=”http://schema.org/ListItem”>

<a itemprop=”item” href=” http://siteadi.com/kalpli-pasta-kalibi“>

<span itemprop=”name”>Kalpli Pasta Kalıbı</span></a>

<meta itemprop=”position” content=”3” />

</li>

</ol>

Yukarıdaki örnektekine benzer bir yapıda breadcrumb kodlaması yaptığımızda sitemiz Google arama sonuçlarında aşağıdaki gibi gözükecektir.

örnek breadcrumb

Bir önceki yazımız olan Holistik SEO Nedir ? başlıklı makalemizde bütünsel SEO, holistic SEO ve holistik pazarlama hakkında bilgiler verilmektedir.