Tuesday, 4 December 2012

Cara Membuat Breadcrumbs Di Blogger

Leave a Comment
Blog yang memiliki breadcrumbs konon memiliki daya SEO dan daya SERP yang lebih tinggi di Google search dibanding yang tidak memakai breadcrumbs. Tentu saja, itu cuma salah satu faktor. Bagaimanapun, konten artikel yang orisinil, loading cepat dan ringan, plus template yang ramah Google (friendly) serta internal link yang baik serta dapat backlink dari situs PR tinggi adalah lima faktor yang sangat signifikan di mata Google.

DAFTAR ISI

  1. Apa itu Breadcrumbs
  2. Contoh Breadcrumbs
  3. Cara Membuat Breadcrumbs di Blogger Blogspot
  4. Pengaruh Breadcrumbs pada SEO dan SERP


APA ITU BREADCRUMBS

Breadcrumb atau breadcrumb trail adalah bantuan navigasi yang dipakai untuk mengetahui jejak asal dari lokasi dalam sebuah bog/website, program atau dokumen. Dengan kata lain breadcrumb adalah tipe struktur navigasi yang menginformasikan pengunjung tentang halaman utama dan sub-kategori yang sedang dibuka atau dibrowsing. Breadcrumb trail biasanya diletakkan di bawah judul utama sebuah halaman web yang mengandung link pada masing-masing kategori dan sub-kategori.


CONTOH BREADCRUMBS

Lihat di atasnya judul artikel ini atau lihat gambarnya di bawah:

Breadcrumb di Blogger

Apa ini dianjurkan oleh Google?

Iya. Breadcrumb akan menambah SEO suatu artikel di blog.

CARA MEMBUAT BREADCRUMBS DI BLOGGER BLOGSPOT

I. Masuk ke blogger.com -> Template -> Edit HTML -> centang (kasih tanda tik) Expand Widget Template.

Tips:
(i) Cara mencari kode di template blogger, tekan CTRL+F -> masukkan kode yang dicari dikotak yang tersedia.
(ii) Dalam meng-copy kode, klik "View Plain" -> copy kodenya.

II.

a. Cara kode berikut: <b:include data='top' name='status-message'/>
b. Ganti dengan kode berikut:
view plainprint?
  1. <b:include data='top' name='status-message'/>  
  2. <b:include data='posts' name='breadcrumb'/>  

III.

a. Cari kode berikut: <b:includable id='main' var='top'>
b. Ganti dengan kode berikut:
view plainprint?
  1. <b:includable id='breadcrumb' var='posts'>  
  2. <b:if cond='data:blog.homepageUrl == data:blog.url'>  
  3. <!-- No breadcrumb on home page -->  
  4. <b:else/>  
  5. <b:if cond='data:blog.pageType == "item"'>  
  6. <!-- breadcrumb for the post page -->  
  7. <p class='breadcrumbs'>  
  8. <span class='post-labels'>  
  9. <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  
  10. <b:loop values='data:posts' var='post'>  
  11. <b:if cond='data:post.labels'>  
  12. <b:loop values='data:post.labels' var='label'>  
  13. <b:if cond='data:label.isLast == "true"'> »  
  14. <a expr:href='data:label.url' rel='tag'><data:label.name/></a>  
  15. </b:if>  
  16. </b:loop>  
  17. <b:else/>  
  18. »Unlabelled  
  19. </b:if>  
  20. » <span><data:post.title/></span>  
  21. </b:loop>  
  22. </span>  
  23. </p>  
  24. <b:else/>  
  25. <b:if cond='data:blog.pageType == "archive"'>  
  26. <!-- breadcrumb for the label archive page and search pages.. -->  
  27. <p class='breadcrumbs'>  
  28. <span class='post-labels'>  
  29. <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>  
  30. </span>  
  31. </p>  
  32. <b:else/>  
  33. <b:if cond='data:blog.pageType == "index"'>  
  34. <p class='breadcrumbs'>  
  35. <span class='post-labels'>  
  36. <b:if cond='data:blog.pageName == ""'>  
  37. <a expr:href='data:blog.homepageUrl'>Home</a> » All posts  
  38. <b:else/>  
  39. <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>  
  40. </b:if>  
  41. </span>  
  42. </p>  
  43. </b:if>  
  44. </b:if>  
  45. </b:if>  
  46. </b:if>  
  47. </b:includable>  
  48. <b:includable id='main' var='top'>  

IV.
a. Cari kode berikut: ]]></b:skin>
b. Ganti dengan kode berikut :   
view plainprint?
  1. .breadcrumbs {  
  2. padding:5px 5px 5px 0px;  
  3. margin: 0px 0px 15px 0px;  
  4. font-size:95%;  
  5. line-height: 1.4em;  
  6. border-bottom:3px double #e6e4e3;  
  7. }  
  8. ]]></b:skin>  

V. Klik Simpan Template. Selesai.[1]

*ANGKA PADA SCRIPT TIDAK TERPAKAI ( DIHAPUS )


PENGARUH BREADCRUMBS PADA SEO DAN SERP

Seberapa besar pengaruh adanya breadcrumbs pada SEO blog dan ranking pencarian di GOOGLE SERP masih menjadi perdebatan kalangan webmaster dan blogger. Bagi yang pro atas adanya breadcrumb dapat mempengaruhi SEO, berikut beberapa manfaatnya:

Pertama, terjadinya interlink atau saling terhubung antara satu halaman dengan halaman yang lain dalam situs yang sama. Dengan breadcrumb maka struktur navigasi pada blog/situs anda membantu terjadinya saling taut antara berbagai macam halaman web.

Kedua, indeksisasi halaman web terdalam. Sebuah situs mengandung banyak halaman web dan tidak tertaut dengan bagian halaman utama. Situs yang tertaut dengan baik akan membantu bot pencari seperti Google untuk menjenguk halaman terdalam dari situs dan mengindeks-nya kembali.

Ketiga, distribusi Page Rank yang efektif pada seluruh halaman web. Situs yang tertaut dan terindeks dengan baik akan membantu mesin pencari Google dll untuk mendistribusikan ranking halaman secara efektif pada halaman internal web.

=======

0 comments:

BERKOMENTARLAH DENGAN BAIK DI BLOG INI !!!

PERATURAN BERKOMENTAR :

- JANGAN MENCANTUMKAN LINK HIDUP
- DILARANG MENCANTUNKAN BERISI UNSUR DEWASA
- JANGAN BERKOMENTAR BERMAKSUD MENGHINA
- BERILAH KRITIK DAN SARAN YANG BAIK
- KOMENTAR DARI ADMIN HARUS DIRESPON

*KOMENTAR ANDA HARUS DISETUJUI ADMIN DAHULU