Cara Membuat Breadcrumbs SEO Friendly dan Valid HTML5

Cara Membuat Breadcrumbs SEO Friendly dan Valid HTML5  - Tim Kontes, Semakin berganti algoritma google pada mesin pencari hingga semua struktur penilaian bermunculan dan beredar di internet. Dan banyak ide-ide agar blog seo friendly hingga mengatur Teknik Menulis Artikel SEO Friendly Sesuai Dengan Hummingbirds Algorithm dan memeriksa kekurang template seperti Cara Menghilangkan Error pada Google Rich Snippet Testing Tool. Nah tidak akan habis habis merombak blog menjadi seo friendly, valid HTML5 hingga tampilan yang responsive.

Jadi kali ini kami akan ngebahas mengenai bagaimana langkah yang akan kita terapkan supaya breadcrumbs pada blog kita SEO Friendly dan tentunya valid HTML5, jadi anda tidak sabar untuk mengetahui bagaimana caranya ? untuk itu silahkan anda ikuti panduan dari tim kontes yakni sebagai berikut :

Langkah Pertama : Cari kode ]]></b:skin> kemudian ambil kode dibawah dan pastekan diatasnya.

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

Langkah Kedua : Silahkan anda cari kode <b:includable id='main' var='top'> kemudian ganti dengan kode dibawah 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'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></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 simpan template anda dan silahkan cek hasilnya di Rich Snippet Tool. Namun jika blog anda sebelumnya sudah menerapkan

langkah membuat breadcrumbs namun tidak seo friendly maka ikuti panduan berikut ini kami paparkan untuk anda semua Jika anda sudah menerapkan sebelumnya silahkan cari kode berikut :

<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>

Kemudian gantikan dengan kode berikut :

<div class='breadcrumbs'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> <b:loop values='data:post.labels' var='label'> &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

Setelah itu silahkan simpan template anda dan nikmati perbedaannya pada blog anda nantinya, semoga dengan Cara Membuat Breadcrumbs SEO Friendly dan Valid HTML5  bermanfaat bagi anda. 

Inspirasi : http://blog.kangismet.net

Tweet