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.

9 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. Bu yorum bir blog yöneticisi tarafından silindi.

    YanıtlaSil

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 lütfen. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2017 Blog Tecrübem - Kişisel Blog Her hakkı sakldır.
I Blogger!