Membuat Breadcrumbs SEO Friendly dan Valid HTML5

Membuat Breadcrumbs SEO Friendly dan Valid HTML5 - Breadcrumbs merupakan microdata yang akan menampilkan struktur label postingan di halaman pencarian Google.

Baru-baru ini aak-share.com memasang Breadcrumbs tujuannya adalah agar url postingan yang ada di search engine tidak ditampilkan dan akan terlihat lebih rapih karena hanya menampilkan label saja.

Berbicara soal Breadcrumbs, microdata yang akan saya bagikan ini sudah SEO Friendly dan Valid HTML5. Berikut screnshotnya :

Nah, untuk kamu yang ingin memasang Breadcrumbs SEO Friendly dan Valid HTML5 di website atau Blog berikut langkah-langkah penerapannya:

1. Login ke akun Blogger
2. Pilih Templtae, Edit HTML
3. Silahkan cari kode ]]></b:skin> dan letakkan kode ini di atasnya

.breadcrumbs{
padding:0px 5px 5px 0;
margin-bottom:0;margin-top:5px;
font-size:13px;
color:#5b5b5b;
border-bottom:0 dotted #bbb;
}

4. Berikutnya 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'/>

5. Simpan template

Breadcrumbs pada search engine akan muncul sekitar 3 - 5 hari. Jika sebelumnya kamu pernah memasang Breadcrumbs, kamu lepas dan ganti dengan kode diatas agar kode tidak bentrok.

Share this post