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.

137 komentar

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

Balas

wahh kang beda pendapat dengan kang dendy coba baca ini...
http://under-88.blogspot.com/2012/06/akibat-breadcrumbs-label-terindex.html

Balas

coba menjawab ahh,,kayaknya tinggal dikasih style CSS float dech bro...

Balas

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? :)

Balas

Campuran sama JS juga sob... buat Ervanda nanti saya posting deh :)

Balas

wahh jadi bingung kang,,??@#$%^?*^

Balas

silahkan buat breadcrumbs menurut kepercayaan masing2.. :D

Balas

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

Balas

yang dipinggir bukan? harus trial n error dulu sob :)

Balas

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

Balas

ikutan nyimak aja deh debatnya :D

Balas

kayak gambar ini kang..
https://lh3.googleusercontent.com/-co5caPzcZ9E/UH-XVQRecuI/AAAAAAAAByQ/xWldxFq0HSI/s979/Untitled.png

Balas

Lebih SEO Friendly ya kang, langsung dicoba kang :)

Oy thread comment kang ismet dari blogeritems lagi atau bukan
keren :D

Balas

Kalau ini pake 'autohide', kayak tombol back to top... kurang lebih scriptnya kaya gini,silahkan disempurnakan :

$(window).scroll(function() {
if($(this).scrollTop() > 187) {
$('#fbmenu').slideDown();
} else {
$('#fbmenu').hide();
}
});
$('#fbmenu').hide().click(function() { $('html, body').animate({scrollTop:0}, 100); return false; });


artinya, ketika discroll 187px maka akan turun secara slide, dan apabila kurang dari itu, di sembunyikan...

CSSnya kaya gini :

#fbmenu {position:fixed !important;position:absolute;top:0;margin:0 auto;margin-left:30px;z-index:999;
}


hasilnya kaya http://agenpulsapln.blogspot.com/2012/10/lorem-ipsum.html

Balas

katanya sih lebih seo friendly sob... :) iya vinalup ruler kalau ga salah

Balas

bukan debat ko.. berbagi aja.. hehe

Balas

harus tau dulu susunannya sob, nanti kalau sembarang hapus bisa error template nya..

Balas

sama-sama sob, smoga bermanfaat

Balas

Makasih udah mampir, maaf ga dikasih kopi :)

Balas

Susunan di templatenya maksudna ya, kang? waduh, repot juga ya.
Pada saya udah ngiler banget pengen pasang breaddrumbs kaya diatas :(

Balas

coba liat ada berapa baris?

Balas

Terima kasih Kang.Saya udah menerapkannya :)

Balas

makasih kang... ditunggu kang... :)

Balas

makasi kang,,ini juga sama kayak yang di terapin di IDWS..

Balas

Sudah di share sob.. silahkan cek postingan terbaru

Balas

Hehehehehe emmmm kalau di wordpress bisa kagak ya? Langsung terindex?

Balas

Trima kasih mas..berhasil :)

Balas

ane udah buat breadcrumbs tapi belum keindex google , soalnya breadcrums nya beda sama tutorial yang ini gimana ya cara gantinya?

Balas

ngambil tutorialnya dimana? atau bisa kirim kode HTML nya?

Balas

duuh jadi binung mau pilih yang ke index atau yang gak o.O

Balas

supaya gak terindex gimana caranya ya kang o.O

Balas

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.

Balas

wah... harus tau kode htmlnya sob...

Balas

gmn cara ngirim code html-nya kang, biar akang tau? kl saya pasang langsung hasilnya dobel....

Balas

ijin praktekin kang ismet, sangat membantu.
salam kenal dan sukses selalu buat blognya.

Balas

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.

Balas

Post title, URL link dan deskripsi mksud saya.

(Link hidup dibloh yah!!!)

Balas

Kalau menurut saya, kalau ga pake jadi double... Post Title kalau pada mouse hover, dibawah pada web browser kan linknya muncul. Jadi Post title+link, link, deskripsi... bener ga?
Coba yang lengkap baca ini :
http://usabilitygeek.com/12-effective-guidelines-for-breadcrumb-usability-and-seo/

Oh iya... maaf link hidup di block..

Balas

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?

Balas

jangan lupa follow blog saya di uncomp.blogspot.com terimakasih infonya. Salam hangat keluarga blogger....

Balas

temlplate yang Kang Ismet Buat juga udah ready breadcrumbs Seo Friendly gak kang??

Balas

Izin nyoba sob , mantep nih !!

