Memasang Breadcrumbs, Agar Blog SEO Friendly


Kamis, 06 Februari 2014
Labels:
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



Thanks
Penghuni 60
Penghuni 60

Artikel Menarik Lainnya:




FOLLOW and JOIN to Get Update!

Advertisement

56 comments:

  1. dengan memasang breadcrumbs ini blog kita jadi lebih seo friendly ya mas. nice tips

    BalasHapus
  2. tetapi untuk saat ini penggunaan template hasil download sudah terpasang breadcrumbs sob,, kalau masalah seo dan tidak mungkin sobat lebih paham..hehehe

    BalasHapus
  3. save ya sob, buat dipasang nanti

    BalasHapus
  4. punyaku blom ada neh, makasih sob, tinggal pasang

    BalasHapus
  5. untungnya saya sudah memasangnya dan itu bawaan template gratisan hehee

    BalasHapus
  6. blog saya sudah ada breadcrumbnya dari templatenya

    BalasHapus
  7. untung punyaku udah ada.. hehe tinggal optimasi postingan aja

    BalasHapus
  8. oh yang itu tah baru tahu setelah baca comen aku. Template gratisan yang tak pasang juga sudah ada berarti.

    BalasHapus
  9. Ooh, itu yang namanya breadcrumbs.. Kayaknya blog ku belum gini deh :)

    BalasHapus
  10. Keren artikelnya Mas bisa di ganti nih Breadcrumb
    Saya dengan yang ini, di bungkus dulu yah Mas
    Makasih sudah berbagi. salam hormat selalu

    BalasHapus
  11. Alhamdulillah saya udah menerapkannya. Karena memang lebih profesional dengan cara ini.

    Eh mas ikutan survei blog saya ya?

    BalasHapus
  12. Memang segala hal yang berkaitan dengan template seo friendly termasuk breadcrumb semacam ini penting untuk dijalani

    BalasHapus
  13. @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

    BalasHapus
  14. wah, kebetulan sekali mas wawan, blogku blm punya yg kayak ginian, langsung ah diterapin, mksh ya mas

    BalasHapus
  15. mantep bgt tipsnya sob, langsung praktek nih

    BalasHapus
  16. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  17. @Fitriyana: oke Fit, silahkan dicoba ya..

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

    @Bay Detect: sori sob, gak boleh pasang link ya..

    BalasHapus
  18. asiik, trik SEO lagi, cocok bgt nih buat blogku yg msh baru, thanks mas...
    mas wawan ini emang masternya SEO
    :)

    BalasHapus
  19. 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!

    BalasHapus
  20. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  21. info yang berguna, ntar mau saya coba mas,thanks

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

    BalasHapus
  23. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  24. @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 :)

    BalasHapus
  25. Kebetulan breadcumbs blog langsung sudah jadi dari templatenya mas mudahan saja bisa tambah seo friendly untuk google pencariannya

    BalasHapus
  26. wah banyak juga ya mas kode nya hehehe :D
    mau tak praktekkan tapi saya pakai wordpress mas, jadi nggak bisa deh hehehe :D

    BalasHapus
  27. O.. itu yg namanya breadcrumb ya.. baru tahu nih istilahnya.. Thanks infonya

    BalasHapus
  28. udah ada bawaan template
    bm ya mas.....

    BalasHapus
  29. @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.. :)

    BalasHapus
  30. sudah saya terapin mas di blog saya, mks ya

    BalasHapus
  31. kebetulan sekali, di blogku blm ada nih

    BalasHapus
  32. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  33. mksh tutornya
    mksh kunjungannya

    BalasHapus
  34. http://blog.seniorennet.be/Sluffertjes_creations/

    Greetings with stormy weather from 't Sluffertje my friend

    BalasHapus
  35. Pastinya berguna buat yg belum memasang menu navigasi ini ya mas..

    BalasHapus
  36. @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

    BalasHapus
  37. this very usefull for me.. thank U very much

    BalasHapus
  38. wah, sepertinya di blogku blm ada sob, pengen aku coba nanti, save dulu ya

    BalasHapus
  39. wahh surprise banget nih jadi guest this week nya penghuni 60, bisa bikin pengunjung blogku makin banyak, terima kasih banyak ya sob :)

    BalasHapus
  40. Maaf klo lama gak ksni ,saya lagi sibuk didunia nyata ,,saya udah masang breadcrumbs sob ...malahan dari bawaan template itu sendiri...hehe

    BalasHapus
  41. @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

    BalasHapus
  42. blogku belum punya yg seperti itu sob, musti dipasang nih biar seo friendly

    BalasHapus
  43. bagus bgt nih mas tipsnya, di blogku kayaknya belum ada deh.. ini apa bisa bikin seo blog jd bagus ya mas?
    tak coba deh

    BalasHapus
  44. makasih tipsnya kang, jadi pengen nih memasang Breadcrumbs di blog... jdi memudahkan pengunjung mengetahui posisi postingan yg dibaca :)

    BalasHapus
  45. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  46. ayo ayo siapa blognya yg belum dipasangi breadcrumbs? cepetan pasang.. tutorialnya sudah disediakan disini oleh mas Wawan

    BalasHapus
  47. blog-nya mas jadi daftar bacaan saya lho...
    utk artikel yang ini, saya ijin untuk bungkus mas..
    jaya selalu blogger indonesia..

    BalasHapus
  48. jadi kelihatan lebih rapi ya mas tampilan blog kita di search engine :)

    BalasHapus
  49. sudah ane coba mas :) makasih infonya mas,

    BalasHapus
  50. wah bisa dicoba nih! makasih infonya gan, salam kenal :)

    BalasHapus
  51. mantap..
    thanks gan infonya

    BalasHapus

Berkomentarlah yang baik dan sopan. Dilarang meninggalkan jejak link hidup maupun iklan promosi di kolom komentar. Silahkan hubungi Admin jika ingin bekerjasama dalam hal iklan. Terima kasih.