Blogger'a breadcrumbs (navigasyon) kodu nasıl eklenir?

30 Aralık, 2016
Blogger breadcrumbs eklentisi
Blogger breadcrumbs eklentisi
Blogger (blogspot) da özelikle SEO konusunda blogumuza önemli katkı sağlayacak eklentilerden biri de breadcrumbs yani navigasyon eklentisidir. Peki bu breadcrumbs kodu nedir, ne işe yarar? SEO konusunda nasıl fayda sağlar? Breadcrumbs navigasyon eklentisini blogumuza nasıl ekleriz?

Breadcrumbs eklentisi SEO açısından önemli bir konudur. Arama motorlarında blogların yada sitelerin linklerinin daha düzenli görünmesini sağlar. Aynı zamanda sayfa içerisinde kullanıcının konumunu gösterir. Bu sayede kullanıcılar yayın sayfalarınızda hangi kategori içerisinde olduklarını rahat bir şekilde görebilirler.

Basit bir örnekle pekiştirmek gerekirse eğer; her katta 20 dairenin bulunduğu 50 katlı bir binanın içerisindesiniz. Ve her katta, hangi katta olduğunuzu gösteren birer tabela ve daire kapılarının üstlerine yerleştirilen kapı numaraları bulunmakta. İşte bu tabelalar sayesinde bina içerisinde nerede olduğunuzu rahatlıkla bulabilirsiniz. İşte breadcrumbs ve benzeri eklentilerde site içerisinde bu işe yarar.

Sadece bredcrumb değil örneğin benim sayfamda en alt kısımda gördüğünüz numaralar ve üst kısımda menü çubuğunda sekme seçerken arka plan renginin değişmesi gibi. İşte bunların hepsi konum belirten yöntemlerdir ve kesinlikle çok önemlidir.

Google'un reklam sistemi olan AdSense özellikle bu konudan dolayı bir çok blog sayfasını veya web sitesini geri çeviriyor, haberiniz olsun.

Breadcrumbs kodunun Google'da ki görünümünü inceleyelim:


1. Breadcrumbs (navigasyon) kodu olmadan;
Breadcrumb (navigasyon) kodu olmadan
Gördüğünüz gibi link kısmı uzun ve belirli bir düzen yok.
2. Breadcrumbs (navigasyon) kodu varken:
breadcrumb (navigasyon) kodu varken
Breadcrumbs kodu eklendiğinde, blogger kategorisine ait bir yazı olduğunu anlıyoruz. Ayrıca gayet şık duruyor.

Şimdi Breadcrumbs kodunun blogumuzdaki görünümüne bakalım:


Kendi bloguma da eklediğim bu kodun görünümünü her sayfada başlıkların hemen üstünde görebilirsiniz.
Blogger breadcrumbs eklentisi
Blogger breadcrumbs eklentisi

Blogger'a breadcrums eklentisi nasıl eklenir?


Kodu eklemeden önce temanızı yedeklemeyi unutmayı!

1. Öncelikle "Şablon (tema)" ardından "HTML Düzenle" sekmeleri ile kodların olduğu bölüme ulaşın.
2. Daha sonra Ctrl F yardımıyla aşağıdaki kodu bulun.
<b:includable id='main' var='top'>
3. Bulduğunuz bu kodun yerine aşağıdaki kodu ekleyin.
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Ana Sayfa</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Ana Sayfa</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Ana Sayfa</a></span> &#187; <span>Etiketi yok</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb etiket sayfaları ve arama sonuçları -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a></span> &#187; <span>Arşiv <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a></span> &#187; <span>Tüm Yazılar</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a></span> &#187; <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
4. Daha sonra yine Ctrl F yardımıyla aşağıdaki bulun.
]]></b:skin>
5. Ve bulduğunuz bu kodun hemen üstüne aşağıdaki kodu ekleyin.
.breadcrumbs {
font-size :13px;
font-style :normal;
border : 1px solid #e06666;
border-radius : 5px;
margin-bottom :5px;
padding : 5px 0px 5px 5px;
background: #fff;
}
6. Temayı kaydedin ve blogunuzu kontrol edin.

Düzenleme: Kalın harflerle işaretlediğim kısımlara dilediğiniz gibi düzenleyebilirsiniz. Ayrıca 5. maddede yer alan CSS kodlarında da dilediğiniz değişikliği yapabilirsiniz.

SEO konusunda önemi büyüktür breadcrumbs eklentisinin. Bu yüzden blogunuz için yeni temalar tercih ederken bu eklentinin olduğundan emin olun. Ayrıca aklınıza takılan sorular ya da uygulamada karşılaştığınız sorunlar olursa yorum yaparak bana bildirebilirsiniz.