Balas

Thank's informasinya bermanfaat banget... http://boltim.blogspot.com/

Balas

Thank's infonya kang...
akan saya terapkan di blog saya

Balas

makasih kang mas tipsnya, salam kenal dari bloger pemula..

Balas

ma kasih gan infonya ,,nya,,,,tentang menjelaskan cara membuat breadcrumbs yang SEO,terima kasih

Balas

kang mohon ijin buat copass..sumber terlampir...makasih m(_ _)m

Balas

Makasi Infonya sangat bermanfaat, sudah ku terapkan di blog saya www.bmatindas.com dan berhasil

Balas

makasih kang ismet, baru pasang langsung ke index breadcrumbs nya..

Balas

Ijin share di blog saya kang Ismet :D

Balas

saya sudah coba dan berhasil sob
maasi infonya yaaa

silakan lihat blog saya dan kasih masuan kalau ada waktu

:D

Balas

sama2 sob... semoga bermanfaat

Balas

Kalau WP banyak pluginnya biasanya sob :)

Balas

Suadah saya sertakan sob...

Balas

pantesan dari tadi gak bisa, ternyata pake kode... hehehe maklum newbie... di coba nih ah... moga2 berhasil, amin

Balas

Emang asalnya gimana sob? :) sok mangga silahkan dicoba semoga berhasil

Balas

kira-kira berpa lama yak.??
breadcrumbs kita bisa terindex oleh om google.??

Balas

tergantung postingan kita diindex oleh google berapa lamanya sob...

Balas


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.

Balas

b:includable id='main' var='top'

sama dengan yg ini?

b:section class='main' id='main' showaddelement='no'

Balas

beda sob, kayaknya ada yang tertinggal langkahnya "centang Expand Template Widget"

Balas

makasih gan :D , terpasang sudah .. hehe

Balas

Alhamdulillah,setelah saya coba ternyata berhasil. terima kasih mas.

Balas
Komentar ini telah dihapus oleh pengarang.

Mantap tipsnya bro, sangat bermanfaat... berhasil di pasang di Blog saya...

http://www.bmatindas.com

Balas

Manteb nih informasinya gan. ane terapin di blog ane langsung jadi. Thanks ya :)

Balas

trima kasih infonya saya coba dulu kang..

Balas

Wah bisa buat meningkatkan seo blog saya nih :)

Balas

bingung juga ya.. ada yg bilang jelek, ada yg bilang bagus,,,

Balas

wah..., makasih banyak kang. sudah saya coba...
dan berhasil mulus hehehe..


salam kenal

Balas

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

Balas

Kang, maaf keluar dari pembahasan :)
Cara buat daftar isi kayak blog ini udah dishare blon yah? kalo belon request dong kang hihihi

Balas

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

Balas

waduh kang, saya koq gak muncul? heee

Balas

Sukses mas bro, ijin sedot untuk di coba di blog saya ya mas bro http://cherylaghniads.blogspot.com/
trims

Balas

coba gan mungkin menu "" ada 2, pilih yang nomor 2,

Balas

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

Balas

Makasih infonya kang,, sangat berguna sekali

Balas

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

Balas

makasih mas lumayan bisa ane pasang di blog yang sesederhana ini

Balas

makasih mas .. blog saya jadi lebih bagus.. ditunggu kunjungannya

Balas

Hanya Ingin Berkunjung Mas ..
Artikel Bagus

Balas

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.

Balas

makasi kang ismet, ini yg saya cari
kang, kalo mau cepet dapat pagerank gimana yaa??

Balas

makasih kang.. sangat bermanfaat :)

Balas

dulunya sangat susah masangnya ini, tapi setelah belajar dan belajar,..
akhirnya ane busa masang sendiri gan,.. heheh thanks

Balas

download games di tempat ane yh kang

Balas

caranya terbukti. berhasil dipasang di blog saya. thx kang ismet.

Balas

Terus bljah biar bsa mhir kyak om is... :)

Balas
Komentar ini telah dihapus oleh pengarang.

Juga ke Index Google ya kang ??

=► http://www.adadeny.com/

Balas

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

Balas

tutorial yg sgt lengkap...sangat membantu sy utk edit blog...

Balas

mantap sob tutorialnya,.. ijin praktek sob untuk blog ane,... salam kenal dari ane,..

Balas

Blog nya makin berat ae kang

Balas

oh ternyata itu breadcrumbs? ane penasaran dan jumpanya di blog ente :D

