Cara Mudah Agar Beadcrumbs Terindeks Search Engine

Beadcrumbs adalah menu navigasi tambahan yang biasanya terdapat diatas judul posting/artkel seperti yang ada di blog ini . Kegunaan breadcrumbs hanya untuk memudahkan pencarian artikel saja berdasarkan label atau arsip. Kalau di template anda belum ada breadcrumbs silahkan dibaca artikel terdahulu Cara Membuat Breadcrumbs di Blogspot. Pada tutorial blog kali ini saya hanya akan membahas bagaimana cara supaya breadcrumbs dapat terindeks oleh search engine atau Google. Tujuannya adalah untuk meningkatkan hasil SERP pencarian google terhadap keyword judul artikel yang dibuat. Menurut SEO maka akan menjadi nilai plus jika artikel anda terindeks di Google bukan hanya judul dan urlnya, tapi juga terindeks berikut label kategori yang ada pada breadcrumbs. Sudah paham toh maksudnya..?? Kalau begitu langsung saja tancap ke trik agar breadcrums terindek google ini.

Trik Agar Breadcrumbs Terindeks Oleh Google

1.   Login ke dashboard blogger anda, pilh Rancangan > Edit HTML. Jangan lupa centang Expand widget template.

2.   Cari kode <div class='breadcrumbs'>   dalam template anda. Pada template yang saya pakai ini susunan kodenya seperti dibawah ini. Kalau sobat ragu-ragu download dulu full template sebelum melakukan perubahan untuk jaga-jaga kalau gagal atau salah.

<b:include name='mobile-nextprev'/>

</b:includable>

<b:includable id='post' var='post'>

  <div class='post hentry'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

&#187;

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

</b:loop>

&#187;

</b:if>

<data:post.title/>

</div>

</b:if>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

&#187; Archives for <data:blog.pageName/>

</div>

</b:if>

3.       Ganti/rubah kode yang saya tandai dengan warna merah diatas dengan kode dibawah ini.

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

4.      Save/Simpan template anda.

5.  Untuk mengetahui apakah breadcrumbs anda sudah dapat terindeks oleh google, sobat dapat menggunakan Rich Snippets Testing Tool dengan memasukkan url salah satu postingan anda yang sudah terindeks dan klik tombol Preview. Tapi yang perlu dipahami adalah hasil test ini tidak akan serta merta langsung muncul begitu anda melakukan perubahan pada breadcrumbs seperti diatas. Tapi hasilnya akan terlihat setelah google melakukan indeks terakhir pada blog atau crawling atau pada googlebot last acces berikutnya. Mudah-mudahan tidak membingungkan ya .. :D.

Selamat Mencoba dan Happy Blogging

Sumber :rayhanzhampiet.com

Cara Mudah Agar Beadcrumbs Terindeks Search Engine

Cara Mudah Membuat Beadcrumbs Di Blog

breadcrumb adalah menu navigasi yang biasanya terdapat diatas postingan. Tujuannya adalah untuk menunjukkan urutan isi halaman dari Home sampai ke posting artikel yang sedang dibaca. Kalau kita menilik asal muasalnya, menu navigasi breadcrumb ini berasal dari platform Wordpress yang secara default sudah disetting otomatis urutan navigasinya mulai dari Home > Parent Category (kategori utama) > Subcategory > Posting. Sedangkan untuk platform blogger, karena belum ada setting otomatisnya maka kita perlu melakukan sedikit  trik cara membuat breadcrumb di blogspot ini. Menu navigasi breadcrumb di blogspot ini kita buat berdasarkan urutan Home > Label > Posting.  Sama seperti di WP, breadcrumb di blogspot tidak akan terlihat pada halaman Homepage, tetapi dapat terlihat pada halaman posting, label dan juga arsip.

Trik Cara Membuat Breadcrumb di Blogspot adalah sebagai berikut :

• Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.

• Cari kode ini ]]></b:skin> pada template anda. Copy kode CSS dibawah ini dan paste-kan kode CSS tepat diatas kode ]]></b:skin>  

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}

• Lanjutkan dengan mencari kode ini <b:include data='top' name='status-message'/>  pada template anda. Letakkan kode dibawah ini dibawahnya.

<b:include data='posts' name='breadcrumb'/>

• Kemudian cari lagi kode  <b:includable id='main' var='top'> . Copy script dibawah ini dan letakkan tepat diatas kode tadi.

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- No breadcrumb on home page --> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop> <b:else/> »Unlabelled </b:if> » <span><data:post.title/></span> </b:loop> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "index"'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == ""'> <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable>

• Cek sekali lagi apakah anda sudah meletakkan kode CSS/script yang diberikan pada tempat yang dimaksud pada langkah 2-4 diatas. Sebaiknya download dulu template anda sebelum dimodifikasi.

• Jika sudah yakin semua langkah diatas sudah dilakukan dengan benar, Save template anda.

Good luck sahabat CO(Sebutan kecil bagi yang suka blog ini (fans))

Cara Mudah Membuat Beadcrumbs Di Blog