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

crazyzebra550

Breadcrumb, sayfa yolu işaretçileri olarak bilinir. Ekmek kırıntısı yapıları her gün web sitelerinin tasarımında hayati bir rol oynamaktadır. Ekmek kırıntısı navigasyonu, kullanıcının deneyimini geliştirebilir ve site navigasyonunu iyileştirebilir.

Arama sıralamaları için rekabet arttıkça ekmek kırıntısı daha önemli hale geliyor. Bu nedenle, breadcrumb’ın ne olduğunu ve nasıl yapabileceğinizi açıklayan bir makale oluşturduk.

Breadcrumb Nedir?

Breadcrumb, ekmek kırıntısı anlamına gelir. Arama motoru optimizasyonu ve kullanıcı deneyimi web siteleri için önemli faktörlerdir. Ziyaretçilerin web sitenizdeki kategoriler ve sayfalar arasında gezinmesi, ziyaretçinin hangi sayfadan hareket ettiğini gösterir.

Jakob Nielsen, breadcrumb yapılarının kullanımını ilk olarak 1995 yılında kendi web sitesinde önerdiğini iddia etmektedir. Ekmek kırıntısı yapısı kafa karıştırıcı değildir ve kullanıcılar için web sitesinde gezinirken sorun yaratmaz.

Breadcrumb sisteminin site trafiğini ve sirkülasyonunu %30 oranında artırdığı tespit edilmiştir. SEO için önemlidir ve web sitesinde çok az yer kaplar.

Ekmek kırıntıları kullanıcı deneyimini iyileştirirken, Googlebot’lara rehberlik sağlar. Ekmek kırıntısı yapısı, googlebot’ları bir hiyerarşi içinde doğru konuma yönlendirerek siteyi taramasına yardımcı olur.

Ekmek kırıntıları, kullanıcıların şu anda hangi kategoride ve sayfada olduklarını bilmelerini sağlayarak sitede gezinmelerine yardımcı olur.

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

Breadcrumb hakkında birçok yalan ve yanlış bilgi var. WordPress tabanlı bir web sitesi kullanıyorsanız, ekmek kırıntısı navigasyonunu elde etmek için tek yapmanız gereken birkaç eklenti yüklemektir.

Ekmek kırıntısı uygulamak için popüler eklentiler Yoast Seo, rankmath ve Schema.org’u WordPress sitenize yüklemeniz gerekir.

Ekmek kırıntısı parantezlerini kullanmanın birçok yolu vardır. En yaygın kullanılan breadcrumb parantezi “>” dir.

  • Kısa çizgi
  • Nokta
  • Saçı kesmek
  • Büyüklük İşareti

E-Ticaret Siteleri için Breadcrumb Kodları

Breadcrumb Kodu

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

Breadcrumb kodunu en üstte doğru bir şekilde uygularsanız Google web sitenizi doğru yapıda görüntüleyecektir.

Breadcrumb yapısının faydaları:

  • Bu, kullanıcıların önceki sayfalara dönmek için web sitenizde gezinmesine olanak tanır.
  • Bu, ziyaretçilerin sitenizde kategoriye ve sayfaya göre gezinmesini kolaylaştırır.
  • Ekmek kırıntısı kullanıcı deneyimi için faydalıdır, ancak yalnızca tasarım iyiyse.
  • Ekmek kırıntısı yapısı, dahili bağlantıda önemli bir rol oynar.
  • Doğru dahili bağlantı, ziyaretçilerin web sitesi içinde gezinmesine olanak tanır.
  • Bu, Googlebot’ların siteyi taramasına ve yapısını anlamasına yardımcı olur.
  • Arama botları, chema entegrasyonu kullanılarak bağlantı yapısı hakkında bilgilendirilebilir.
  • Arama motoru optimizasyonu için harika bir araçtır.

Breadcrumb çeşitleri nelerdir?

Breadcrumb nedir ya da nasıl yapılır diye araştırırken gözden kaçırıyor olabileceğiniz bir şey var. Breadcrumb tipi web sitenizin yapısını belirler.

1. Breadcrumb Konumu – Konumsal Breadcrumb

Breadcrumbs en popüler yapılar arasındadır. Konum kırıntısı, ziyaretçilerin web sitenizde kategoriler ve sayfalar arasında gezinmesine yardımcı olur. Ziyaretçiler web sitenizde gezinirken kolayca önceki sayfalara geri dönebilirler. Ziyaretçi, sayfanın veya kategorinin hiyerarşisini daha iyi anlayabilecektir.

