Tuesday, May 29, 2012

cara menampilkan rating bintang di hasil pencarian google

Sebenarnya sudah lama sekali kepingin posting cara menampilkan rating bintang di hasil pencarian google ini, tapi tidak berani sebelum saya sendiri berhasil mempraktekkannya. Jujur saja saya juga sempat pusing karena beberapa kali mencoba gagal terus. Namun berkat kesabaran akhirnya sukses juga membuat rating bintang di blog Share With Irfan ini. Belajar dari pengalaman, saya ingin berbagi tips cara membuat rating bintang rich snippet ini untuk sobat blogger sekalian, termasuk beberapa trik tambahan yang mungkin bisa sobat lakukan jika mengalami kegagalan seperti yang pernah saya rasakan.

Cara Membuat Rating Bintang Di Blogspot
1.    Pertama anda harus memiliki akun di Google Plus. Akun google plus anda harus sudah terhubung ke blog anda dimana dalam setting profil anda menjadi kontributor. Jika belum edit dulu profil google plus anda dan masukkan URL homepage sebagai blog yang di kelola.
 
2.    Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand Template Widget.
3.    Jika akun Google Plus anda sudah dihubungkan dengan blogger, selanjutnya buat meta tag seperti contoh punya saya dibawah ini dengan menggunakan URL id profil google plus anda. Letakkan meta tag ini dalam susunan meta tag yang telah ada di template anda atau diatas kode <b:skin><![CDATA[/* .
<meta content='general' name='rating'/>
<link href='https://plus.google.com/108774874833379515328' rel='publisher'/>
4.    Selanjutnya letakkan kode dibawah ini tepat dibawah kode <body>  pada template.
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
5.    Kemudian letakkan tag penutup </div>  diatas kode </body>  pada template. Dengan demikian kita sudah memberikan markup (penanda) area posting yang diberi rating yaitu diantara tag <body>  dan  </body>.
6.    Lanjutkan perburuan (:D) dengan mencari kode HTML judul posting seperti dibawah ini.
<h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3>
Catatan Penting :
Kode heading (h3) pada setiap template berbeda-beda, seperti pada template saya judul posting menggunakan heading (h1). Jadi pastikan dulu keberadaan tag judul posting pada template anda. Bagi yang menggunakan breadcrumbs lebih gampang, kode judul posting biasanya ada dibawah susunan kode breadcrumbs. Trik mudah menemukannya adalah dengan melihat page source halaman posting anda.
 
7.    Jika sudah ketemu, tambahkan kode HTML yang berwarna merah sehingga susunan kode HTML lengkapnya menjadi seperti dibawah ini.
<span itemprop='itemreviewed'><span itemprop='description'><h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3></span></span>
8.    Lanjut terus bro dengan mencari kode seperti dibawah ini.
<span class='fn'><data:post.author/></span>
9.    Tambahkan dengan kode yang berwarna merah sehingga menjadi seperti dibawah ini.
<span class='fn'><span itemprop='reviewer'><data:post.author/></span></span>
10.    Langkah terakhir adalah memberikan nilai rating pada bintang sehingga hasil tampilan di pencarian google bintangnya kelihatan bersinar he he. Tambahkan kode yang berwarna biru pada susunan kode diatas, sehingga menjadi seperti dibawah ini.
<span class='fn'><span itemprop='reviewer'><data:post.author/></span></span></b:if></span><span itemprop="rating">4.5</span>
11.    Step by step langkah pembuatan rating bintang rich snippets telah selesai, selanjutnya anda harus melihat preview dari hasil rating bintang yang anda buat melalui Google Rich Snippets Testing Tool. Jika hasil preview terlihat seperti gambar dibawah ini berarti anda telah SUKSES membuat rating bintang ini.
 
Jika akun google plus anda berhasil terverifikasi, maka pada bagian bawah  hasil preview akan terlihat keterangan Verified Publisher dan Verified Authorseperti gambar dibawah ini.
 
  
     
 
Demikian tutorial blog langkah-langkah Cara Membuat / Menampilkan Rating Bintang di Google. Baca juga artikel sebelumnya Cara Agar Breadcrumbs di Indeks Oleh Google karena kita juga akan menggunakan tool yang sama untuk testing yaitu Google Rich Snippets Testing Tool seperti dalam pembuatan rating bintang ini. Trus buat yang masih gagal membuat rating bintang dengan cara diatas, tenang dulu karena saya akan melanjutkan posting ini dalam Cara Menampilkan Rating Bintang di Google Part-2 [Troubleshooting] yang akan khusus membahas tips mengatasi kegagalan dalam bercinta eh maksudnya dalam membuat rating bintang ini :D. Jangan lupa dibaca ya..!! And buat yang hoby copas 100% di blog ini saya mohon dengan hormat untuk memberikan link aktif ke artikel ini.