Cara Memasang Breadcrumbs pada Posting Blog

Apa itu Breadcrumb?

Cara Memasang Breadcrumb pada posting blog agar blog SEO friendly sebenarnya sangat mudah. Breadcrumb merupakan sebuah teknik SEO yang membantu kita terutama search engine untuk menelusuri posisi sebuah posting blog dari titik awal (home). Secara bahasa, Breadcrumb berarti "remah roti". Teknik Breadcrumb membantu spider dari search engine untuk lebih cepat mengenal struktur sebuah blog. Saya contohkan seperti gambar di bawah.
cara memasang bread crumbs pada posting blog
Secara teknis para blogger setuju bahwa teknik breadcrumb membawa efek positif bagi SEO, karena  link antar halaman itu selalu memberi efek positif dalam aliran pagerank. Breadcrumb juga sedikit banyak membantu navigasi pengunjung untuk mengenali blog atau website yang sedang dikunjunginya.

Cara Memasang Breadcrumbs

Selain memberikan kemudahan bagi Googlebot untuk merayapi sebuah blog atau website, memasang breadcrumb juga membuat tampilan blog atau website lebih profesional menurut saya. Jika ingin memasang breadcrumb, silakan ikuti langkah mudah berikut:
  • Masuk ke akun blogger, pilih Template
  • Backup template Anda dengan mengklik tombol Cadangkan/Pulihkan
  • Klik tombol Edit HMTL
  • Buka semua kode template dengan klik di sembarang tempat di dalam kode lalu tekan CTRL+A, lalu tekan CTRL+C, lalu tekan DEL, dan terakhir paste dengan menekan CTRL+V.
  • Klik di sembarang tempat di kode HTML, lalu tekan CTRL+F untuk membuka kotak pencarian. Cari kode ]]></b:skin
  • Letakkan kode berikut tepat di atas kode ]]></b:skin tadi
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
  • Kemudian cari kode berikut:
<b:includable id='main' var='top'>
  • Hapus, dan ganti kode di atas dengan kode berikut:
<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'>Home</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'>Home</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'>Home</a></span> &#187; <span>Unlabelled</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'>Home</a></span> &#187; <span>Archives for <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'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <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'/>
  • Simpa.
Jika kode breadcrumb terpasang dengan benar, maka akan tampak seperti gambar di bawah.

cara memasang breadcrumb di posting blog

Bagaimana, mudah bukan memasang breadcrumb? Silakan melakukan Optimasi SEO lain untuk semakin memaksimalkan SEO Anda.

Posting Komentar