Cara Membuat Breadcrumbs / Navigasi di atas Postingan di Blogspot/Blogger
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.
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 :
2. Klik Template > Edit HTML > Lanjutkan
3. Centang Expand Template Widget
4. Cari kode
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.
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
1. Masuk ke Blogger2. 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 == "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' 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> </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'/>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.
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..
coba menjawab ahh,,kayaknya tinggal dikasih style CSS float dech bro...
wahh kang beda pendapat dengan kang dendy coba baca ini...
http://under-88.blogspot.com/2012/06/akibat-breadcrumbs-label-terindex.html
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? :)
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,,
yang dipinggir bukan? harus trial n error dulu sob :)
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 :)
harus tau dulu susunannya sob, nanti kalau sembarang hapus bisa error template nya..
makasih tutorial'a sob..
sama-sama sob, smoga bermanfaat
Mampir dan menyimak thx
Makasih udah mampir, maaf ga dikasih kopi :)
ikutan nyimak aja deh debatnya :D
bukan debat ko.. berbagi aja.. hehe
Lebih SEO Friendly ya kang, langsung dicoba kang :)
Oy thread comment kang ismet dari blogeritems lagi atau bukan
keren :D
katanya sih lebih seo friendly sob... :) iya vinalup ruler kalau ga salah
Terima kasih Kang.Saya udah menerapkannya :)
Hehehehehe emmmm kalau di wordpress bisa kagak ya? Langsung terindex?
Kalau WP banyak pluginnya biasanya sob :)
Trima kasih mas..berhasil :)
ane udah buat breadcrumbs tapi belum keindex google , soalnya breadcrums nya beda sama tutorial yang ini gimana ya cara gantinya?
ngambil tutorialnya dimana? atau bisa kirim kode HTML nya?
supaya gak terindex gimana caranya ya kang o.O
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.
wah... harus tau kode htmlnya sob...
ijin praktekin kang ismet, sangat membantu.
salam kenal dan sukses selalu buat blognya.
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.
Post title, URL link dan deskripsi mksud saya.
(Link hidup dibloh yah!!!)
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?
Komentar ini telah dihapus oleh Anonim sebagai penulis.
temlplate yang Kang Ismet Buat juga udah ready breadcrumbs Seo Friendly gak kang??
Suadah saya sertakan sob...
Izin nyoba sob , mantep nih !!
Thank's informasinya bermanfaat banget... http://boltim.blogspot.com/
Thank's infonya kang...
akan saya terapkan di blog saya
makasih kang mas tipsnya, salam kenal dari bloger pemula..
ma kasih gan infonya ,,nya,,,,tentang menjelaskan cara membuat breadcrumbs yang SEO,terima kasih
kang mohon ijin buat copass..sumber terlampir...makasih m(_ _)m
Makasi Infonya sangat bermanfaat, sudah ku terapkan di blog saya www.bmatindas.com dan berhasil
makasih kang ismet, baru pasang langsung ke index breadcrumbs nya..
Ijin share di blog saya kang Ismet :D
silahkan sob :)
saya sudah coba dan berhasil sob
maasi infonya yaaa
silakan lihat blog saya dan kasih masuan kalau ada waktu
:D
sama2 sob... semoga bermanfaat
pantesan dari tadi gak bisa, ternyata pake kode... hehehe maklum newbie... di coba nih ah... moga2 berhasil, amin
Emang asalnya gimana sob? :) sok mangga silahkan dicoba semoga berhasil
kira-kira berpa lama yak.??
breadcrumbs kita bisa terindex oleh om google.??
tergantung postingan kita diindex oleh google berapa lamanya sob...
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.
b:includable id='main' var='top'
sama dengan yg ini?
b:section class='main' id='main' showaddelement='no'
makasih gan :D , terpasang sudah .. hehe
Alhamdulillah,setelah saya coba ternyata berhasil. terima kasih mas.
Komentar ini telah dihapus oleh Anonim sebagai penulis.
Mantap tipsnya bro, sangat bermanfaat... berhasil di pasang di Blog saya...
http://www.bmatindas.com
Manteb nih informasinya gan. ane terapin di blog ane langsung jadi. Thanks ya :)
trima kasih infonya saya coba dulu kang..
Wah bisa buat meningkatkan seo blog saya nih :)
bingung juga ya.. ada yg bilang jelek, ada yg bilang bagus,,,
wah..., makasih banyak kang. sudah saya coba...
dan berhasil mulus hehehe..
salam kenal
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 :)
Kang, maaf keluar dari pembahasan :)
Cara buat daftar isi kayak blog ini udah dishare blon yah? kalo belon request dong kang hihihi
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
waduh kang, saya koq gak muncul? heee
coba gan mungkin menu "" ada 2, pilih yang nomor 2,
Sukses mas bro, ijin sedot untuk di coba di blog saya ya mas bro http://cherylaghniads.blogspot.com/
trims
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
Makasih infonya kang,, sangat berguna sekali
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...
makasih mas lumayan bisa ane pasang di blog yang sesederhana ini
makasih mas .. blog saya jadi lebih bagus.. ditunggu kunjungannya
Hanya Ingin Berkunjung Mas ..
Artikel Bagus
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.
makasi kang ismet, ini yg saya cari
kang, kalo mau cepet dapat pagerank gimana yaa??
makasih kang.. sangat bermanfaat :)
yapp, saya sudah pasang ini kang!
dulunya sangat susah masangnya ini, tapi setelah belajar dan belajar,..
akhirnya ane busa masang sendiri gan,.. heheh thanks
download games di tempat ane yh kang
caranya terbukti. berhasil dipasang di blog saya. thx kang ismet.
Terus bljah biar bsa mhir kyak om is... :)
terimakasih ilmunya :)
Komentar ini telah dihapus oleh danu sebagai penulis.
Juga ke Index Google ya kang ??
=► http://www.adadeny.com/
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
tutorial yg sgt lengkap...sangat membantu sy utk edit blog...
mantap sob tutorialnya,.. ijin praktek sob untuk blog ane,... salam kenal dari ane,..
oh ternyata itu breadcrumbs? ane penasaran dan jumpanya di blog ente :D
http://321hacked.blogspot.com/
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/
udah biasa ya.. sorry baru dibales.. soalnya tadi keluar
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…
Alamak... pertanyaanya lebih panjang dari artikelnya... :)
Tunggu jawaban Kang Ismet Sob.....
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
Komentar ini telah dihapus oleh Anonim sebagai penulis.
kang ismet saya mau tanya ..
bagaimana cara membuat breadcumbs agar tidak terindeks .???
trima kasih
Komentar ini telah dihapus oleh musicenv sebagai penulis.
Setiap hari sy selalu belajar dari blog ini dan banyak pemahaman tentang blog yg sy dapat... ;)
► http://daeng-seo.blogspot.com/
kang kalo mau buat breadcrumbnya waktu di search engine menggunakan label gimana kang? seperti blog akang ini :( soalnya ga ketemu2 dari kemarin
makasih mas tutornya
suwon kang ismet..
Terimakasih share ilmunya, sudah saya pasang
Kang, tipe breadcrumbs kyk gini kan gak terindex di google. Apa breadrcumbs ini bener2 SEO ?
Wih Breadcumb Nya Bagus Kang.Apakah Sudah Seo Atau Belum Kang?
Komentar ini telah dihapus oleh Unknown sebagai penulis.
mas kok gak bisa yah ? mas kasih caranya agar bisa yah
terima kasih
bisa-bisa. :)
keren bgt si akang..,
LAPORAN
Sudah diterapkan dan SUKSES!
:D
Mantap Kang, terima kasih. :)
thank's infonya kang, mampir sini kang http://khususgaming.blogspot.com/
thank you so much kang ismet, sekarang breadcrumb saya udah nongol di mbah google :-bd
Komentar ini telah dihapus oleh Guardian Ramadhan sebagai penulis.
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
ijin belajar dan dicoba berhasil, terimakasih
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
Komentar ini telah dihapus oleh Unknown sebagai penulis.
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
thenk`s infonya gan sangat membantu nhy
Im using blogger for my ecolife website, and using one of blog template from Mas Sugeng (one of my blogger friend recomend this). Did your code work perferctly with my templates?