Penghuni 60


Basmalah












Kamis, 06 Februari 2014

Memasang Breadcrumbs, Agar Blog SEO Friendly

Advertisement
Memasang Breadcrumbs, Agar Blog SEO Friendly

Semua blogger, pasti menginginkan blognya menjadi nomor satu di mata search engine. Baik itu Google, Bing, ataupun search engine yang lainnya. Berbagai cara pun dilakukan untuk bisa memancing perhatian mesin pencari agar selalu memprioritaskan blog kita di urutan yang pertama. Mulai dari merubah tampilan blog agar lebih menarik dan simple. Sampai dengan mengutak-atik template blog agar menjadi lebih SEO friendly.

Jika berbicara tentang search engine, pasti tidak jauh dari yang namanya SEO. Karena dengan menerapkan SEO (Search Engine Optimization) pada blog kita, maka kita akan bisa mengoptimalkan blog kita di mata search engine tersebut.

Nah, sobat Penghuni 60, salah satu cara yang bisa membantu meningkatkan nilai SEO blog kita di mata search engine, adalah dengan cara memasang Breadcrumbs pada blog kita.

Apa itu Breadcrumbs?

Breadcrumbs adalah menu navigasi yang akan muncul di atas sebuah postingan atau artikel manakala kita sedang membuka artikel tersebut. Menu navigasi itu bisa membantu para pembaca artikel kita untuk mengetahui diposisi mana artikel yang sedang mereka baca itu berada dalam arsip blog kita. Contohnya, bisa sobat lihat diblogku ini. Sebuah tampilan menu navigasi bisa sobat temukan terletak persis di atas postingan ini. Atau sobat bisa lihat contoh bentuknya seperti ini:

Home page> Nama Kategori> Judul Postingan

breadcrumbs
Penampakan breadcrumbs navigasi di blog Penghuni 60

Lalu, bagaimanakah cara membuat Breadcrumbs?

Untuk bisa memasang Breadcrumbs ini, maka sobat diwajibkan sudah memasang label atau kategori di blog sobat. Karena menu yang akan ditampilkan sebagai breadcrumbs itu berdasarkan sorting pada label. Nah, jika sobat sudah mempunyai label, maka ikutilah langkah-langkah cara membuatnya di bawah ini.

Langkah-langkah Cara Memasang Breadcrumbs di Blog:

  • Silahkan sobat login terlebih dahulu ke akun blogger sobat
  • Setelah itu pilih menu TemplateEdit HTML
  • Cari kode berikut ini: ]]></b:skin>
  • Jika sudah ketemu, taruh kode di bawah ini tepat di atasnya:

.breadcrumbs{border-bottom:1px solid #ccc; border-top:1px solid #ccc; padding:0.5em 0 0.5em; font-size:11px;}

kode #ccc adalah kode warna garis atas dan bawah menu, untuk pilihan warna garis, bisa disesuaikan dengan selera kalian masing-masing.

  • Jika sudah, sekarang cari lagi kode berikut ini: <b:includable id='main' var='top'>
  • Ganti kode di atas dengan kode di bawah ini:

<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 title='Home' 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 title='Home' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:title='data:label.name' expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a title='Home' 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 title='Home' 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 title='Home' expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a title='Home' 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'/>

  • Jangan lupa “Simpan template
  • Selesai

Untuk mencobanya, silahkan sobat buka salah satu postingan sobat. Jika di atas postingan sobat sudah muncul sebuah navigasi menu yang bisa mengarahkan kita ke homepage, dan label postingan, berarti breadcrumbs sudah sukses terpasang. ^_^)b selamat ya...

Semoga dengan adanya navigasi breadcrumbs ini, blog kita akan menjadi lebih SEO friendly lagi. Amin.


Signp60


loading...

Related Post


56 comments

Apabila sobat menyukai Artikel yang aku tulis, Hayuk atuh diklik disini maka sobat akan mendapat kiriman artikel update terbaru dariku gratis melalui email Penghuni 60 atau masukkan email sobat di bawah ini lalu klik Subscribe

feedsburner
Comment Page :