Örnek: Ana Sayfa>Telefon ve Aksesuarlar>Cep Telefonu Aksesuarları>Kılıf

2. Özniteliklerin kırıntısı

Öznitelik-breadcrumb yapısında sayfaların isimlerinden çok öznitelikleri kullanılır. Bu yapı sayfaların konumuna değil, sahip oldukları özelliklere dayanır. Öznitelik ekmek kırıntısı en çok e-ticaret web sitelerinin arama bölümünde kullanılır.

3. Yama Breadcrumb Dinamik Yapı

Breadcrumb, tanım olarak, yama ekmek kırıntısıdır. Kullanıcının bir sayfadan diğerine geçerken tıkladığı bağlantıların yerini belirlemek için kullanılır. Yol haritaları şeklinde, ziyaret ettiği sayfalar breadcrumb navigasyon menüsünde bulunabilir.

Breadcrumb örneği

Yinelenen sayfa sorunu, ekmek kırıntısı ekini kullandığınızda ortaya çıkabilir. Herkes bir web sayfasına birden fazla kez erişilebileceğini bilir. Bunu önlemek için canonical ve url yapısını kullanın.

Breadcrumb yapısı: Dikkate alınması gerekenler

Ekmek kırıntısı kullanmadan önce göz önünde bulundurmanız gereken bazı hususlar vardır. Ekmek kırıntıları birçok farklı biçimde mevcuttur ve çeşitli amaçlar için kullanılabilir. Web sitenizin uygun olup olmadığını belirlemek size kalmıştır.

Breadcrumb Parantez Seçimi

Breadcrumb parantezleri genellikle “>” olarak kullanılır. Kullanılabilecek başka birçok sınırlayıcı vardır.

  1. Kısa çizgi
  2. Nokta
  3. Saçı kesmek
  4. Büyüklük İşareti

Breadcrumb konumu

Ekmek kırıntısının, kullanıcılar siteyi ziyaret ederken veya sitede gezinirken dikkatlerini dağıtmayacak şekilde yerleştirilmesi önemlidir.

Ekmek kırıntısının soldan sağa doğru uzanan bir yapıda, kategori başlığının altında bulunması yaygındır. Kullanıcı hangi sayfayı görüntülediğini ve hangi sayfaların ziyaret edildiğini kolayca belirleyebilecektir.

Breadcrumb WordPress Eklentileri

WordPress web sitesi sahipleri breadcrumbs yapabilen eklentiler aradıklarında birçok karmaşık eklenti bulmaktadırlar.

Breadcrumb nasıl yapılır sorununu çözmek için aşağıda verdiğimiz breadcrumb wordpress eklentilerini kullanabilirsiniz.

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

Breadcrumb html, Breadcrumb css ve Bootstrap Breadcrumb kodları

Birkaç WordPress eklentisi ile breadcrumb sistemini web sitenize kolayca uygulayabilirsiniz. Özel tasarıma sahip siteler için breadcrumb bir kod kümesidir. Aşağıda html ve CSS breadcrumb kod kodları yer almaktadır.

Breadcrumb html kodunu web sitenizin html dosyasına ekleyin.

Breadcrumb CSS kodları

Bu yapıyı kullanabilmek için Breadcrumb kodları web sitenizin css’ine eklenebilir.

ul.breadcrumb {
    раним: 10px 16px;

    list-style: No, you can't.;

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

    This can be displayed on your screen: Online;

    font-size: 20px;

    Color: CurrentColor;
}
ul.breadcrumb li + li:before {
    раним: 8px;

    Color: Cornflowerblue;

    The following content is available:: "/0a0";
}
ul.breadcrumb li a {

    Color: Cornflowerblue;

    text-decoration: No, you can't.;
}
ul.breadcrumb li a:hover {

    Color: #01447e;

    text-decoration: Underline;
}

Breadcrumb Bootstrap Kodları

Aşağıdaki kodu kullanarak web sitenizde breadcrumb yapısı oluşturabilirsiniz. Web sitenizde breadcrumb yapıları oluşturmak için aşağıdaki breadcrumb boottarp kodlarını kullanın.

<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">Learn more about Data</li>
  </ol>
</nav>

Related Posts