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

Cara Membuat Breadcrumbs / Navigasi di atas Postingan di Blogspot/Blogger

Cara membuat breadcrumbs SEO friendly dan semua label terindeks oleh Search Engine.
Cara Membuat Breadcrumbs SEO Friendly. Banyak tutorial yang menjelaskan cara membuat breadcrumbs di Blogspot/Blogger. Kali ini saya akan menjelaskan cara membuat breadcrumbs yang SEO friendly dan semua label terindeks oleh Search Engine.
cara membuat breadcrumbs seo friendly
Breadcrumbs merupakan menu navigasi yang berada di atas judul postingan seperti yang ada di blog saya. Struktur ini tentu berbeda dengan WordPress, yang bisa membuat child category. Struktur di bloger hanya Home kemudian Label. Apabila memiliki beberapa label, maka akan terbaca seperti ini :

Home > Label1 > Label2 > Label3

cara membuat breadcrumbs seo friendly

Cara Membuat Breadcrumbs SEO Friendly

1. Masuk ke Blogger
2. Klik Template > Edit HTML > Lanjutkan
3. Centang Expand Template Widget
4. Cari kode ]]></b:skin> dan simpan kode ini diatasnya:
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}
5. Cari kode <b:includable id='main' var='top'>, 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' 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>
</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'/>
6. Simpan Template Anda.

Untuk mengeceknya silahkan kunjungi :

http://www.google.com/webmasters/tools/richsnippets

Untuk mencoba apakah tampil beberapa label, copy postingan Anda yang mempunya label lebih dari 1. dan klik Pratinjau. Kalau sudah berhasil berarti breadcrumbs terpasang dengan baik.

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

