Breadcrumb Nedir? Breadcrumb Nasıl Yapılır?

Breadcrumb, ekmek kırıntısı veya sayfa yol işaretleyicisi olarak adlandırılmaktadır. Breadcrumb yapıları her geçen gün web siteler için büyük önem arz etmektedir. Breadcrumb kategorisi kullanıcı deneyimini arttırabileceği gibi site içerisinde ki gezinme oranlarını olumlu yönde etkilemektedir.

Arama sonuçlarında sıralama rekabetinin artması breadcrumb kullanmanın önemini oldukça arttırıyor bu yüzden sizler için breadcrumb nedir ve breadcrumb nasıl yapılır yazısını hazırladık.

Breadcrumb Nedir?

Breadcrumb, ekmek kırıntısı demektir. Arama motoru optimizasyonu ve kullanıcı deneyimi açısından web siteler için önem arz etmektedir. Sitenizde sayfalar ve kategoriler arasında dolaşan ziyaretçilere rehberlik etmek ziyaretçinin hangi sayfadan hangi sayfaya geçtiğini göstermektedir.

breadcrumb-nasil-yapilir-breadcrumb-nedir-2
Serp Sonuçlarında Breadcrumb Örneği

Jakob Nielsen 1995 yılında internet sitesi ve işletim sistemelrinde breacrumb yapısını kullanmasını tavsiye ettiğini söylüyor. Çünkü breadcrumbs yapıları kullanıcıların web sitede dolaşması sırasında sorun oluşturmaz kafa karışıklığı yaratmaz.

Breadcrumb yapısı kullanan web sitelerde %30 oranında trafik artışı ve site içi dolaşımın arttığı gözlemlenmektedir. Site içerisinde çok az yer kaplaması ve SEO için oldukça önemli bir kriter olmasından dolayı her web site sahibinin kullanması gerektiğini savunuyoruz.

Breadcrumb, hem kullanıcı deneyimini arttırır hemde googlebotlarına rehberlik etmesini sağlar. Breadcrumb yapısı googlebotları siteyi taradığı sırada belli bir hiyerarşik yapı içerisinde nerede olduklarını takip ederek taramasını kolaylaştırır.

breadcrumb-nasil-yapilir-breadcrumb-nedir-3
Bread Crumb Nedir? Windows İşletim Sisteminden Breadcrumb Örneği

Breadcrumb, kullanıcılar web sitede dolaşırken hangi sayfada ve kategoride olduklarını anlamalarına yardımcı olur.

Breadcrumb Nasıl Yapılır?

Breadcrumb nasıl yapılır diye internette pek çok yalan ve yanlış bilgi bulunmaktadır. Eğer wordpress tabanlı bir siteniz var ise breadcrumb yapısını kullanmak için yapmanız gereken bir kaç eklentiyi sitenize kurmaktır.

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

Breadcrumb ayracı pek çok farklı şekilde kullanılmaktadır. Sıklıkla kullanılan breadcrumb ayracı “>” şekildedir.

  • Tire
  • Nokta
  • Eğik çizgi ve
  • Büyüktür işareti
breadcrumb-nasil-yapilir-breadcrumb-nedir-3
Breadcrumb Nedir? Breadcrumb Nasıl Yapılır?

E-ticaret Siteleri İç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özükecektir.

Breadcrumb Yapısının Faydaları

  • Siteniz içerisinde dolaşan ziyaretçilerin bir önceki sayfaya geri dönmesini sağlar.
  • Ziyaretçilerin, sitenizin kategori ve sayfa kısımlarında dolaşımını kolaylaştırır.
  • Breadcrumb yapısı doğru tasarıma sahipse kullanıcı deneyimi açısından faydalıdır.
  • Site içi link inşaası için breadcrumb yapısı önemli bir faktördür.
  • Ziyaretçilerin site içerisindeki doğru iç linkleme ile  dolaşmasını sağlar.
  • Googlebotları siteyi tararken sitenin yapısını anlamasında yardımcı olur.
  • Breadcrumbg yapısı ile chema entegrasyonu kullanılarak arama botlarına link yapısıyla ilgili bil verilmesini sağlar.
  • Arama motoru optimizasyonu açısından faydalıdır.

Breadcrumb Çeşitleri Nelerdir?

Breadcrumb nedir ve breadcrumb nasıl yapılır ile ilgili aramalar yapıldığında gözden kaçan bir şey bulunmaktadır. Breadcrumb çeşitleri sitenize göre kullanacağınız yapıyı belirlemektedir.

1. Location Breadcrumb – Konumsal Breadcrumb

Breadcrumb çeşitleri arasında en sık kullanılan bir yapıdır. Location breadcrumb, sitenizde ki ziyaretçilerin site içerisinde kategori ve sayfalar arasında dolaşımını kolaylaştırmaktadır. Sitenizde dolaşmakta olan ziyaretçi bir önceki sayfaya geri dönmek istediğinde bunu kolaylıkla yapabilmektedir. Ziyaretçi bulunduğu kategori veya sayfanın hiyerarşik yapısını daha iyi anlayabilir.

