Breadcrumb Nedir?

X-Code

Uzman üye
19 Mar 2019
1,855
335
Localhost

jyo2qm.png

Merhaba TürkHackTeam Üyeleri.
Bu Konumda Sizlere Breadcrumb'ın Ne Olduğunu Anlatacağım.


dWHR1f.gif



Konu İçeriği

Breadcrumb Nedir?

Breadcrumb Kullanmadan Önce Dikkat Edilmesi Gerekenler

Breadcrumb Nasıl Kullanılır?



PN002A.png



Breadcrumb Nedir?

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.


ScgdBY.png


jQG9Gn.gif



Breadcrumb Kullanmadan Önce Dikkat Edilmesi Gerekenler


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.

5Dkk4L.gif


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.

5Dkk4L.gif


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.

SchPF0.gif


jQG9Gn.gif



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 buraya 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ı:



Kod:
[FONT="Courier New"][COLOR="white"]<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>

<**** 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>

<**** 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>

<**** itemprop="position" content="3" />

</li>

</ol>[/COLOR][/FONT]


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.

ScgASq.png



rNH656.png

//Alıntıdır

Okuduğunuz İçin Teşekkür Ederim.
Esenlikle Kalın..

Saygılarımla:Smiley1021:


SooBqe.png

 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.