130 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. assalam kang..
    saya mau nanyak ne.. tapi melenceng dari judul diatas..
    saya tanya:
    bagai mana memasang widget sidebar dibagian bawa seperti kang itu, maksudnya yang discrol ke bawa widgetnya mengikut ke bawa seperti witget tombol like, +G, dan like gacebook itu.. mohon ya kang..
    1. coba menjawab ahh,,kayaknya tinggal dikasih style CSS float dech bro...
  2. wahh kang beda pendapat dengan kang dendy coba baca ini...
    http://under-88.blogspot.com/2012/06/akibat-breadcrumbs-label-terindex.html
    1. Memang ada beberapa pendapat tentang breadcrumbs ini, saya sih yakin kalau breadcrumbs itu mempengaruhi SEO, solanya sebelum posting saya baca ini..
      http://usabilitygeek.com/12-effective-guidelines-for-breadcrumb-usability-and-seo/
      hayoh pilih mana? :)
  3. kang mau tanya mumpung sekarang lagi nongol,,bisa buat menu navigasi kayak di FB gk?? yg menu hovernya muncul saat di scroll ke bawah,,yg menunya profil,kronologi,dan waktu,,
    1. yang dipinggir bukan? harus trial n error dulu sob :)
  4. Kang, kalau blog saya sudah ada breadcrumbs-nya..trus mau pasang kayak punya akang diatas itu gimana caranya?
    Apa yang lama dihapus dulu? kalau ya..cara hapusnya gimana ya, kang? Maksudna yang mana aja yg kudu di hapus?

    Makasih sebelumnya :)
    1. harus tau dulu susunannya sob, nanti kalau sembarang hapus bisa error template nya..
  5. makasih tutorial'a sob..
    1. sama-sama sob, smoga bermanfaat
  6. Mampir dan menyimak thx
    1. Makasih udah mampir, maaf ga dikasih kopi :)
  7. ikutan nyimak aja deh debatnya :D
    1. bukan debat ko.. berbagi aja.. hehe
  8. Lebih SEO Friendly ya kang, langsung dicoba kang :)

    Oy thread comment kang ismet dari blogeritems lagi atau bukan
    keren :D
    1. katanya sih lebih seo friendly sob... :) iya vinalup ruler kalau ga salah
  9. Terima kasih Kang.Saya udah menerapkannya :)
  10. Hehehehehe emmmm kalau di wordpress bisa kagak ya? Langsung terindex?
    1. Kalau WP banyak pluginnya biasanya sob :)
  11. Trima kasih mas..berhasil :)
  12. ane udah buat breadcrumbs tapi belum keindex google , soalnya breadcrums nya beda sama tutorial yang ini gimana ya cara gantinya?
    1. ngambil tutorialnya dimana? atau bisa kirim kode HTML nya?
  13. supaya gak terindex gimana caranya ya kang o.O
  14. breadcrumbs punya saya bawaan dr themplate. saya mau ganti sprt punya kang ismet. gmn ya kang cara gantinya? soalnya saya cari ga ada code breadcrumbs d themplate saya. mohon bantuanya kang... makasih.
    1. wah... harus tau kode htmlnya sob...
  15. ijin praktekin kang ismet, sangat membantu.
    salam kenal dan sukses selalu buat blognya.
  16. LOhh kangg, bukannya breadcrmbs tidak baik untuk SEO blog?

    Kan fitur permalink terbuang sia-sia klo gitu.
    1 lagi keyword yang dicari sewaktu di Search Engine kan jadi 2 bagian (post title dan deskripsi)dengan make breadcrumbs.
    Klo gag make breadcrumbs yah jadi 3 bagian lengkap (post title, breadcrumbs dan deskripsi).

    Tolong balasannya Mas.
    1. Post title, URL link dan deskripsi mksud saya.

      (Link hidup dibloh yah!!!)
  17. Mksudnya doble gimana kang?

    Mkasud saya adalah (kita berandai sudah ada di SE).

    Kita lihat pada gambar postingan ini, teks bold adalah keyword yang tersesuaikan dengan keyword yang telah dicari oleh Google dengan 2 bagian.
    1. Post title
    2. Deskripsi Blog

    Jika tidak menggunakan breadcrumbs yahh pasti itu SANGAT BAIK SEO-nya karena Google mencari 3 bagian :
    1. Post title
    2. Link
    3. Deskripsi

    atau, secara nyata saja kita ngomong kang Ismet. Pemenang-pemenang kontes SEO adalah rata2 yag tidak menggunakan breadcrumbs!!!

    Jadi gimana lagi menurut pendapat kang Ismet?

  18. temlplate yang Kang Ismet Buat juga udah ready breadcrumbs Seo Friendly gak kang??
    1. Suadah saya sertakan sob...
  19. Izin nyoba sob , mantep nih !!
  20. Thank's informasinya bermanfaat banget... http://boltim.blogspot.com/
  21. Thank's infonya kang...
    akan saya terapkan di blog saya
  22. makasih kang mas tipsnya, salam kenal dari bloger pemula..
  23. ma kasih gan infonya ,,nya,,,,tentang menjelaskan cara membuat breadcrumbs yang SEO,terima kasih
  24. kang mohon ijin buat copass..sumber terlampir...makasih m(_ _)m
  25. Makasi Infonya sangat bermanfaat, sudah ku terapkan di blog saya www.bmatindas.com dan berhasil
  26. makasih kang ismet, baru pasang langsung ke index breadcrumbs nya..
  27. Ijin share di blog saya kang Ismet :D
    1. silahkan sob :)
  28. saya sudah coba dan berhasil sob
    maasi infonya yaaa

    silakan lihat blog saya dan kasih masuan kalau ada waktu

    :D
    1. sama2 sob... semoga bermanfaat
  29. pantesan dari tadi gak bisa, ternyata pake kode... hehehe maklum newbie... di coba nih ah... moga2 berhasil, amin
    1. Emang asalnya gimana sob? :) sok mangga silahkan dicoba semoga berhasil
  30. kira-kira berpa lama yak.??
    breadcrumbs kita bisa terindex oleh om google.??
    1. tergantung postingan kita diindex oleh google berapa lamanya sob...
  31. Saya cari kode diatas pada template saya kenpa ga ada ya,yg ada malah seperti ini



    sama aja ga kang? Ini pakai templatenya blogjuragan yg thesis. Thx.
    1. b:includable id='main' var='top'

      sama dengan yg ini?

      b:section class='main' id='main' showaddelement='no'
  32. makasih gan :D , terpasang sudah .. hehe
  33. Alhamdulillah,setelah saya coba ternyata berhasil. terima kasih mas.
  34. Anonim
    Komentar ini telah dihapus oleh pengarang.
  35. Mantap tipsnya bro, sangat bermanfaat... berhasil di pasang di Blog saya...

    http://www.bmatindas.com
  36. Manteb nih informasinya gan. ane terapin di blog ane langsung jadi. Thanks ya :)
  37. trima kasih infonya saya coba dulu kang..
  38. Wah bisa buat meningkatkan seo blog saya nih :)
  39. bingung juga ya.. ada yg bilang jelek, ada yg bilang bagus,,,
  40. wah..., makasih banyak kang. sudah saya coba...
    dan berhasil mulus hehehe..


    salam kenal
  41. Saya ketemu postingan tentang membuat breadcrumb di tempat lain tetapi belum berhasil, namun sekarang ketemu lagi di postingan blog KangIsmet dan syukurlah sudah berhasil. Terima kasih ya :)
  42. Kang, maaf keluar dari pembahasan :)
    Cara buat daftar isi kayak blog ini udah dishare blon yah? kalo belon request dong kang hihihi
  43. assalamualaikum kang
    saya newbie kang
    barusan saya nyoba trik dari kang ismet di atas
    tapi ada pemberitahuan kaya di bawah ini kang

    Peringatan: Missing required field "updated"

    dan pengarang belum diverifikasi

    mohon bantuannya kang
  44. waduh kang, saya koq gak muncul? heee
    1. coba gan mungkin menu "" ada 2, pilih yang nomor 2,
  45. Sukses mas bro, ijin sedot untuk di coba di blog saya ya mas bro http://cherylaghniads.blogspot.com/
    trims
  46. kanh ismet, aku tertarik nih pke breadcumbs, tp saya udah ngikuti apa yang kang ismet posting di atas setelah saya simpen kok errot ya mas..muncul peringatan kayak gini " The widget with id "Blog1" cannot contain element: "#text". A widget can only contain b:includable elements."

    tolong bantuannya kang..
    salam satu-entry blog
  47. Makasih infonya kang,, sangat berguna sekali
  48. Terima kasih infonya Kang, cuma sekarang jadi bingung untuk menghapus breadcrumbs bawaan template, gimana caranya? Monggo di cek di http://mitrabisnis-edu.blogspot.com/2013/01/bank-mandiri-bank-terbaik-di-indonesia.html sekalian ikut comment untuk sumbang sarannya. Terima kasih...
  49. makasih mas lumayan bisa ane pasang di blog yang sesederhana ini
  50. makasih mas .. blog saya jadi lebih bagus.. ditunggu kunjungannya
  51. Hanya Ingin Berkunjung Mas ..
    Artikel Bagus
  52. Terima kasih kang.
    Ilmu Cara Membuat Breadcrumbs sudah saya praktekkan di blog saya dan berhasil.

    Nb.
    Setelah lihat daftar isi blog kang ismet, saya mendapatkan banyak ilmu terkait dengan blogger dan seo.
    Sekali lagi terima kasih atas ilmunya kang. Semoga kebaikan tercurah kepada kang ismet.
  53. makasi kang ismet, ini yg saya cari
    kang, kalo mau cepet dapat pagerank gimana yaa??
  54. makasih kang.. sangat bermanfaat :)
  55. yapp, saya sudah pasang ini kang!
  56. dulunya sangat susah masangnya ini, tapi setelah belajar dan belajar,..
    akhirnya ane busa masang sendiri gan,.. heheh thanks
  57. download games di tempat ane yh kang
  58. caranya terbukti. berhasil dipasang di blog saya. thx kang ismet.
  59. Terus bljah biar bsa mhir kyak om is... :)
  60. terimakasih ilmunya :)
  61. danu
    Komentar ini telah dihapus oleh pengarang.
  62. Juga ke Index Google ya kang ??

    =► http://www.adadeny.com/
  63. Tutorial yang sangat bermanfaat gan,... sangat membantu saya dalam proses editing blog blog ane gan,. ternyata kalau mau memahami tidaklah sesulit seperti apa yang dikatan oleh orang2,. salam kenal dari http://jawacyber.blogspot.com
  64. tutorial yg sgt lengkap...sangat membantu sy utk edit blog...
  65. mantap sob tutorialnya,.. ijin praktek sob untuk blog ane,... salam kenal dari ane,..
  66. Blog nya makin berat ae kang
  67. oh ternyata itu breadcrumbs? ane penasaran dan jumpanya di blog ente :D

    http://321hacked.blogspot.com/
  68. kang saya baru gani templete ni,
    pas pasang breadcrumbs di atas, jd nya double kang :(

    cara hilangin salah satu gmna kang? (bawaan template)
    coba cek blog saya ini kang

    http://yori-skipper.blogspot.com/
    1. udah biasa ya.. sorry baru dibales.. soalnya tadi keluar
  69. Apakah jika label keindeks google, tidak akan terjadi duplikat title tag di webmaster tool kang?. Sebenarnya sih saya masih bingung dengan hal ini. Dulu saya pernah pasang, tapi tiba2 duplikat title tagnya itu banyak banget, padahal sebelumnya tidak ada, padahal di edit html sudah di pasang meta tag nofollow, no index, dan juga dengan menggunakan robots.txt, tapi tiap hari bertambah terus duplikatnya. Anehnya meski duplikatnya banyak, tapi pengunjung blog juga naik 300%. Tapi saya semakin bingung, ternyata duplikat title tag semakin banyak yang didasarkan pada label. Contoh duplikat title tagnya:

    hxxp://-------.blogspot.com/search/label/Mp3-Dangdut
    hxxp://-------.blogspot.com/search/label/Mp3-Dangdut?updated-max=2011-11-27T13:11:00-08:00&max-results=20&start=1&by-date=false
    hxxp://-------.blogspot.com/search/label/Mp3-Dangdut?updated-max=2011-11-27T13:11:00-08:00&max-results=8&start=10&by-date=false
    hxxp://-------.blogspot.com/search/label/Mp3-Dangdut?updated-max=2…
    1. Alamak... pertanyaanya lebih panjang dari artikelnya... :)
      Tunggu jawaban Kang Ismet Sob.....
    2. 1. menurut saya tidak juga sob, itu karen label yang terindeks bukan bredcrumbs
      2. takutnya dihapus dari pencarian
      3. labelsebaiknya tidak terindex

      secara keseluruhan, menurut saya bisa diatasi dengan robots.txt, coba gunakan robots.txt seperti ini

      User-agent: Mediapartners-Google
      Disallow:

      User-agent: *
      Disallow: /search?updated-min=
      Disallow: /search?updated-max=
      Disallow: /search/label/*?updated-min=
      Disallow: /search/label/*?updated-max=
      Allow: /

      Sitemap: http://namablog.blogspot.com/feeds/posts/default?orderby=updated
  70. kang, tu penjelasan tentang blogspot semua, masih bingung plus ngeres otak saya, yang tutorial buat wp. da gak kang. karna punya ane web. dah nyari plagin yang persis blm ketemu. swun monggo dikomentari.
  71. kang ismet saya mau tanya ..
    bagaimana cara membuat breadcumbs agar tidak terindeks .???
    trima kasih
  72. Setiap hari sy selalu belajar dari blog ini dan banyak pemahaman tentang blog yg sy dapat... ;)
    ► http://daeng-seo.blogspot.com/
  73. kang kalo mau buat breadcrumbnya waktu di search engine menggunakan label gimana kang? seperti blog akang ini :( soalnya ga ketemu2 dari kemarin
  74. makasih mas tutornya
  75. suwon kang ismet..
  76. Unknown
    Komentar ini telah dihapus oleh pengarang.
  77. Terimakasih share ilmunya, sudah saya pasang
  78. Kang, tipe breadcrumbs kyk gini kan gak terindex di google. Apa breadrcumbs ini bener2 SEO ?
  79. Wih Breadcumb Nya Bagus Kang.Apakah Sudah Seo Atau Belum Kang?
  80. mas kok gak bisa yah ? mas kasih caranya agar bisa yah

    terima kasih
    1. bisa-bisa. :)
  81. keren bgt si akang..,
  82. LAPORAN

    Sudah diterapkan dan SUKSES!

    :D
  83. Mantap Kang, terima kasih. :)
  84. thank's infonya kang, mampir sini kang http://khususgaming.blogspot.com/
  85. thank you so much kang ismet, sekarang breadcrumb saya udah nongol di mbah google :-bd
  86. Guardian Ramadhan
    Komentar ini telah dihapus oleh pengarang.
  87. kang bantu ane, breadcrumbsnya sudah berhasil ane pasang tetapi kok muncul dua di atas judul postingan sama di atas footer. mohon kiranya dibantu http://indukagraris.blogspot.com/2012/09/cara-menanam-tomat-rempai.html
  88. ijin belajar dan dicoba berhasil, terimakasih
  89. kang di blog ane http://id-penulis.blogspot.com jadi double breadcrumbs seperti ini kang iOS 7 › Soliloquy › Soliloquy › iOS 7

    tolong bisa di bantu kang. biar fix
  90. Kang kalo breadcrumbs bawaan template yang saya pakai ini kira2 sudah SEO friendly belum ya? mohon pencerahanya kang blog saya ini kang, www.mandirikonveksi.com (semoga berkenan membantu) Trim
  91. thenk`s infonya gan sangat membantu nhy
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.