38 yorum:

  1. Öğrenilecek ne çok şey var. İlk fırsatta deneyeceğim :) Teşekkürler.

    YanıtlayınSil
  2. Teşekkür ederim, ben uyguladım.

    YanıtlayınSil
    Yanıtlar
    1. Rica ederim, gayet güzel olmuş. Bu arada şu yazımı da okumanızı ve blogunuza uygulamanızı tavsiye ederim.

      Sil
  3. Yine güzel bir konu :) Bilmeyenler için gerçekten faydalı bir paylaşım :)

    YanıtlayınSil
    Yanıtlar
    1. Teşekkür ederim :) SEO konusunda olmazsa olmazlardandır..

      Sil
  4. Blogumda benzeri özellik var ve çok önemli gerçekten..Her tema da aynı özellik olmadığı için çok faydalı bir paylaşım olmuş, teşekkürler

    YanıtlayınSil
  5. Bir şey sormak istiyordum ben; ben bu kodu ekledim, breadcrumblar yayınımın üzerinde çıktı. (şimdilik tekrar kaldırdım)
    Peki, google aramalarda url'nin de bu şekilde görünmesi için ne kadar zaman geçmesi gerekiyor? Hani verdiğiniz örnekteki url gibi...

    YanıtlayınSil
    Yanıtlar
    1. Kısa sürede görünmeye başlayacaktır.

      Sil
    2. Bu kodunuzun aynısının label için son labeli gösterenini buldum. Sizin kodunuz çok hoşuma gitti ama hepsinin görünmesini istemiyordum ben çünkü film/dizi incelemeleri yaptığım için baş aktör ve aktrislerin isimlerini de yazıyorum anahtar kelimelere ve çok gelir öyle olunca göze. İsterseniz paylaşayım onu da eklersiniz, isteyen öyle kullanır seçenek olmuş olur:

      span typeof='v:Breadcrumb' tan önce

      eklenmeli ve sonrasında da label ile ilgili olan o bir satırlık kısım bitince de şeklinde kapatılmalı...

      Sil
    3. Hmmm yazdığım kod görünmedi buradan. data:label.isLast condition tag i eklenmeli diyeyim o zaman :D

      Sil
    4. Teşekkür ederim değerli yorumunuz için. En kısa zamanda yazıyı güncelleyeceğim.

      Sil
    5. Bir şey daha sormak istiyorum eğer sorun olmazsa :D Şu an eklenti ile birlikte url'ler kategori şeklinde görünmeye başladı ama bir sorun fark ettim, ilk sayfalarda çıkan bir yazım url'si navigasyon şeklinde göründükten sonra çok geri plana atıldı arama sonuçlarında. Niçin böyle oldu anlayamadım :S Bir fikriniz var mı acaba? Bu yazımı yazalı iki hafta olmuştu, ikinci sayfadaydı anahtar kelimesi ile aratınca; baktım navigasyon güncellemesi olmuş urlsinde ama artık o ikinci sayfada değil çok gerilerde :S

      Sil
    6. Bir önceki yorumda bahsettiğiniz kodda sadece son etiketi göster komutu yer alıyor. Bu arama sonuçlarındaki yerinizi etkilemiş olabilir. Bu kod yerine css kodları alternatif olabilir. Mesela display:none; kodu gibi. Ama bu sefer arama sonuçlarında kategoriler görünür mü emin değilim.

      Sil
    7. Şu an son gözlemlerimi yazayım; Islast ile olan breadcrumb versiyonu değilmiş sıramı etkileyen, bundan emin oldum; benim başlıkla ilgili yaptığım bir değişiklik sanırım. Ben yine de sizin versiyonunuza geçtim. Gerçekten çok güzel bir kod bu çünkü hemen etkisini göstermeye başladı bazı yazılarımda. Teşekkürler paylaşımınız için :)

      Sil
  6. Peki kodu ekledikten sonra faal olduğunu nasıl anlayabiliriz? Teşekkürler bu arada...

    YanıtlayınSil
    Yanıtlar
    1. Kodlar hemen blog sayfanızda görünecektir zaten. Bir kaç gün içinde de arama sonuçlarında yer alacaktır. Şu an kendi blogumda da bu kodları kullanıyorum. Ben teşekkür ederim yorumlarınız için.

      Sil
    2. Benim temamda varmış zaten. Şimdi çift çift çıkmaya başladı. O yüzden son yaptığımı geri almam gerekecek. :)

      Sil
    3. Evet, arama sonuçlarında da görünüyor.

      Sil
  7. Kodu siteye ekledim. Şöyle bir hata ile karşılaştım.
    ilk eklenen kodun bir üzerindeki Blog1 kodu kayıtları gösteriyor.
    bu kodla bağlantılı bir hata verdi.
    The widget with id "Blog1" contains at least two b:includable elements with the same id: "breadcrumb". All b:includable elements should have a unique id for a given widget.
    şeklinde.
    Nasıl çözebilirim.
    Teşekkürler.

    YanıtlayınSil
  8. Tamam çözdüm. Kod ilk eklendikten sonra orada kalmıyor.
    Alt satırlarda bir yere gizliyor. Onuda tesadüfen farkettim. yeniden ekleyince yukarıdaki hatayı veriyor.
    Bu şekilde kalıp ikinci kodun üstüne ilgili kodu ekleyince tam oluyor.

    YanıtlayınSil
  9. Bu şekilde ekledim fakat sol üst köşede olan yazının eklenme tarihinin üzerine etiketler ve sayfa başlığı geldi. Tarihin yerini nasıl değiştirebilirim? Sol tarafa veya başka bir yere almak istiyorum.
    Teşekkürler.

    YanıtlayınSil
    Yanıtlar
    1. text-align: right; şeklinde bir CSS kodu olması gerekiyor. Left olarak değiştirirseniz sol kısımda yer alır.

      Sil
  10. olmadı. Alt kısımda bir tarih daha var. Üsttekini akldırıp onu aktif yaptım çözüldü.
    Teşekkürler.

    YanıtlayınSil
  11. 5 blogun tamamına uyguladım. Birtek https://sayisaloyunlar.blogspot.com/
    blogunda olmadı. kodu kabul etti fakat navigasyon gösterimini yapmıyor.
    Arama sonuçlarında da eski şekli ile gösteriyor.
    Rica etsem kontrol edebilir misiniz neden olmadı anlayamadım.

    Teşekkürler.

    YanıtlayınSil
    Yanıtlar
    1. 5. maddediki kodlar var blogunuzda ama 3. maddediki kodları göremedim. Onları eklediniz mi?

      Sil
    2. ekledim. html ekran görüntüsünü mail atıyorum.
      anablogda çalışmadı.
      doğru bir şekilde ekledim.

      Sil
  12. Bir başka sorun ise daha önce yazmıştım siz göremedim demiştiniz.
    Yayın sayfasına mobilden bakınca başlığın alt kısmında index=i şeklinde bir metin çıkıyor.
    Ne yaptımsa kaldıramadım. Nasıl yapabilirim.
    Teşekkürler.

    YanıtlayınSil
    Yanıtlar
    1. index='i'> şeklinde fazla kod kalmış HTML kısmında onu silerseniz sorun düzelecektir. Blog1 id inin hemen altında.

      Sil
    2. Blog1 id altında göremedim. Versiyon='1'> şeklinde yazıyor.
      hangisini kaldırmam gerekir?

      Sil
    3. Uzun bir zaman sonunda bu sorunu da çözmüş bulunuyorum.
      index='i'> ifadesindeki tırnak işaretleri(' şeklinde görünüyor) html kodları ile göründüğü için kodu bulamamışım. Şimdi bulup kaldırdım.

      Sil
  13. html de bu metni aradım bulamadım.

    YanıtlayınSil
    Yanıtlar
    1. HTML'de görünmüyorsa muhtemelen eklentilerin içindedir. Detaylı bakmanız gerekir.

      Sil
  14. Bu kodu kaldırmak isteyenler kaldırma sorunu yaşarlarsa şu sıralamayı takip ettikten sonra eklenmiş kodları yerinden kaldırabilirler.
    Bu kodu ekledikten sonra burada yazmayan ekstra bir kod oluşuyor onun nedenini anlamadım.
    Html kodlar arasından "bread" kelimesini aratın. 2. maddedeki kodun bir alt satırında bread kelimesinin olduğu bir satır var o satırı silip ardından 3-5. maddelerde yer alan eklentileri html kodlar arasından sağlıklı bir şekilde kaldırabilirsiniz.
    Öncelikle ilk bahsettiğim işlemi yapmadan kaldırırsanız kaydetme hatası verebilir veya blog kayıtları kısmının kaybolduğunu görebilirsiniz.
    Umarım yararlı olur.
    Başarılar.

    YanıtlayınSil
  15. Bu eklentiyi kullanan ve bundan sonra kullanmaya karar veren bloggerlar için bir bilgilendirme geçmek isterim. Blog yazarının bilgisi vardır.
    Search console 1. ayda data-vocabulary.org yapısal veri dosyasını kaldırması nedeni ile yapısal veri test aracında burada bulunan eklenti hata veriyor. Ekleyenler Bir yukarıdaki yorumda belirttiğim gibi bread araması yaparak;
    Kodları buraya yazamayacağım yukarıda 3. maddede yer alan en alttan 2 satır için yazacağım.
    En alttan 2. satırdaki kodu bread arasamı ile bulun.
    Onun altındaki yine yukarıdaki 3. maddede yer alan en son satırdaki kırmızı satırda yer alan kod sitenizdeki html kodlar arasında yer alıyorsa o satırı kaldırın. Ardından 3-5. satırlardaki kodları kaldırabilirsiniz.
    Eğer bu kodu kaldırmazsanız kaydetmez, kaydetse bile blog kayıtları kısmına bir daha ulaşamayabilirsiniz.
    Bu işlemi yapmazdan önce html kodlarınızın bir kopyasını notepad++ programınıza çekin ki sorun yaşarsanız site elinizde patlamasın.
    Düzeltemeyebilirsiniz.
    Bu blogda yakın zamanda son güncel breadcrumbs eklentisi yayınlanacaktır.
    Başarılar.

    YanıtlayınSil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2020 Blog Tecrübem. All rights reserved.
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir. Kullanım Koşulları çerçevesinde alıntı yapılabilir.
Powered by . I Google!