Ekmek Kırıntısı Nasıl Yapılır? Ekmek Kırıntısı Nedir?

Ekmek Kırıntısı Nedir? Breadcrumb Nasıl Yapılır?

Breadcrumb, ekmek kırıntısı veya sayfa yolu işaretçisi olarak adlandırılır. Breadcrumb yapıları web siteleri için her geçen gün büyük önem taşımaktadır. Breadcrumb kategorisi kullanıcı deneyimini arttırabilir ve site içerisindeki navigasyon oranlarını olumlu yönde etkileyebilir.

Arama sonuçlarında sıralama rekabetinin artması breadcrumb kullanımının önemini arttırmaktadır, bu nedenle breadcrumb nedir ve breadcrumb nasıl yapılır yazısını sizler için hazırladık.

Breadcrumb Nedir?

Breadcrumb ekmek kırıntısı anlamına gelmektedir. Arama motoru optimizasyonu ve kullanıcı deneyimi açısından web siteleri için önemlidir. Sitenizde sayfalar ve kategoriler arasında gezinen ziyaretçilere rehberlik ederek ziyaretçinin hangi sayfadan hangi sayfaya geçtiğini gösterir.

Serp Sonuçlarında Breadcrumb Örneği

Jakob Nielsen, 1995 yılında web sitesinde ve işletim sistemlerinde breacrumb yapısını kullanmayı önerdiğini söylüyor. Çünkü breadcrumbs yapıları kullanıcılar web sitesinde gezinirken sorun ve kafa karışıklığı yaratmıyor.

Breaccrumb yapısını kullanan web sitelerinin trafiği %30 oranında arttırdığı ve site içi sirkülasyonu arttırdığı gözlemlenmiştir. Sitede çok az yer kaplaması ve SEO için çok önemli bir kriter olması nedeniyle her web sitesi sahibinin kullanması gerektiğini savunuyoruz.

Breadcrumb hem kullanıcı deneyimini arttırır hem de googlebotlara yönlendirme sağlar. Breadcrumb yapısı googlebotların siteyi tararken belli bir hiyerarşik yapıda nerede olduklarını takip ederek taramalarını kolaylaştırır.

Breadcrumb Nasıl Yapılır?

Breadcrumb’ın nasılyapılacağı konusunda internette birçok yalan ve yanlış bilgi bulunmaktadır. Eğer wordpress tabanlı bir siteniz varsa breadcrumb yapısını kullanmak için yapmanız gereken şey sitenize birkaç eklenti kurmaktır.

Breadcrumb yapısı için wordpress tabanlı sitenize kurmanız gereken eklentiler rankmath, yoast seo ve schema.org popüler eklentileridir.

Breadcrumb parantezleri birçok farklı şekilde kullanılmaktadır. En yaygın kullanılan breadcrumb parantezi “>” dir.

Kısa çizgi
Nokta
Slash ve
Büyüklük işareti

E-ticaret Siteleri için Breadcrumb Kodları

Breadcrumb Kod Yapısı:

<ol itemscope itemtype="https://schema.org/BreadcrumbList">

<li itemprop="itemListElement" itemscope

itemtype="https://schema.org/ListItem">

<a itemprop="item" href="https://orneksite.com">

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

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

</li>

<li itemprop="itemListElement" itemscope

itemtype="https://schema.org/ListItem">

<a itemprop="item" href=" https://orneksite.com/yemek-tarifleri">

<span itemprop="name">Yemek Tarifleri</span></a>

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

</li>

<li itemprop="itemListElement" itemscope

itemtype="https://schema.org/ListItem">

<a itemprop="item" href=" https://orneksite.com/sağlikli-yemek-tarifleri">

<span itemprop="name">Sağlıklı Yemek Tarifleri</span></a>

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

</li>

</ol>

Üst kısımda yer alan breadcrumb kodlamasını doğru uyguladığınız takdirde siteniz google’da uygun bir yapıda görünecektir.

Breadcrumb Yapısının Faydaları

Siteniz içinde gezinen ziyaretçilerin bir önceki sayfaya dönmesini sağlar.
Ziyaretçilerin sitenizin kategori ve sayfa bölümleri arasında gezinmesini kolaylaştırır.
Breadcrumb yapısı doğru tasarıma sahipse kullanıcı deneyimi için faydalıdır.
Breadcrumb yapısı iç link inşası için önemli bir faktördür.
Ziyaretçilerin site içerisinde doğru iç bağlantı ile gezinmesini sağlar.
Googlebot’ların siteyi tararken sitenin yapısını anlamasına yardımcı olur.
Breadcrumbg yapısı ile chema entegrasyonu kullanılarak arama botlarının link yapısı hakkında bilgi sahibi olmasını sağlar.
Arama motoru optimizasyonu açısından faydalıdır.

Breadcrumb Çeşitleri Nelerdir?

Breadcrumb nedir ve breadcrumb nasıl yapılır diye aramalar yapıldığında gözden kaçan bir şey vardır. Breadcrumb türleri sitenize göre kullanacağınız yapıyı belirler.

1. Konum Breadcrumb – Konumsal Breadcrumb

Breadcrumb, türleri arasında en sık kullanılan yapıdır. Konum kırıntısı, sitenizdeki ziyaretçilerin site içindeki kategoriler ve sayfalar arasında gezinmesini kolaylaştırır. Sitenizde gezinen ziyaretçi bir önceki sayfaya geri dönmek istediğinde bunu kolaylıkla yapabilir. Ziyaretçi kategori veya sayfanın hiyerarşik yapısını daha iyi anlayabilir.

2. Öznitelik Breadcrumb

