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

<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 == &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'/>

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'>
&#187; <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'>
  &#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>

Semoga bermanfaat...

96 komentar

selamat... anda dapat Solar :D

Balas

Semuanya tentang HTML5 Cuy ... :D

Balas

kereeeen... tengkyu infonya

Balas

soalnya masih banyak yang perlu dibahas :) malah diotak masih ada 3-4 artikel lagi tentang validasi html5

Balas

Trims banget triknya Kang Ismet.
Sekalian terima kasih juga template iklannya..sekarang sdg saya pakai untuk uji coba :)

Balas

Ada yang kelupaan...kalau buat floating navbar/menu di template itu, kira-kira harus tambah apa lagi ya Kang?
Trims sebelumnya :)

Balas

Terima kasih tutorialnya kak akan Angel coba biar breadcrums nya angel jadi seo friendly dan valid dengan html5.

Balas

Tambah ilmu lagi ni kang,,,
Yang pasti sangat bermanfaat.

Balas

Makin mataf ajah nih kang tutorialna he,,

Balas

intinya: position:fixed; top:0; z-index:999; itu aja sih

Balas

makasih sob kalau bermanfaat

Balas

Alhamdulillah tos update deui hehehehe... mudah2an kenging G+ nu seueur deui hehehe :D

Balas

wkwkkwk... error sigana +1 na kang, ujug2 20rb kitu :)

Balas

Dapat ilmu lagi, coba dipraktekin Kang Ismet...
Terima kasih

Balas

Trims atas jawabannya kang.
Satu lagiiiii aja...untuk membuat navbar jadi tampil memanjang seluruh halaman tanpa dibatasi dengan width:970px itu gimana kang?
Maaf nanya terus :)

Balas

punya saya sudah ada kang, tapi ngga tahu juga yah, valid HTML atw ngga....saya bungkus dulu kang scriptnya....

Balas

z-index itu fungsinya apa kang ?

Balas

coba ganti widht nya dengan auto
widht:auto;

Balas

@greenz: z-index itu untuk menaikan posisi, jadi ketika discroll tetep di atas
@bilik: width:100%; kalau mau ditengah objeknya, tambah margin:0 auto;

Balas

masalah valid ada 3-4 artikel lagi oleh kang ismet :D
Mantap..
saya tunggu artikel selajutnya yang masalah valid HTML5

Balas

Akhirnya nyampai juga kang..
dari kemaren ngak bisa masuk2 saya juga bingung mungkin browser saya yang bermasalah..

btw saya pake ya breadcrumbs nya kang ismet.. :)

Balas

Tap surantap lah kang ... pokoke seepp !!
urang raosan ahh

Balas

kemarin mati suri kini sudah hidup kembali, hehehe |o| keren dan top deh trik validasinya

Balas

makasih kang buat tutor nya :)

Balas

mantap kang :), oh iya, kemaren2 ane kunjung ke blog ini kok ga bisa ?

Balas

Sip kang, perlahan-lahan mulai mencoba validasi di halaman post. Habisnya dulu bingung ngatasi validasi breadcrum yg gagal mulu. :D

Balas

wew mantab kang!
updatennya tambah mantab!

#salam damai kang!

Balas

bungkus kang ! .. haha mantap , saya masih linglung kang all about HTML5 ! -,-

Balas

Kang hari ini ada yang agak aneh...Creating Website dan Mas Template error (berantakan). Mungkin semua yang pakai template Maskolis juga eror. Semua blog demo saya untuk editan template juga error (semuanya pakai dasar Johny Wusss), hanya Kompi Ajaib dan Kompi Side (juga pakai dasar Johny Wusss) yang sudah saya validasi HTML5 tidak error (CSS Reset Blogger disembunyikan) ... Apakah sekarang semua blog harus valid HTML5 (CSS Reset Blogger-nya disembunyikan)? Coba cek sama akang... punten miwarang hehehe...

Balas

Ternyata jawabannya, untuk blog yang menggunakan template Maskolis khususnya atau blog yang tampilannya error/berantakan baru-baru ini padahal blog tidak diapa-apain, coba sembunyikan CSS Reset Blogger-nya... sudah saya coba dan ini berhasil...

Balas

mau tanya,mohon dijawab,,
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 :)

Balas

Wah oke juga nih kang :D tapi sebelum itu saya cek dulu apakah breadcrums blog saya udah valid html5 atau belum, kalau udah ya cara ini disimpan aja :D :D

titip kang : http://mestiqui.blogspot.com/

Balas

Oh iya kang, url replace akun ini, dari planetajaib.blogspot.com dipindah ke mestiqui.blogspot.com aja ya kang :D, terimakasih kang

Balas

wkwkwkkw... takutnya banyak yang bosen bahas html5 trus :)

Balas

saya buka normal2 aja kang.. apa ada gangguan massal gitu ya?

Balas

pake tag kondisional, coba cari di gugel "tag kondisional dan cara penggunaannya"

Balas

sip sob.. blom smpet buka2 script itu lagi :)

Balas

benar kang .. template saya saja tadi beberapa waktu buka pake chorme jadi agak aneh tampilannya .. malahan saya kalang kabut dibuatnya .. setelah saya periksa pada htmlnya oke-oke saja .. semua ukuran masih tetep sama , tapi ko jadi aneh ..entahlah karena sekarang sudah kembali normal !!

Balas

Sudah Seo dan valid html5 lagi hebat banget Kang :)

Balas

kang mau tanya, klo blog sudah valid HTML5 apa breadcrumbs nya bawaan blogger harus di ubah lagi?