http://321hacked.blogspot.com/

Balas

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/

Balas

udah biasa ya.. sorry baru dibales.. soalnya tadi keluar

Balas

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=2013-09-17T06:06:00%2B07:00&max-results=8&start=8&by-date=false
hxxp://-------.blogspot.com/search/label/Mp3-Dangdut?updated-max=2013-09-20T05:48:00-07:00&max-results=8
hxxp://-------.blogspot.com/search/label/Mp3-Dangdut?updated-max=2013-09-27T02:37:00-07:00&max-results=8&start=8&by-date=false

itu baru untuk satu label kang.......nah akhirnya cari solusi kesana kemari untuk mengatasi duplikat titel tag akibat label, tapi tidak ada solusi (mungkin Kang Ismet bisa buat post) karena kebanyakan title tag yang dibahas berdasarkan m=1 atau m=0 dan archive....karena tidak ada solusi, sayapun mencoba trik sendiri cara mengatasi duplikat title tag akibat label berdasarkan tahap-tahap duplikat archive. Sayapun copy satu persatu duplikat tersebut untuk dihapus dari halaman indeks (removing url) di webmaster tool. Dan ternyata berhasil, 3-4 hari sesudahnya, duplikat itu hilang.

Yang saya heran, hal itu ternyata berpengaruh pada pencarian di google yang kemudian sangat berpengaruh pada visitor. jam segini saja biasanya pengunjung mencapai 8000an, tapi sekarang tinggal 900 biji saja. Itu justru terjadi ketika duplikat title tag akibat label seperti contoh di atas berkurang.

Pertanyaan, berdasarkan masalah di atas:
1. Benarkah duplikat title tag akibat label seperti contoh di atas yang muncul di webmaster tool akibat pemasangan breadcrumbs. Meskipun dengan adanya breadcrumbs, menjadi lebih SEO dan berpengaruh pada pengunjung blog?
2. Mengapa ketika duplikat title tag akibat label itu hilang justru pengunjung semakin berkurang secara drastis
3. Apakah secara SEO, label itu sebaiknya terindeks di google atau tidak?

Terimakasih Kang Ismet...mohon pencerahannya...

Balas

Alamak... pertanyaanya lebih panjang dari artikelnya... :)
Tunggu jawaban Kang Ismet Sob.....

Balas

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

Balas

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.

Balas

kang ismet saya mau tanya ..
bagaimana cara membuat breadcumbs agar tidak terindeks .???
trima kasih

Balas

terima kasih atas informasi yang bermanfaat ini , sukses selalu

Balas

Setiap hari sy selalu belajar dari blog ini dan banyak pemahaman tentang blog yg sy dapat... ;)
► http://daeng-seo.blogspot.com/

Balas

kang kalo mau buat breadcrumbnya waktu di search engine menggunakan label gimana kang? seperti blog akang ini :( soalnya ga ketemu2 dari kemarin

Balas
Komentar ini telah dihapus oleh pengarang.

Terimakasih share ilmunya, sudah saya pasang

Balas

Kang, tipe breadcrumbs kyk gini kan gak terindex di google. Apa breadrcumbs ini bener2 SEO ?

Balas

Wih Breadcumb Nya Bagus Kang.Apakah Sudah Seo Atau Belum Kang?

Balas

mantap gan, terima kasih banyak ya atas ilmunya.. :)

http://www.jamtanganori.com

Balas

mas kok gak bisa yah ? mas kasih caranya agar bisa yah

terima kasih

Balas

LAPORAN

Sudah diterapkan dan SUKSES!

:D

Balas

Mantap Kang, terima kasih. :)

Balas

thank's infonya kang, mampir sini kang http://khususgaming.blogspot.com/

Balas

thank you so much kang ismet, sekarang breadcrumb saya udah nongol di mbah google :-bd

Balas
Komentar ini telah dihapus oleh pengarang.

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

Balas

ijin belajar dan dicoba berhasil, terimakasih

Balas

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

Balas

terima kasih atas infonya
www.idcheat.com
www.giribig.com
www.duniagame.info

Balas

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

Balas

thenk`s infonya gan sangat membantu nhy

Balas
Komentar ini telah dihapus oleh pengarang.

makasih kang mising entry-title ditempatku kini hilang berkat artikel ini, mungkin emang sedikit ga nyambung dengan judul artikel tp setelah aku coba pasang eh ternyata ngilangin mising entry title yang membandel.

Balas

Poskan Komentar


×
Chat