Breadcrumb Nedir? Nasıl Uygulanır?

Web sitelerinin kullanıcı deneyimini ve navigasyonunu iyileştirmek için kullanılan birçok araç ve yöntem bulunmaktadır. Bu araçlardan biri de breadcrumb (ekmek kırıntısı) navigasyonudur. Breadcrumb, kullanıcıların web sitesi içinde nerede bulunduklarını ve diğer sayfalara nasıl ulaşabileceklerini anlamalarına yardımcı olur. Bu makalede, breadcrumb’un ne olduğunu, nasıl uygulandığını ve sağladığı avantajları inceleyeceğiz.

Breadcrumb Nedir?

Breadcrumb, web sitelerinde kullanıcının bulunduğu sayfanın konumunu ve sayfanın üst düzey kategorilerini gösteren bir navigasyon öğesidir. Adını, Hansel ve Gretel masalında çocukların geri dönüş yollarını bulmak için ekmek kırıntıları bırakmalarından alır. Breadcrumb, genellikle sayfanın üst kısmında, yatay bir şekilde yer alır ve kullanıcıların site içinde geri dönüş yapmalarını kolaylaştırır.

Breadcrumb Türleri

Hiyerarşik Breadcrumb

Hiyerarşik breadcrumb, kullanıcının mevcut sayfanın bulunduğu hiyerarşik yapıyı gösterir. Bu tür breadcrumb, kullanıcıların hangi kategoride olduklarını ve üst kategorilere nasıl geri döneceklerini gösterir.

• Örnek: Anasayfa > Kategori > Alt Kategori > Mevcut Sayfa

Nitelik Temelli Breadcrumb

Nitelik temelli breadcrumb, kullanıcının belirli bir ürün veya sayfa için seçtiği özelliklere dayalı olarak oluşturulur. Bu tür breadcrumb, e-ticaret sitelerinde sıkça kullanılır.

• Örnek: Anasayfa > Erkek Giyim > Ayakkabılar > Spor Ayakkabılar

Geçmiş Temelli Breadcrumb

Geçmiş temelli breadcrumb, kullanıcının site içinde dolaşırken izlediği yolun kaydını tutar. Bu tür breadcrumb, kullanıcının önceki sayfalara kolayca geri dönmesini sağlar.

• Örnek: Anasayfa > Hakkımızda > Hizmetler > İletişim

Breadcrumb’un Avantajları

Kullanıcı Deneyimi

Breadcrumb, kullanıcıların site içinde nerede bulunduklarını ve üst sayfalara nasıl dönebileceklerini anlamalarına yardımcı olarak kullanıcı deneyimini iyileştirir. Kullanıcılar, site içinde kaybolmadan gezinme imkanına sahip olur.

SEO Yararları

Breadcrumb, arama motorlarının web sitenizin yapısını daha iyi anlamasına yardımcı olabilir. Bu, sitenizin SEO performansını artırabilir ve arama motoru sonuçlarında daha iyi sıralamalar elde etmenize yardımcı olabilir.

Site Navigasyonu Kolaylığı

Breadcrumb, site navigasyonunu kolaylaştırır ve kullanıcıların üst düzey sayfalara veya kategorilere hızlıca geri dönmesini sağlar. Bu, kullanıcıların site içinde daha fazla zaman geçirmesini ve daha fazla sayfayı ziyaret etmesini sağlar.

Breadcrumb Nasıl Uygulanır?

HTML ile Breadcrumb Oluşturma

HTML kullanarak breadcrumb oluşturmak oldukça basittir. Aşağıda, basit bir HTML breadcrumb örneği verilmiştir:

<nav aria-label=”breadcrumb”>

  <ol class=”breadcrumb”>

    <li class=”breadcrumb-item”><a href=”index.html”>Anasayfa</a></li>

    <li class=”breadcrumb-item”><a href=”category.html”>Kategori</a></li>

    <li class=”breadcrumb-item active” aria-current=”page”>Mevcut Sayfa</li>

  </ol>

</nav>

CSS ile Breadcrumb Stilleri