Balas

kalo bcra msalah blog atau html5 g ada bosennya kang...
sllu update trs artikelnya kang..

Balas

Kang, kalau tidak ada kode <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>


gmn ya kang ?

Balas

itu beda lagi, coba hapus dulu breadcrumb yang awal

Balas

kang ismet, kok gk bisa y...???
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...

Balas

Kok ane gagal ya kang .. dan ada tulisan seperti ini " Tidak dapat memuat pratinjau template: The widget with id "Blog1" contains at least two b:includable elements with the same id: "breadcrumb". All b:includable elements should have a unique id for a given widget. "

Balas

Kalau tidak salah di HTML5, misal pingin semantic pakai ol li kang :)

Balas

kang, baru2 ini saya mencoba pasang, namun saya menemui sebuah kendala, saat label di klik, kok ada muncul
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

Balas

sip sip kang euy, udah di praktekan dan valid, hanyakal teu terindex di yahoo, bing, microsoft, yandex seperti schema.org breadcrumb

Balas

di hapus tag kondisionalnya

Balas

pan diluhur eta aya schemana kang :)

Balas

satu lagi dari saya , untuk memperbesar tulisannya agar terlihat lebih besar , bagaimana ya kang ??

Balas

rubah font-size menjadi 12px, atau 13px dst pada kode ini
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Balas

ok , terima kang , maaf ngerepotin dgn bermacam pertanyaan ?? :)

Balas

kalo mau naro selain di id='main' var='top' bisa gak kang ?

Balas

dicoba aja sob.. soalnya saya belom pernah nyoba :D

Balas

di sini udah selesai. Sekarang waktunya pindah ke artikel berikutnya

Balas

Salam Kang simak lagi artikelnya.
saya ganti dengan yg ini breadcrumbs nya
terima kasih kang ismet

Balas

nanya lagi kang, kalo pake ini label yang terindex satu label aja atau semuanya ?

satu lagi ya kang :D

schema yang ini "http://schema.org/NewsArticle" buat blog yang nichenya berita ya kang, kira kira kang ismet tau gak masalah tentang per schema-an ini :)

Balas

om ismet memang joshhhh.., semua artikel yang ane butuhin ada disini :D
makasih om..

Balas

kang saya , mau tanya , bagaimana cara agar breadcrumbs agar tidak diindeks .....

Balas

nambah ilmu bwat saya...
terima kasih kang

Balas

mas, breadcrumb saya udah ada dr tmpalte bawaan, tapi cra diatas sy terapkan juga, cra ngilanginnya gmana? saya udah coba, kode yg ditaruh diatas ]]> udah sy hapus, tapi kode yang diletakkan sebagai pengganti sudah hilang sebagian, bagian yang hilang adalah:




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

Balas

huh kok kodenya ilang dr komentar?

Balas

salah nulis kode kali formatnya

<i rel="pre">isi kode</i>

Balas

saya masih bingung sebenernya breadcrumbs itu seo apa gak, kata MBT breadcrumb gak begitu berguna kalo cuma untuk beberapa sub category kecuali toko online yang punya banyak subcategory.
diambang kebingungan

Balas

menurut yang saya baca sih bermanfaat sob... tapi mungkin masih banyak perbedaan

Balas

here kang... -> :(

http://blog.kangismet.net/2013/12/membuat-header-image-logo-valid-html5.html?showComment=1388102112025#c8486492627827621519

Balas

nih kang http://www.mybloggertricks.com/2012/10/breadcrumbs-effect-site-seo.html

Balas

kang kalo bisa request dong, saya pake template standar jose peterson, saya pengen laman tidak tampil di single pos, sebagai gantinya kolom laman tersebut terdapat breadcrumb, jadi posisi breadcrumb tampil di bawah header(posisi laman) dan hanya tampil di single pos, sebaliknya laman hanya tampil di homepage, ini blog sederhana saya indosata,blogspot,com. semoga kang ismet bisa bantu.

Balas

saya bingung memahaminya.. laman tidak tampil di single post.. dst..
apa maksudnya spt ini : navigasi hanya muncu di homepage, dan posisi navigasi diganti breadcrumb pada postingan?

Balas

iya kang persis seperti tersebut, mungkin kang ismet bisa bantu, saya masih belum menguasai script.

Balas

kang ismet, sya mau menerapkan cara ini, tapi saya bingung, gimana cara ngeganti breadcrumbs bawaan template johny wuss :((((

Balas

Terima kasih atas tutornya kang mas, sekalian mampir sambil muter2 di blog kang ismet

Balas

Kang mau tanya.. kalau di blog saya umpama memilih kategori/label kok ada navigasi breadcrumbsnya juga yah, seperti ini "Home » Posts filed under Acha Septriasa". seharusnya kan munculnya cuma ada di halaman artikel. tolong dibantu kang.. terimakasih.

Balas

woke error solved

http://diaz-zahran-asyari.blogspot.com/2013/08/cara-mengatasi-widget-with-id-blog1.html

Balas

selama ini saya pakai bawaan dari johny wuss, sekarang saya coba pakai yang ini dengan edit cara kedua yang kang ismet berikan, mudah2an hasilnya memuaskan heheh thanks ya kang atas tutorialnya....

Balas

Mantap kang!

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

Balas

Pengen pake template deposith photos, rencana dikasi breadcrumbs ini tapi keluar
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.

Balas

semua infonya sangat bermanfaat, kereeen gan...

Balas

Poskan Komentar


×
Chat