dengan memasang breadcrumbs ini blog kita jadi lebih seo friendly ya mas. nice tips
Reply Delete
tetapi untuk saat ini penggunaan template hasil download sudah terpasang breadcrumbs sob,, kalau masalah seo dan tidak mungkin sobat lebih paham..hehehe
Reply Delete
save ya sob, buat dipasang nanti
Reply Delete
punyaku blom ada neh, makasih sob, tinggal pasang
Reply Delete
untungnya saya sudah memasangnya dan itu bawaan template gratisan hehee
Reply Delete
blog saya sudah ada breadcrumbnya dari templatenya
Reply Delete
untung punyaku udah ada.. hehe tinggal optimasi postingan aja
Reply Delete
oh yang itu tah baru tahu setelah baca comen aku. Template gratisan yang tak pasang juga sudah ada berarti.
Reply Delete
Ooh, itu yang namanya breadcrumbs.. Kayaknya blog ku belum gini deh :)
Reply Delete
Keren artikelnya Mas bisa di ganti nih Breadcrumb
Saya dengan yang ini, di bungkus dulu yah Mas
Makasih sudah berbagi. salam hormat selalu
Reply Delete
Alhamdulillah saya udah menerapkannya. Karena memang lebih profesional dengan cara ini.

Eh mas ikutan survei blog saya ya?
Reply Delete
Memang segala hal yang berkaitan dengan template seo friendly termasuk breadcrumb semacam ini penting untuk dijalani
Reply Delete
@Elsawati Dewi: iya mbak, ini merupakan salah satu trik SEO yg aku dapatkan dari masternya

@Devy Indriyani: iya sih, ada yg sudah ada, ada jg yg tidak.. biasanya yg ada itu template hasil karya seorg blogger sendiri yg sudah mengerti SEO, sedangkan kalo yg belum ada, itu biasanya template yg tampilannya secara umumnya saja, alias belum ada fitur2 tambahannya.

@Beranda Kata: oke sob, silahkan disave ya..

@Wongcrewchild: oke sob, silahkan dipasang sob.. :)

@Intan Sudibjo: hehe, iya sob, ada yg sudah ada , ada jg yg belum..

@Valentino: bagus donk kalo gitu :)

@Bagus Prehan: siiiplah ^_^)b langsung aja sob di optimasi

@Mus Djono: kalo sudah ada ya jgn dipasang lagi sob.. :D
utk yg belum ada saja

@Etika Maria: nah loh, buruan dikasih sob.. :)

@Saud Karrysta: hehe, kalo sudah ada sih mendingan jangan sob, daripada nanti di utak atik mlh gak jadi...

@Ustadz Adam: syukurlah kalo sudah diterapkan. boleh nanti aku mampir ya... survei apaan sob?

@Ferry: iya sob, penting gak penting, selama gak bikin loading blog jd berat, mendingan dilakukan saja.. :D
Reply Delete
wah, kebetulan sekali mas wawan, blogku blm punya yg kayak ginian, langsung ah diterapin, mksh ya mas
Reply Delete
mantep bgt tipsnya sob, langsung praktek nih
Reply Delete
Komentar ini telah dihapus oleh administrator blog.
Delete
@Fitriyana: oke Fit, silahkan dicoba ya..

@Michael: hehe, mksh sob, silahkan dipraktekan sob..

@Bay Detect: sori sob, gak boleh pasang link ya..
Reply Delete
asiik, trik SEO lagi, cocok bgt nih buat blogku yg msh baru, thanks mas...
mas wawan ini emang masternya SEO
:)
Reply Delete
Navigasi untuk 'memudahkan' pengunjung blog memang amatlah penting. Tips yang hendaknya dilakukan oleh para Blogger agar Blog SEO friendly. Beberapa waktu lalu saya juga telah memasang trik seperti ini. Terima kasih sharingnya. Salam cemerlang!
Reply Delete
Komentar ini telah dihapus oleh administrator blog.
Delete
info yang berguna, ntar mau saya coba mas,thanks
Reply Delete
Kami dari tim redaksi
KawandNews menawarkan untuk anda bersedia sebagai penulis artikel di kawandnews.com

Berminat? silahkan masuk http://www.kawandnews.com/2013/01/lowongan-penulis-berita-dan-artikel.html
Reply Delete
Komentar ini telah dihapus oleh administrator blog.
Delete
@Obat Tradisional: oke mbak silahkan diterapin aja

@Herdoni: sama sob, salam juga. ^_^

@Rozi: oke sob, silahkan

