Membuat Breadcrumbs di Atas Postingan

Jika sebelumnya saya sudah menjelaskan bagaimana caranya membuat judul artikel di blog bisa diklik, kali ini saya akan menjelaskan bagaimana caranya membuat breadcrumbs SEO Friendly di atas judul postingan.

Ketika saya browsing ternyata breadcrumbs merupakan menu navigasi di atas judul postingan yang berpengaruh terhadap SEO. Ketika browsing banyak sekali yang menjelaskan langkah-langkahnya. Pada kesempatan kali ini saya blogger cupu akan menjelaskan langkah-langkah membuat breadcrumbs di atas postingan, berikut adalah langkah-langkahnya.
 

1. Masuk blogger > Template > Edit HTML > centang Expand template widget.

2. Cari kode (biar lebih cepat tekan Ctrl+F) ]]></b:skin> dan simpan kode berikut di atasnya.

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

3. Cari kode <b:includable id='main' var='top'> lalu ganti 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'/>

5. Save Template dan lihat hasilnya.

Untuk mengeceknya silahkan kunjungi:

http://www.google.com/webmasters/tools/richsnippets

dan masukkan link url artikel.

Semoga langkah-langkah membuat breadcrumbs di atas postingan ini bermanfaat.Semoga berhasil ;)

Related:

Search Post

Label :