Breadcrumb Yapısı Nasıl Yapılır? Breadcrumb Rehberi 2021

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. Hazırladığımız bu yazıda breadcrumb yapılarının hem seo hemde ziyaretçiler için ne gibi faydaları var ve breadcrumb nasıl yapılır bunları araştırdı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 bu hem kullanıcı deneyiminini 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 Nasıl Yapılır?

Breadcrumb yapısı 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

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

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.

2.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

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

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

Breadcrumb Html, Css ve Bootstrap 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