Breadcrumb Sayfa işaretçileri veya ekmek kırıntıları olarak da bilinir. Ekmek kırıntısı yapısı her gün web sitesi tasarımında çok önemli bir rol oynamaktadır. Ekmek kırıntısı yapılarını kullanarak gezinme, kullanıcı deneyimini ve sitede gezinmeyi geliştirebilir.

Arama motorlarında daha üst sıralarda yer almak için rekabet arttıkça ekmek kırıntısı daha önemli hale geliyor. Ekmek kırıntılarının ne olduğunu ve nasıl yapılabileceğini anlamanıza yardımcı olmak için bu makaleyi oluşturduk.

Breadcrumb nedir ?

Breadcrumb, ekmek kırıntısı anlamına gelir. Web siteleri hem arama motoru optimizasyonunu (SEO) hem de kullanıcı deneyimini göz önünde bulundurmalıdır. Ziyaretçilerin kategoriler ve web sayfaları arasında gezinmesi, hangi sayfayı terk ettiklerini ortaya çıkarabilir.

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

Breadcrumb sistemlerinin site trafiğini %30 oranında artırdığı gösterilmiştir. Ekmek kırıntısı sistemi SEO için çok önemlidir ve sitede çok az yer kaplar.

Breadcrumbs, Googlebot’lara rehberlik sağlarken kullanıcının deneyimini iyileştirir. Ekmek kırıntıları, googlebotların sitede gezinmesine yardımcı olarak onları bir hiyerarşi içinde doğru konuma yönlendirir.

Ekmek kırıntıları, kullanıcılara hangi sayfada ve kategoride olduklarını göstererek bir web sitesinde gezinmelerine yardımcı olmak için kullanılır.

Breadcrumb Nasıl Yapılır?

İnternet yanlış bilgi ve yalanlarla doludur Bu konuda daha fazla bilgiyi buraya tıklayarak bulabilirsiniz. breadcrumb. Bir WordPress web sitesinde ekmek kırıntısı navigasyonunu etkinleştirmek için yüklemeniz gereken tek şey birkaç eklenti yüklemektir.

WordPress web sitenizde ekmek kırıntısını uygulamak için Yoast, rankmath ve Schema.org gibi popüler eklentileri yüklemeniz gerekecektir.

Ek bilgi parantezlerini birçok farklı şekilde kullanabilirsiniz. En yaygın kullanılan parantez “>” şeklindedir.

  • Kısa Hat
  • Nokta
  • Saç kesimi
  • Boyut İşareti

E-Ticaret Web Siteleri için Breadcrumb kodu

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>

En üstteki breadcrumb kodlarını doğru bir şekilde uygularsanız Google web sitenizin doğru yapısını görüntüleyecektir.

Breadcrumb yapılarının faydaları

  • Bu özelliği kullanarak kullanıcıların bir önceki sayfaya geri dönmelerini sağlayabilirsiniz.
  • Ziyaretçilerinizin kategorilere ve sayfalara göre sitede gezinmesini kolaylaştırabilirsiniz.
  • Ekmek kırıntıları iyi tasarlandıkları takdirde kullanıcı deneyimi için faydalıdır.
  • İç bağlantı, ekmek kırıntısının önemli bir işlevidir.
  • İç bağlantılar ziyaretçilerin web sitesinde gezinmesini sağlar.
  • Googlebot’ların sitenizin yapısını anlamasına yardımcı olur.
  • Arama botları chema entegrasyonu ile bağlantı yapısı hakkında bilgilendirilir.
  • Arama Motoru Optimizasyonu için harika bir araçtır.

Ne tür Breadcrumb vardır?

Breadcrumb’ın ne olduğunu veya nasıl çalıştığını araştırırken bir şeyi gözden kaçırmış olabilirsiniz. Sitenizin yapısı breadcrumb türüne göre belirlenir.

1. Breadcrumb Konumu: Konumsal Kırıntı

