Blogger Seo Dostu Breadcrumb Navigasyon Eklentisi

Breadcrumb, botların ve ziyaretçilerin sayfanızda daha rahat gezinebilmesi için genelikkle yazı başlığının üst kısmında oluşturulmuş etiket linkleri ve başlıkların bulunduğu eklentinin ismidir. Türkçe karşılığı "Ekmek Kırıntısı" olan bu eklentide hiyerarşi düzeni hakim olduğundan Ana sayfa » etiket linki » başlık şeklinde görüntüleme yaparak hem botlar hem de ziyaretçiler için kaynağın ne olduğunu ve nereden geldiklerini bilmelerinde yardımcıdır.

Breadcrumb Eklentisinin Seo Açısından Faydaları

• Ziyaretçilere kategoriyi bulmalarında yardımcı olur.
• Ana sayfaya linki ile geriye dönüş kolaylaşır.
• Ziyaretçiler sitenizde daha fazla gezineceğinden blogun hemen çıkma oranı azalır.
• Botlara kategoriyi tanımlamada yardımcı olur.

Blogger Breadcrumb Eklentisi Nasıl Kurulur?

› Blogger paneline giriş yapın.
› Blogunuzu seçip sol menüden Şablon kısmına gelin
› Açılan sayfada klavyenizin Ctrl+F komutu ile aşağıdaki kodu bulun.

<b:includable id='main' var='top'>

Bu kodu aşağıdaki kodlarla değiştirin.

<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'>Anasayfa</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'>Anasayfa</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'>Anasayfa</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 for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</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'>Anasayfa</a></span> &#187; <span>Tüm Yazılar</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</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'/>

Bir önizleme yapın ve hata alıp almadığınızı kontrol edin. Eğer hata vermediyse yerleşim kısmını tamamladınız demektir. Temayı kaydetmeden devam edin.

Şimdi ise aşağıdaki kodu bulun.

]]></b:skin>

Yukarıdaki kodun hemen üzerine aşağıdaki stil kodlarını ekleyin ve temanızı kaydedin.

.breadcrumbs {
font-size :13px;
font-style :italic;
border : 1px solid #d1d1d1;
border-radius : 5px;
margin-bottom :5px;
padding : 8px 6px 10px 6px;
}

Eklentiyi deneme amaçlı 5 farklı bloga ekledim ve tamamında sorunsuz çalıştı. Hem seo açısından fayda sağlaması hemde demo olması amacıyla yazıyı yazmadan hemen öncede kendim kullanmaya başladım. Arama sonuçlarında canlı olarak görmek isterseniz adres çubuğundaki linki alıp google arama kısmına yapıştırıp ararsanız bu yazıya ait breadcrumbu görebilirsiniz.
Bir sorun yaşayacak olursanız bildirmek için yorum formunu kullanabilirsiniz.

Bir önceki "Blogger Yorumlardaki Avatarları Küçülterek Sayfanızı Hızlandırın" başlıklı makalemizde sayfa hızınızı nasıl arttırabileceğiniz konusunda bilgi edinebilirsiniz.