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

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;

Gördüğünüz gibi link kısmı uzun ve belirli bir düzen yok.

2. Breadcrumbs (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'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.