Ekmek kırıntıları en yaygın yapılardan biridir. Bir konum kırıntısı, ziyaretçilerin web sitenizde kategoriler ve web sayfaları arasında gezinmesine yardımcı olabilir. Ziyaretçiler web sitenizde gezinebilir ve önceki sayfalara kolayca erişebilir. Ziyaretçi sayfanın nasıl organize edildiğini daha iyi anlayabilir.

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

2. Öznitelik Ayrıntılılığı

Öznitelik-breadcrumb yapısında isimler yerine öznitelikler kullanılır. Bu yapı sayfaların konumuna değil, niteliklerine dayanır. Öznitelik ekmek kırıntısı esas olarak bir e-ticaret web sitesinin arama bölümünde görünür.

Galeta unu nasıl yapılır Galeta unu tam olarak nedir?

3. Yama Breadcrumb Dinamik Yapısal

Ekmek kırıntısı tanımı gereği bir yamadır. Kullanıcı bunu bir web sayfasından diğerine geçmek için tıkladığı bağlantıları izlemek için kullanabilir. Ekmek kırıntısı navigasyon menüsü, kullanıcının ziyaret ettiği sayfaları bir yol haritası şeklinde görüntüler.

Ekmek kırıntısı nedir? Breadcrumb örneği

Ekmek kırıntısını kullandığınızda, yinelenen sayfalara neden olabilir. Bir web sayfasına birden fazla kişi tarafından kolayca erişilebilir. Bunu önlemek için kanonik veya url yapısı kullanın.

Breadcrumb Yapısı: Dikkat Edilmesi Gerekenler

Galeta unu kullanmadan önce birkaç faktörü göz önünde bulundurmalısınız. Ekmek kırıntılarının birçok şekli vardır ve farklı amaçlar için kullanışlıdır. Bunları web sitenizde kullanmak isteyip istemediğinize karar vermelisiniz.

Breadcrumb Parantez Seçimi

Breadcrumb parantezleri genellikle “>” olarak kullanılır. Diğer sınırlayıcılar da mevcuttur.

  1. Kısa Hat
  2. Nokta
  3. Saç kesimi
  4. Boyut İşareti

Kırıntı konumları

Ekmek kırıntısı, kullanıcının web sitesini ziyaret ederken dikkatini dağıtmayacak şekilde yerleştirilmelidir.

Ekmek kırıntıları genellikle kategori başlığının ortasında yer alır ve soldan sağa doğru ilerler. Kullanıcı, ziyaret ettiği sayfayı ve hangi sayfaların görüntülendiğini kolayca tespit edebilecektir.

Breadcrumb WordPress eklentileri

Ekmek kırıntıları oluşturabilecek eklentiler arayan WordPress site sahipleri birçok karmaşık eklenti bulacaklardır.

Ekmek kırıntısı oluşturma sorununuzu çözmek için aşağıda verdiğimiz ekmek kırıntısı WordPress eklentilerini kullanın.

  • Rankh Matematik seo
  • Yoast Seo
  • Schema.Org
  • Ekmek Kırıntıları

Breadcrumb HTML, Breadcrumb CSS ve Bootstrap breadcrumb kodları

Ekmek kırıntısını birkaç WordPress Eklentisi ile web sitenize uygulayabilirsiniz. Ekmek kırıntısı sistemi özel tasarımlı web siteleri için kodlanmıştır. Breadcrumb için html ve CSS kodu aşağıda listelenmiştir.

Web sitenizin html sayfasına breadcrumb HTML kodunu ekleyin.

Breadcrumb CSS kodları

Bu yapıyı kullanmak için web sitenizin css’ine breadcrumb kodu ekleyebilirsiniz.

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

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

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

    You can also display it on your screen: Inline;

    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ı

Sitenizde breadcrumb sistemi oluşturmak için aşağıdaki kodu kullanın. Boottarp breadcrumb kodlarını kullanarak sitenizde breadcrumb tarzı yapılar oluşturun.

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