HTML ile oluşturulan breadcrumb’ı güzelleştirmek için CSS kullanabilirsiniz. Aşağıda, basit bir CSS breadcrumb stili örneği verilmiştir:

.breadcrumb {

  list-style: none;

  display: flex;

  padding: 0;

}

.breadcrumb-item {

  margin-right: 0.5em;

}

.breadcrumb-item a {

  text-decoration: none;

  color: #007bff;

}

.breadcrumb-item.active {

  color: #6c757d;

}

JavaScript ile Breadcrumb Dinamikliği

JavaScript kullanarak dinamik breadcrumb oluşturabilirsiniz. Bu, özellikle sayfalarınızın dinamik olarak oluşturulduğu durumlarda faydalıdır.

// Dinamik breadcrumb oluşturma örneği

function createBreadcrumb() {

  var breadcrumb = document.querySelector(‘.breadcrumb’);

  var path = window.location.pathname.split(‘/’).filter(function (el) { return el.length != 0; });

  var fullPath = ”;

  path.forEach(function (segment, index) {

    fullPath += ‘/’ + segment;

    var li = document.createElement(‘li’);

    li.className = ‘breadcrumb-item’;

    if (index === path.length – 1) {

      li.classList.add(‘active’);

      li.setAttribute(‘aria-current’, ‘page’);

      li.textContent = segment;

    } else {

      var a = document.createElement(‘a’);

      a.href = fullPath;

      a.textContent = segment;

      li.appendChild(a);

    }

    breadcrumb.appendChild(li);

  });

}

document.addEventListener(‘DOMContentLoaded’, createBreadcrumb);

CMS Sistemlerinde Breadcrumb Kullanımı

Popüler CMS sistemleri, breadcrumb kullanımını kolaylaştıran eklentiler ve araçlar sunar. Örneğin, WordPress için “Yoast SEO” eklentisi, breadcrumb eklemeyi oldukça basit hale getirir.

Breadcrumb Kullanırken Dikkat Edilmesi Gerekenler

Anlaşılır ve Kısa Tutma

Breadcrumb’u anlaşılır ve kısa tutmak, kullanıcı deneyimini iyileştirir. Karmaşık ve uzun breadcrumb’lar, kullanıcıları yanıltabilir.

Ana Sayfa Linki Ekleme

Breadcrumb’un başlangıcına ana sayfa linki eklemek, kullanıcıların ana sayfaya kolayca dönmesini sağlar.

Uygun Ayırıcılar Kullanma

Ayırıcılar (örneğin, “>”, “/”, “|”) breadcrumb’da kullanılan öğeleri birbirinden ayırmak için kullanılır. Kullanıcıların breadcrumb’u kolayca okuması için uygun ayırıcılar seçilmelidir.

Mobil Uyumlu Tasarım

Breadcrumb’un mobil cihazlarda da iyi çalıştığından emin olun. Responsive tasarım ve mobil uyumlu CSS, breadcrumb’un her cihazda düzgün görünmesini sağlar.

Breadcrumb ve SEO

Yapısal Veri ve Schema Markup

Breadcrumb’u arama motorlarına daha iyi tanıtmak için schema markup kullanabilirsiniz. Aşağıda, breadcrumb için schema markup örneği verilmiştir:

<nav aria-label=”breadcrumb”>

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

    <li class=”breadcrumb-item” itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>

      <a href=”index.html” itemprop=”item”><span itemprop=”name”>Anasayfa</span></a>

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

    </li>

    <li class=”breadcrumb-item” itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>

      <a href=”category.html” itemprop=”item”><span itemprop=”name”>Kategori</span></a>

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

    </li>

    <li class=”breadcrumb-item active” aria-current=”page” itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>

      <span itemprop=”name”>Mevcut Sayfa</span>

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

    </li>

  </ol>

</nav>

Arama Motoru Sonuçlarında Breadcrumb Görünümü

Breadcrumb, arama motoru sonuç sayfalarında (SERP) da görünebilir ve kullanıcıların sitenizin yapısını daha iyi anlamasına yardımcı olabilir. Bu, tıklama oranlarını artırabilir ve sitenizin arama motorlarındaki görünürlüğünü iyileştirebilir.