Breadcrumbs SEO Friendly dan Valid HTML5
Breadcrumbs SEO Friendly dan Valid HTML5 - Masih berbicara seputar validasi HTML5, diantara komponen agar postingan valid HTML5 adalah breadcrumbs. Script yang akan saya bagikan, tidak hanya blog yang valid HTML5 saja yang bisa menggunakan. Bagi sobat yang tidak peduli dengan validasi pun bisa menggunakan kode yang saya bagikan.
Sebenarnya, pada postingan sebelumnya (baca: Cara Membuat Breadcrumbs / Navigasi di atas Postingan di Blogspot/Blogger) itu sudah SEO Friendly, akan tetapi belum valid html5.
Lantas apa bedanya script sebelumnya dan yang sekarang? Sebetulnya sama kodenya, namun dalam format penulisan, pada tutorial sebelumnya menggunakan markup RDFa sedangkan sekarang menggunakan Microdata. Untuk markup RDFa sendiri tidak valid HTML5. Bingung dengan RDFa dan Microdata? Insya Allah akan saya bahas pada tutorial selanjutnya.
Namun secara singkat, markup HTML RDFa biasanya menggunakan kode kurang lebih seperti ini :
kode inilah yang membuatnya tidak valid html5.
Kembali lagi kepada tutorial Cara membuat breadcrumbs SEO friendly dan valid html5, bagi sobat yang ingin menerapkan, silahkan simak langkahnya :
Langkah 1 : Simpan kode ini di atas
Langkah 2 : Cari kode
Saya sudah menerapkan kode sebelumnya? mana yang harus diedit?
Apabila sobat sudah menerapkan breadcrumbs pada artikel sebelumnya, silahkan cari kode seperti ini :
ganti dengan kode ini :
Semoga bermanfaat...
Sebenarnya, pada postingan sebelumnya (baca: Cara Membuat Breadcrumbs / Navigasi di atas Postingan di Blogspot/Blogger) itu sudah SEO Friendly, akan tetapi belum valid html5.
Lantas apa bedanya script sebelumnya dan yang sekarang? Sebetulnya sama kodenya, namun dalam format penulisan, pada tutorial sebelumnya menggunakan markup RDFa sedangkan sekarang menggunakan Microdata. Untuk markup RDFa sendiri tidak valid HTML5. Bingung dengan RDFa dan Microdata? Insya Allah akan saya bahas pada tutorial selanjutnya.
Namun secara singkat, markup HTML RDFa biasanya menggunakan kode kurang lebih seperti ini :
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
kode inilah yang membuatnya tidak valid html5.
Kembali lagi kepada tutorial Cara membuat breadcrumbs SEO friendly dan valid html5, bagi sobat yang ingin menerapkan, silahkan simak langkahnya :
Langkah 1 : Simpan kode ini di atas
]]></b:skin>
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}
Langkah 2 : Cari kode
<b:includable id='main' var='top'>
kemudian ganti dengan :<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'/>
Saya sudah menerapkan kode sebelumnya? mana yang harus diedit?
Apabila sobat sudah menerapkan breadcrumbs pada artikel sebelumnya, silahkan cari kode seperti ini :
<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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
ganti dengan kode ini :
<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>
Semoga bermanfaat...
96 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Kami tidak dapat menyimpan template Anda.
Template Anda tidak dapat diuraikan karena template tidak terbentuk dengan baik. Pastikan semua elemen XML ditutup dengan benar. pesan kesalahan XML:
The widget with id "" cannot contain element: "#comment". A widget can only contain b:includable elements.
Kemaren2 saya pasang breadcrumb yang satunya lagi, tapi pas cek di validator error. Iseng2 saya kembali kemari dan ternyata ada juga yang udah valif HTML5
OOT: Request buat error rel='service.post' dong. Saya belum nemu solusi yang bagus nih.
Terima kasih
http://diaz-zahran-asyari.blogspot.com/2013/08/cara-mengatasi-widget-with-id-blog1.html
apa maksudnya spt ini : navigasi hanya muncu di homepage, dan posisi navigasi diganti breadcrumb pada postingan?
diambang kebingungan
<i rel="pre">isi kode</i>
pas saya cari dua baris kode diatas, ketemu, tapi tempatnya jauh banget. pas saya hapus satu persatu, gagal mas... cara mengembalikan seperti semula gimana bang? mohon penjelasan,,,
terima kasih kang
makasih om..
saya ganti dengan yg ini breadcrumbs nya
terima kasih kang ismet
Home » Posts filed under Urban Legend
minta solusinya kang.
yang saya maksud adalah bagaimana jika label diklik dan dapat menyebunyikan tulisan ini?
Home » Posts filed under Urban Legend
atau ang ismet meluncur ke TKP sebentar
mlah ada kata2 ini nih :
The widget with id "Blog1" contains at least two b:includable elements with the same id: "main". All b:includable elements should have a unique id for a given widget.
tlong bntuannya kang ismet...
<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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
gmn ya kang ?
titip kang : http://mestiqui.blogspot.com/
bagasi mana cara menggati tampilan daftar postingan di homepage?
saya ingin mengganti seperti blog : http://www.maskolis.com/
saya sudah cari di google tapi gak ada tutorial mengganti tampilan postingan di homepage,mohon dijawab gan :)
updatennya tambah mantab!
#salam damai kang!
urang raosan ahh
dari kemaren ngak bisa masuk2 saya juga bingung mungkin browser saya yang bermasalah..
btw saya pake ya breadcrumbs nya kang ismet.. :)
Mantap..
saya tunggu artikel selajutnya yang masalah valid HTML5
Terima kasih
Yang pasti sangat bermanfaat.
Sekalian terima kasih juga template iklannya..sekarang sdg saya pakai untuk uji coba :)
Trims sebelumnya :)