Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Breadcrumbs SEO Friendly dan Valid HTML5

Cara membuat Breadcrumbs SEO friendly dan valid HTML5 di Blogger / Blogspot
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...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

96 komentar

1. Komentar ini, diurutkan dari yang terbaru
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
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. yaah gagal keduax nih xD
    1. selamat... anda dapat Solar :D
  2. Semuanya tentang HTML5 Cuy ... :D
    1. soalnya masih banyak yang perlu dibahas :) malah diotak masih ada 3-4 artikel lagi tentang validasi html5
    2. ho`oh
  3. kereeeen... tengkyu infonya
    1. sama2 bung..
  4. Trims banget triknya Kang Ismet.
    Sekalian terima kasih juga template iklannya..sekarang sdg saya pakai untuk uji coba :)
    1. Ada yang kelupaan...kalau buat floating navbar/menu di template itu, kira-kira harus tambah apa lagi ya Kang?
      Trims sebelumnya :)
  5. Terima kasih tutorialnya kak akan Angel coba biar breadcrums nya angel jadi seo friendly dan valid dengan html5.
    1. silahkan dicoba :)
  6. Tambah ilmu lagi ni kang,,,
    Yang pasti sangat bermanfaat.
    1. makasih sob kalau bermanfaat
  7. Makin mataf ajah nih kang tutorialna he,,
    1. hehhee... nuhun ki
  8. Alhamdulillah tos update deui hehehehe... mudah2an kenging G+ nu seueur deui hehehe :D
    1. wkwkkwk... error sigana +1 na kang, ujug2 20rb kitu :)
  9. Dapat ilmu lagi, coba dipraktekin Kang Ismet...
    Terima kasih
    1. silahkan kang ferry
  10. punya saya sudah ada kang, tapi ngga tahu juga yah, valid HTML atw ngga....saya bungkus dulu kang scriptnya....
    1. silahkan kang mur..
  11. masalah valid ada 3-4 artikel lagi oleh kang ismet :D
    Mantap..
    saya tunggu artikel selajutnya yang masalah valid HTML5
    1. wkwkwkkw... takutnya banyak yang bosen bahas html5 trus :)
  12. 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.. :)
    1. domain saya expire :)
  13. Tap surantap lah kang ... pokoke seepp !!
    urang raosan ahh
    1. mangga dicobian kang :)
  14. kemarin mati suri kini sudah hidup kembali, hehehe |o| keren dan top deh trik validasinya
    1. wkwkkwk... makasih jeng
  15. makasih kang buat tutor nya :)
  16. mantap kang :), oh iya, kemaren2 ane kunjung ke blog ini kok ga bisa ?
  17. Sip kang, perlahan-lahan mulai mencoba validasi di halaman post. Habisnya dulu bingung ngatasi validasi breadcrum yg gagal mulu. :D
  18. wew mantab kang!
    updatennya tambah mantab!

    #salam damai kang!

  19. bungkus kang ! .. haha mantap , saya masih linglung kang all about HTML5 ! -,-
  20. 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...
    1. 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...
  21. 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 :)
    1. pake tag kondisional, coba cari di gugel "tag kondisional dan cara penggunaannya"
  22. 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/
    1. Oh iya kang, url replace akun ini, dari planetajaib.blogspot.com dipindah ke mestiqui.blogspot.com aja ya kang :D, terimakasih kang
  23. Sudah Seo dan valid html5 lagi hebat banget Kang :)
    1. hehhe... biar kumplit
  24. kang mau tanya, klo blog sudah valid HTML5 apa breadcrumbs nya bawaan blogger harus di ubah lagi?
  25. 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 ?
    1. itu beda lagi, coba hapus dulu breadcrumb yang awal
  26. 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...
  27. 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. "
  28. Kalau tidak salah di HTML5, misal pingin semantic pakai ol li kang :)
  29. 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
    1. di hapus tag kondisionalnya
  30. sip sip kang euy, udah di praktekan dan valid, hanyakal teu terindex di yahoo, bing, microsoft, yandex seperti schema.org breadcrumb
    1. pan diluhur eta aya schemana kang :)
  31. mantap kang
  32. kalo mau naro selain di id='main' var='top' bisa gak kang ?
    1. dicoba aja sob.. soalnya saya belom pernah nyoba :D
  33. di sini udah selesai. Sekarang waktunya pindah ke artikel berikutnya
  34. Salam Kang simak lagi artikelnya.
    saya ganti dengan yg ini breadcrumbs nya
    terima kasih kang ismet
  35. sukses kang
  36. om ismet memang joshhhh.., semua artikel yang ane butuhin ada disini :D
    makasih om..
  37. kang saya , mau tanya , bagaimana cara agar breadcrumbs agar tidak diindeks .....
  38. nambah ilmu bwat saya...
    terima kasih kang
  39. 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,,,
  40. huh kok kodenya ilang dr komentar?
    1. salah nulis kode kali formatnya

      <i rel="pre">isi kode</i>
  41. 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
    1. menurut yang saya baca sih bermanfaat sob... tapi mungkin masih banyak perbedaan
  42. 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.
    1. 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?
  43. kang ismet, sya mau menerapkan cara ini, tapi saya bingung, gimana cara ngeganti breadcrumbs bawaan template johny wuss :((((
  44. Terima kasih atas tutornya kang mas, sekalian mampir sambil muter2 di blog kang ismet
  45. 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.
  46. woke error solved

    http://diaz-zahran-asyari.blogspot.com/2013/08/cara-mengatasi-widget-with-id-blog1.html
  47. 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....
  48. 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
  49. 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.
  50. thank`s infonya
  51. hatur nuhun kang
  52. semua infonya sangat bermanfaat, kereeen gan...
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.