Nitelikli breadcrumb yapısında sayfaların adlarından çok nitelikleri kullanılır. Bu yapıda önemli olan sayfanın konumu değil, sayfanın sahip olduğu özelliktir. Attribute breadcrumb yapısı genellikle e-ticaret sitelerinde filtre görevi gören arama bölümlerinde kullanılır.

3. Yama Breadcrumb – Dinamik Yapı

Patch breadcrumb, tanımı gereği ekmek kırıntısıdır. Ziyaretçinin bir sayfadan diğerine geçerken tıkladığı bağlantıların konumunu belirler. Ziyaret ettiği sayfalar bir yol haritası şeklinde breadcrumb menüde yer alır.

Breacrumb Nedir? Breadcrumb Örneği

Yama breadcrumb yapısını kullanırken bazı sorunlarla karşılaşabilirsiniz, bunların arasında duplicate page sorunu oluşabilir. Bir sayfaya birden fazla farklı şekilde erişilebileceği herkes tarafından bilinen bir gerçektir, bu nedenle canonical ve unique url yapısı kullanmaya özen gösterin.

Breadcrumb Yapısında Dikkat Edilmesi Gerekenler

Ekmek kırıntısı yapısını kullanmadan önce göz önünde bulundurmanız gereken birkaç husus vardır. Breadcrumb yapıları birden fazla farklı yapıda bulunur ve farklı amaçlar için kullanılır, sitenizin uygun olup olmadığına karar vermenizi gerektirir.

Breadcrumb Ayraç Seçimi

Breadcrumb parantezleri genellikle “>” olarak kullanılır. Yaygın olarak kullanılan bu sınırlayıcı dışında başka sınırlayıcılar da vardır.

Kısa çizgi
Nokta
Slash ve
Büyüklük işareti

Breadcrumb Konumu

Ekmek kırıntısı konumunun, kullanıcıları siteyi ziyaret ettiklerinde veya site içerisinde gezindiklerinde rahatsız etmeyecek bir konumda olması önemlidir.

Breadcrumb yapısının konumu genellikle kategori başlığının altında soldan sağa doğru uzanan bir yapıdadır. Kullanıcının hangi sayfada olduğunu ve hangi sayfaları ziyaret ettiğini anlaması ve geri dönmesi kolaylaşır.

Breadcrumb WordPress Eklentileri

WordPress tabanlı web sitesi sahipleri breadcrumb nasıl yapılır diye arama yaptıklarında karşılarına bir sürü karmaşık eklenti çıkmaktadır.

Bu eklentilere bakarak aşağıda hazırladığımız wordpress breadcrumb eklentilerini kullanarak breadcrumb nasıl yapılır sorusunu ortadan kaldırmış olacaksınız.

Rankh Matematik Seo
Yoast Seo
Schema.Org
Ekmek kırıntısı

Html Breadcrumb, Breadcrumb Css ve Bootstrap Breadcrumb Kodları

WordPress tabanlı web siteleri için breadcrumb yapısını kullanmak birkaç eklenti ile çözülebilir. Fakat özel tasarımlara sahip siteler için breadcrumb yapısı kodlardan oluşmaktadır. Aşağıdaki kodlar html breadcrumb kodları ve css breadcrumb kodlarıdır.

HTML Breadcrumb Kodları

Breadcrumb html kodlarını web sitenizin html dosyası içerisine ekleyerek breadcrumb yapısını sitenizde kullanabilirsiniz.

<ul class="breadcrumb">
<li><a href="#">Ürünler</a></li>
<li><a href="#">Teknoloji</a></li>
<li><a href="#">Bilgisayar</a></li>
<li>Acer</li>
</ul>

Breadcrumb CSS Kodları

Web sitenizin css dosyasına bread crumb css kodlarını ekleyerek breadcrumb yapısını sitenizde kullanabilirsiniz.

ul.breadcrumb {
    padding: 10px 16px;

    list-style: none;

    background-color: #eee;
}
ul.breadcrumb li {

    display: inline;

    font-size: 20px;

    color: currentColor;
}
ul.breadcrumb li + li:before {
    padding: 8px;

    color: cornflowerblue;

    content: "/0a0";
}
ul.breadcrumb li a {

    color: cornflowerblue;

    text-decoration: none;
}
ul.breadcrumb li a:hover {

    color: #01447e;

    text-decoration: underline;
}

Breadcrumb Bootstrap Kodları

Breacrumb bootstrap kodları. Aşağıdaki breadcrumb bootstarp kodlarını kullanarak web sitenizde breadcrumb yapısı oluşturabilirsiniz.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

BONUS: YOAST SEO BREADCRUMB NASIL YAPILIR?

Breadcrumb nasıl yapılır? Buraya kadar breadcrumb nedir yazımızı okuduysanız yoast seo tarafından hazırlanan breadcrumb nasıl yapılır videosunu yazımıza ekledik. Breadcrumb nedir diye soruyorsanız yoast seo tarafından hazırlanan video size yardımcı olacaktır.

İlginizi çekebilir WordPress Hızlı İndeksleme Teknikleri

Kaynaklar

Ekmek kırıntısı nasıl yapılır ve ekmek kırıntısı nedir konulu yazımızda kullandığımız kaynaklar aşağıda verilmiştir.

Kitaplar

Sorularla Seo – Kaan Gülten
Uzmanından Seo – Kaan Gülten
Stratejik Seo – Enver Çakır
Kültür Üniversitesi – Bilgisayar Mühendisliği Ders Notları
İstanbul Üniversitesi – Yönetim Bilişim Sistemleri Ders Notları