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 yaitu supaya url postingan yang ada di search engine tidak ditampilkan dan akan terlihat lebih rapih alasannya yaitu hanya menampilkan label saja.
Berbicara soal Breadcrumbs, microdata yang akan saya bagikan ini sudah SEO Friendly dan Valid HTML5. Berikut screnshotnya :
Nah, untuk kau 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 aba-aba ini di atasnya
4. Berikutnya cari aba-aba <b:includable id='main' var='top'> lalu ganti dengan aba-aba dibawah ini:
5. Simpan template
Breadcrumbs pada search engine akan muncul sekitar 3 - 5 hari. Jika sebelumnya kau pernah memasang Breadcrumbs, kau lepas dan ganti dengan aba-aba diatas supaya aba-aba tidak bentrok. Sumber http://www.websiteedukasi.com/
Baru-baru ini aak-share.com memasang Breadcrumbs tujuannya yaitu supaya url postingan yang ada di search engine tidak ditampilkan dan akan terlihat lebih rapih alasannya yaitu hanya menampilkan label saja.
Berbicara soal Breadcrumbs, microdata yang akan saya bagikan ini sudah SEO Friendly dan Valid HTML5. Berikut screnshotnya :
Nah, untuk kau 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 aba-aba 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 aba-aba <b:includable id='main' var='top'> lalu ganti dengan aba-aba dibawah ini:
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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'>
» <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>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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 kau pernah memasang Breadcrumbs, kau lepas dan ganti dengan aba-aba diatas supaya aba-aba tidak bentrok. Sumber http://www.websiteedukasi.com/