Örnek: Anasayfa>Telefon&Aksesuarları>Cep telefonu Aksesuarları>Kılıf

breadcrumb-nasil-yapilir-breadcrumb-nedir-4
Breadcrumb Nedir? Konumsal Breadcrumb Örneği

2. Attribute Breadcrumb – Niteliksel Breadcrumb

Attribute breadcrumb yapısında ise sayfaların isimleri değil daha sıklıkla sayfaların niteliksel özellikleri kullanılmaktadır. Bu yapıda asıl önemli olan sayfanın bulunduğu konum değil sayfanın sahip olduğu özellik önemlidir. Attribute breadcrumb yapısı genellikle e-ticaret sitelerinde filtre görevi gören arama kısımlarında kullanılmaktadır.

breadcrumb-nasil-yapilir-breadcrumb-nedir-1
Breadcrumb nasıl yapılır? breadcrumb nedir?

3. Patch Breadcrumb – Dinamik Yapı

Patch breadcrumb ise tanımı gereği ekmek kırıntısıdır. Ziyaretçi bir sayfadan diğer sayfaya geçerken tıkladığı linklerin konumunu belirlemesidir. Ziyaret ettiği sayfalar breadcrumb menüsü içerisinde bir yol haritası şeklinde yer alır.

breadcrumb-nasil-yapilir-breadcrumb-nedir-5
Breacrumb Nedir? Breadcrumb Örneği

Patch breadcrumb yapısı kullanırken bazı sorunlarla karşılaşabilirsiniz bunlar arasında kopya sayfa sorunu başınıza gelebilir. Bir sayfaya birden farklı şekilde ulaşım sağlanılabildiği herkes tarafından bir gerçek bu yüzden canonical ve benzersiz url yapısı kullanmaya özen gösterin.

İlginizi Çekebilecek Yazılarımız

Breadcrumb Yapısında Dikkat Etmeniz Gerekenler

Breadcrumb yapısını kullanmadan önce dikkat etmeniz gereken bir kaç husus bulunmaktadır. Breadcrumb yapıları birden farklı yapılarda bulunması farklı amaçlar için kullanılması sitenizin uygun olup olmamasında karar vermenizi gerektiriyor.

Breadcrumb Ayraç Seçimi

Breadcrumb ayraçları sıklıkla “>” şeklinde kullanılmaktadır. Bu sıklıkla kullanılan ayraç dışında farklı ayraçlarda bulunmaktadır.

  1. Tire
  2. Nokta
  3. Eğik çizgi ve
  4. Büyüktür işareti

Breadcrumb Konumu

Breadcrumb konumu kullanıcılar siteyi ziyaret ettiğinde veya site içerisinde dolaşım yaparken onları rahatsız etmeyecek bir konumda bulunması önemlidir.

Breadcrumb yapısının konumu sıklıkla kategori başlığın altında soldan sağa doğru uzanan bir yapı içerisinde bulunmaktadır. Kullanıcı hangi sayfada olduğunu ve hangi sayfaları ziyaret ettiğini anlaması ve geri dönüş yapması kolaylaşır.

Breadcrumb WordPress Eklentileri

WordPress tabanlı web site sahipleri breadcrumb nasıl yapılır diye arama yaptığında karşılarına karmakarışık bir çok eklenti çıkmaktadır.

Bu eklentilere bakıldığında hangisini breadcrumb nasıl yapılır sorusuna cevap veremiyor aşağıda hazırladığımız wordpress breadcrumb eklentileri kullanarak breadcrumb nasıl yapılır sorusunu ortadan kaldıracaksınız.

  • Rankh Math Seo
  • Yoast Seo
  • Schema.Org
  • Breadcrumb

Html Breadcrumb, Breadcrumb Css ve Bootstrap Breadcrumb Kodları

WordPress tabanlı web siteler için breadcrumb yapısını kullanmak bir kaç eklenti ile çözülebilir. Fakat özel tasarımlarla oluşan siteler için breadcrumb yapısı kodlardan oluşmaktadır. aşağıda yer alan kodlar html breadcrumb kodları ve css breadcrumb kodları yer almaktadır.

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

Breadcrumb CSS Kodları

Bread crumb css kodlarını web sitenizin css dosyası içerisine ekleyerek sitenizde breadcrumb yapısını 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ğıda yer alan breadcrumb bootstarp kodlarını kullanarak web siteniz içerisinde 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? breadcrumb nedir yazımızı buraya kadar 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ı index Alma Teknikleri

Kaynaklar

Breadcrumb nasıl yapılır breadcrumb nedir adlı yazımızda kullandığımız kaynaklar aşağıda yer almaktadır.

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ı

Web Site

seodefteri
Author