@Anggar: mkasih sob infonya, sudah aku kirim tuh surat lamarannya :)
Reply Delete
Makasih mas tipsnya,
Reply Delete
Kebetulan breadcumbs blog langsung sudah jadi dari templatenya mas mudahan saja bisa tambah seo friendly untuk google pencariannya
Reply Delete
wah banyak juga ya mas kode nya hehehe :D
mau tak praktekkan tapi saya pakai wordpress mas, jadi nggak bisa deh hehehe :D
Reply Delete
O.. itu yg namanya breadcrumb ya.. baru tahu nih istilahnya.. Thanks infonya
Reply Delete
udah ada bawaan template
bm ya mas.....
Reply Delete
@Nunu: sama2 mbak :D

@Info Saja: wah, asik donk, gak perlu susah utak atik kode lg sob

@Wahyu Eka Prasetiyarini: iya mbak Rin, kalo pake wordpress tuh bingung, aku aja sampe skrg blm bisa2 tuh utak atik kode di wordpress

@Nandar: oke sob.. :)

@Maya: enak donk May.. :)
Reply Delete
sudah saya terapin mas di blog saya, mks ya
Reply Delete
kebetulan sekali, di blogku blm ada nih
Reply Delete
Komentar ini telah dihapus oleh administrator blog.
Delete
mksh tutornya
mksh kunjungannya
Reply Delete
http://blog.seniorennet.be/Sluffertjes_creations/

Greetings with stormy weather from 't Sluffertje my friend
Reply Delete
Pastinya berguna buat yg belum memasang menu navigasi ini ya mas..
Reply Delete
@Superhero: sama2 sob, selamat ya sudah berhasil

@Sukma: sip, silahkan dicoba sob

@Obat sakit: sama2 sob

@Rudi: thanks my friend

@Purnomo: iya sob, soalnya dari templatenya ada jg yg sudah ada, gak perlu masang lg

@Cikgu Bada: terima ksh Cik
Reply Delete
this very usefull for me.. thank U very much
Reply Delete
wah, sepertinya di blogku blm ada sob, pengen aku coba nanti, save dulu ya
Reply Delete
wahh surprise banget nih jadi guest this week nya penghuni 60, bisa bikin pengunjung blogku makin banyak, terima kasih banyak ya sob :)
Reply Delete
Maaf klo lama gak ksni ,saya lagi sibuk didunia nyata ,,saya udah masang breadcrumbs sob ...malahan dari bawaan template itu sendiri...hehe
Reply Delete
@Yippee Kay Yay: OK, Kay.. thank U for your attention :)

@Jejak Jelajah: siap sob, silahkan di save, lalu terapin ya, biar SEO friendly :)

@Rozi: hehe, sama2 mas Rozi, semoga bermanfaat.. :D minggu ini blog mas Rozi jd Guest Star di blogku

@Aully Bukan: waduh, sibuk niyeee... :D semoga makin sukses aja deh bisnis di dunia nyatanya.. emang beberapa template sudah ada bawaan dari sananya, tips ini khusus buat yg blm punya aja sob
Reply Delete
blogku belum punya yg seperti itu sob, musti dipasang nih biar seo friendly
Reply Delete
bagus bgt nih mas tipsnya, di blogku kayaknya belum ada deh.. ini apa bisa bikin seo blog jd bagus ya mas?
tak coba deh
Reply Delete
sip..sip nanti dicoba deh
Reply Delete
makasih tipsnya kang, jadi pengen nih memasang Breadcrumbs di blog... jdi memudahkan pengunjung mengetahui posisi postingan yg dibaca :)
Reply Delete
Komentar ini telah dihapus oleh administrator blog.
Delete
waduh dtg singgh
Reply Delete
ayo ayo siapa blognya yg belum dipasangi breadcrumbs? cepetan pasang.. tutorialnya sudah disediakan disini oleh mas Wawan
Reply Delete
blog-nya mas jadi daftar bacaan saya lho...
utk artikel yang ini, saya ijin untuk bungkus mas..
jaya selalu blogger indonesia..
Reply Delete
jadi kelihatan lebih rapi ya mas tampilan blog kita di search engine :)
Reply Delete
sudah ane coba mas :) makasih infonya mas,
Reply Delete
mantap gan infonya :)
Reply Delete
wah bisa dicoba nih! makasih infonya gan, salam kenal :)
Reply Delete
mantap..
thanks gan infonya
Reply Delete

Posting Komentar

Berkomentarlah yang baik, kalo ada yang meninggalkan link atau iklan di kolom komentar, maka komentarnya akan saya hapus.
Gunakan Form Komentar Klasik untuk hasil komentar terbaik. Terima kasih.


Cancel Reply
 
BacktoTopRN