Memasang Menu Breadcrumb untuk Meningkatkan SEO Blog

Menu Breadcrumb adalah Navigasi di Atas Artikel atau Posting. Sebelumnya kita sudah otak atik page title sekarang kita uprek yang lainnya seperti menambah Menu Breadcrumb, karena ini juga salah satu dari sekian banyak cara untuk menambah atau meningkatkan SEO template atau blog kita di mata mesin pencari.

Ok, kita langsung praktik aja cara membuat menu Breadcrumb yang SEO Friendly untuk meningkatkan SEO blog.

Sebelum kita mulai, pastikan dulu anda untuk sudah membuat atau mempunyai label pada setiap postingan artikel yang anda buat terlebih dahulu, karena menu breadcrumb berhubungan erat dengan label.

Selanjutnya ke Edit HTML, cari kode:

]]></b:skin>

Setelah ketemu kode tersebut, kemudian letakkan kode berikut ini tepat di atas kode tersebut:

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Setelah itu, cari kode berikut (kalau bingung gunakan Ctrl + F untuk mempercepat pencarian):

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

Kalau sudah ketemu, hapus kode tersebut dan ganti dengan kode berikut ini:

<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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</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'/>

Selesai, jangan lupa Save Template dan lihat hasilnya.

Untuk Demonya, bisa anda lihat di blog ini, karena breadcrumb yang ada di blog Uji SEO ini sama persis hasilnya dengan apa yang diterapkan dengan cara tersebut di atas.

sumber kode