Breadcrumb Nedir?

Bir AVM'ye giriyorsun, koridor uzun, mağazalar bol. İlk yön panosunun üzerinde o tanıdık görsel: kırmızı bir nokta ve altında "Şu an buradasınız" yazısı. Tek bakışta hangi kattasın, hangi koridor sağda, çıkış hangi yönde, hepsini öğrenirsin.

Web sitelerinde breadcrumb tam olarak bu işi yapar. Bir e-ticaret sitesinde ürün sayfasına geldiğinde sayfanın üst kısmında şöyle bir satır görürsün:

Anasayfa › Erkek › Ayakkabı › Spor Ayakkabı › Nike Air Max

Bu satır ziyaretçiye üç şeyi aynı anda söyler: hangi sayfada olduğunu, oraya hangi kategoriden indiğini ve bir adım yukarıya nasıl döneceğini. Tanım olarak söylemek gerekirse: breadcrumb, kullanıcının site hiyerarşisindeki konumunu gösteren ve üst kategorilere tek tıkla dönmesini sağlayan ikincil bir navigasyon öğesidir. Çoğunlukla sayfanın üst kısmında, başlığın hemen üzerinde küçük puntoyla yer alır.

Breadcrumb Türleri

Üç farklı breadcrumb yapısı vardır ve her biri farklı bir mantığa hizmet eder.

1. Hiyerarşik (Location-based) Breadcrumb

En yaygın olanı budur. Sayfanın site mimarisindeki konumunu gösterir:

Anasayfa › Hizmetler › SEO › E-Ticaret SEO

Ziyaretçi nereden geldiğine bakmaksızın aynı yolu görür. E-ticaret kategorileri, blog kategorileri ve kurumsal sitelerin hizmet sayfalarında tercih edilir.

2. Özellik-Bazlı (Attribute-based) Breadcrumb

Daha çok filtreli ürün sayfalarında karşımıza çıkar:

Anasayfa › Ayakkabı › Renk: Siyah › Beden: 42

Kullanıcının uyguladığı filtreleri özetler. Trendyol, Hepsiburada gibi büyük pazaryerlerinde sıkça görürsün.

3. Geçmiş-Bazlı (Path-based) Breadcrumb

Kullanıcının siteye giriş yaptıktan sonra hangi sayfalardan geçtiğini gösterir. Tarayıcının "geri" tuşunun bir kopyası gibi çalışır ve SEO açısından çok faydalı değildir, Google bunu site hiyerarşisi olarak yorumlamaz. Genelde önerilmez.

SEO Açısından Breadcrumb Neden Önemli?

Breadcrumb sadece kullanıcı için değil, arama motoru için de bir rehberdir. Etkisini üç başlık altında özetleyebiliriz.

Arama sonuçlarında URL yerine breadcrumb gösterilir

Google'da bir sonuç gördüğünde başlığın altında bazen ham URL, bazen de breadcrumb (umutrecepdurna.com › hizmetler › seo) görürsün. Schema markup ile breadcrumb tanımladığında Google bunu tercih eder. Sonuç daha okunabilir hâle gelir, CTR artar.

İç linkleme gücü dağıtır

Her breadcrumb satırı aslında üst kategorilere verilmiş birer iç linktir. Yüzlerce ürün sayfan varsa, hepsi otomatik olarak ait oldukları kategoriye link verir. Bu da kategori sayfalarının otoritesini doğal yoldan besler.

Site hiyerarşisini Google'a anlatır

Search Console'da "Breadcrumbs" raporunda hangi sayfaların doğru hiyerarşide olduğunu, hangilerinde hata olduğunu görebilirsin. Breadcrumb yoksa Google site mimarisini sadece menüden ve URL yapısından çıkarmak zorunda kalır.

Schema Markup ile Breadcrumb

Bir breadcrumb'ın görsel olarak sayfada bulunması yetmez. Google'ın bunu arama sonuçlarında gösterebilmesi için `BreadcrumbList` schema markup'ının da sayfaya eklenmiş olması gerekir.

Örnek bir JSON-LD yapısı şöyle görünür:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Anasayfa",
      "item": "https://umutrecepdurna.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://umutrecepdurna.com/blog"
    }
  ]
}

Test etmek için Rich Results Test aracını kullanabilirsin, schema doğru kuruluysa "Breadcrumbs" alanı yeşil işaretle gelir.

WordPress ve Shopify'da Breadcrumb Kurulumu

WordPress tarafında en pratik yol Yoast SEO ya da Rank Math eklentilerini kullanmak. Her ikisi de hem görsel breadcrumb hem de schema markup'ı otomatik üretiyor. Tek yapman gereken tema dosyana (genellikle single.php veya header.php) küçük bir kod parçası eklemek:

<?php if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb('<nav class="breadcrumb">','</nav>');
} ?>

Shopify tarafında ise temaların büyük çoğunluğunda breadcrumb yerleşik gelir, fakat varsayılan olarak gizlenmiş olabilir. theme.liquid dosyasında breadcrumbs.liquid snippet'ını çağırmak yeterli. Schema kısmı için Shopify SEO uygulamaları (Smart SEO, Plug in SEO) işi otomatikleştirir.

Custom kodlu sitelerde (Next.js, React vb.) breadcrumb componentini kendin yazmak ve <script type="application/ld+json"> etiketiyle schema'yı sayfaya enjekte etmek en temiz yoldur.

• Anasayfada breadcrumb gösterilmesi. Anasayfa zaten ilk basamak; orada breadcrumb gereksiz.
• Mevcut sayfanın linkli olması. En sondaki öğe (içinde bulunduğun sayfa) link olmamalı, sadece metin görünmeli.
• Schema ile görsel breadcrumb'un farklı olması. Schema'da yazan adımlar ile sayfada görünen adımlar birebir aynı olmalı, aksi hâlde Google "manipülasyon" olarak değerlendirir.
• Çok uzun başlıkların kırılmaması. "Pamuklu Erkek Polo Yaka Tişört Bordo Renk Slim Fit Yeni Sezon" gibi uzun ürün adları breadcrumb'ı bozar; son öğeyi text-overflow: ellipsis ile kısaltmak iyi bir pratik.
• Mobilde gizlemek. Pek çok tema breadcrumb'ı mobilde gizler; oysa mobilde de işe yarar bir yapıdır, sadece yatayda kaydırılabilir hâle getirmek yeterli.

Breadcrumb küçük bir öğe gibi görünür ama hem ziyaretçinin sitede kaybolmamasını sağlar, hem arama sonuçlarında daha temiz görünmene yardımcı olur, hem de iç linkleme yapını otomatikleştirir. WordPress kullanıyorsan Yoast/Rank Math'le 5 dakikada kurulur; e-ticaret sitelerinde ise schema markup'la birleşince kategori sayfalarının organik trafiğini görünür şekilde besler.

İyi kurulmuş bir breadcrumb, "site mimarim doğru" demenin en kolay yollarından biridir.

İlgili içerik: Breadcrumb'ı destekleyen genel teknik SEO altyapısı için SEO hizmeti sayfamı; kategori/ürün sayfalarında nasıl uygulandığını görmek için E-Ticaret SEO sayfamı inceleyebilirsin.