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

30 Aralık, 2016

Blogger'a breadcrumbs (navigasyon) kodu nasıl eklenir?
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 kodu blogumuza nasıl ekleriz? İşte cevaplar...

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.
Breadcrumb kodunun blogumuzdaki görünümü
Blogumdaki görüntü
Şimdi breadcrumbs kodunun ne olduğunu öğrendikten sonra Blogger (blogspot) blogumuza nasıl ekleriz ondan bahsedelim:

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

1. Öncelikle "Şablon" >> "HTML Düzenle">> sekmeleri ile kodların olduğu bölüme ulaşın.
2. Ardından 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. Şablonu 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.

Sonlara doğru...

Bu yazımda bu kadardı. 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.

✋Bu içerik Kişisel Blog - BlogTecrübem tarafından hazırlanmıştır.

21 yorum:

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

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

    YanıtlaSil
    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ıtlaSil
    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ıtlaSil
  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ıtlaSil
    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ıtlaSil
    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

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Telif Hakkı © 2016 - 2018 Blog Tecrübem. Tüm Hakları Saklıdır.
I Google!