CARA MEMASANG BREADCRUMBS SEO FRIENDLY

Breadcrumbs

Cara Memasang dan Membuat Breadcrumbs SEO Friendly Pasti diantara temen-temen sudah ada yang tahu atau mungkin ada yang belum tahu sama sekali tentang cara membuat breadcrumbs di Blogspot/Blogger.

Kali ini saya akan mencoba memperjelaskan cara membuat breadcrumbs yang SEO friendly dan semua label terindeks oleh Search Engine.

Breadcrumbs yang merupakan menu navigasi yang berada tepat di atas judul postingan seperti yang ada di blog. Struktur ini tentu berbeda dengan WordPress, atau yang lainnya. Struktur di bloger hanya ada Home kemudian Label. Apabila jika blog temen-temen memiliki beberapa label, maka akan terbaca seperti gambar dibawah ini :

Contoh breadcrumbs

Cara Memasang dan Membuat Breadcrumbs SEO Friendly

• Masuk ke Blogger
• Klik Template > Edit HTML > Lanjutkan
• Centang Expand Template Widget
• Cari kode ]]></b:skin> dan simpan kode ini diatasnya:

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

• Cari kode <b:includable id='main' var='top'>, ganti dengan kode di bawah 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'>
&#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'/>

Kemudian save template temen-temen. Semoga dengan artikel Cara Membuat Breadcrumbs SEO Friendly ini bermanfaat untuk temen-temen. Baca juga cara membuat anchor text alami dan seo.