Pages

Saturday, January 26, 2013

Cara Pasang Rating Bintang Rich Snippet di Blogspot



Rating Bintang Rich Snippet di Blogspot


Cara membuat/memunculkan rating bintang di blogspot/SERP Google atau cara agar hasil SERP muncul bintangnya.
Rating bintang snippet merupakan salah satu layanan yang disediakan oleh Google yang mampu membuat tampilan hasil SERP lebih bagus karena menampilkan beberapa tanda bintang berjumlah 5 sehingga mampu menarik perhatian pengunjung (eye catching) untuk mengeklik dan mengunjungi artikel kita dengan tanda bintang yang disandangnya tersebut.



Menurut saya pemasangan rating bintang snippet perlu untuk dilakukan karena merupakan salah satu cara mempercantik tampilan blog dan mempercantik tampilan SERP.
Lihat gambar dibawah ini;



Oke langsung saja saya mulai tutorial cara membuat rating bintang snippet di blogspot:

>> Daftar dan buat dahulu akun Google+. Untuk membuatnya silahkan menuju ke sini =>https://plus.google.com/pages/create
>> Setelah akun Google+ selesai dibuat maka selanjutnya mengalihkan profil Blogger ke Google+

Caranya:
- Masuk ke dasbor blog kalian.
- Pilih tombol Terhubung ke Google+


- Jika terbuka halaman baru maka klik Beralih Sekarang Juga. Lalu di bagian Kontirbutor Untuk centang blog sobat lalu Tambahkan Blog.


>> Setelah selesai semuanya, sekarang saatnya masuk ke mengoprek kode HTML blog sobat.

Langkah-langkahnya:
Login Blogger.
Pergi ke Design/Rancangan > Edit HTML, beri centang pada "Expand Widget Templates".

Cari kode <head> 

Setelah itu Letakan kode dibawah ini tepat dibawah kode <head> 


<b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/102285791405845958439' rel='publisher'/></b:if>


Ganti yang berwarna Merah dengan ID Google Plus Sobat masing-masing, dan Perhatikan kode berwarna Biru (biasanya sudah ada) bila sudah ada tinggal disisipkan saja kode yg berwarna Hijau seperti pada kode diatas.
Lanjut cari kode <body> , dan letakan kode berikut tepat dibawahnya


<div> <div itemscope='' itemtype='http://data-vocabulary.org/Review'>

Lalu  cari lagi kode <body> , dan letakan kode berikut tepat diatasnya

</div></div>

Selanjutnya carilah kode HTML judul postingan sobat, Ini yang rada ribet, tapi kalo dicermati yo gampang sebenernya. Karena setiap template blog memiliki kode judul postingan yang berbeda-beda seperti h1, h2, h3 . Dan rata-rata yang judul posting mempunyai tag heading h3. Kalo di blog saya sendiri kode judul postinganya ada di tag heading h2.
Lihat gambar dibawah ini biar jelas:

Lebih mudah lagi bagi sobat yang sudah memasang breadcrumbs, biasanya kodenya ada dibawah kode breadcrumbs navigasi blog. Perhatikan gambar diatas, tambahkan kode yang di block warna hitam. Hasilnya bila ditampilkan dengan kode akan seperti dibawah ini:


<span itemprop='itemreviewed'><span itemprop='description'>

<h2 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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</span>
</span>        




Tambahkan kode yang diberi warna merah.
Lanjut lagi cari kode <span class='fn'><data:post.author/></span>  dan tambahkan kode yang berwarna merah, maka hasilnya akan seperti ini:

<span class='fn'><span itemprop='reviewer'><data:post.author/></span></span>

Masih ada lagi sob, hehehe... yang baca aja capek, apalagi yang nulis yah ?? :))
Langkah selanjutnya proses pemasangan Rating bintang Rich Snippetnya di Artikel blog sobat. Caranya cukup mudah tinggal sobat beri kode dibawah ini di setiap posting blog:


Rating: <span itemprop="rating">4.5</span>

Atau bisa dengan kode yang lebih lengkap

Rating: <span itemprop="rating">4.5</span>
Description: <span itemprop="description">ISI JUDUL POSTING SOBAT</span>
Reviewer: <span itemprop="reviewer">NAMA AUTHOR SOBAT</span> - Itemreviewed: <span itemprop="itemreviewed">ISI PENJELASAN DAI JUDUL POSTING SOBAT</span>


Selesai...
Dan cek hasil kerja sobat di alamat ini => http://www.google.com/webmasters/tools/richsnippets/
dengan memasukan link url blog sobat.

Bila berhasil, hasilnya akan seperti ini:


Proses dan cara diatas sudah saya praktekan dan berhasil.
Sampai disini anda sukses menggunakan profil Google + untuk blog Anda.

Verifikasi Akun Google Plus Dengan Blog
Sebelum edit, bagi yang masih belum berhasil menerapkan cara diatas, coba buatlah sebuah postingan "About me"yang didalamnya ada text yang melink ke goolge plus sobat. Dengan cara menambahkan atribut rel="me" pada link tersebut.

Bila masih bingung saya beri contohnya:
Masukan kode dibawah ini kedalam postingan "About Me" yang sobat buat. Jangan lupa "waones article’s" diganti dengan nama autor blog sobat.
Dan lagi mode dalam postingan dengan mode "Edit HTML" jangan yang "Compose".

<a href="https://plus.google.com/102285791405845958439"rel="me">waones article’s</a>

Dan text yang diberi rel="me" itu cukup satu saja.

Selanjutnya cara verifikasinya yaitu sama saja dengan menautkan akun google+ dengan blog.
Ikuti langkah-langkah berikut:

- Menuju ke profile google plus sobat
- Edit Profile
- Geser kebawah dan cari "Contributor to" Klik dan Add custom link.
- Masukan Link "About me" yang sudah sobat buat tadi, Lihat gambar dibawah ini:


- Lalu Save.

SELESAI...
Referensi: http://kode-blogger.blogspot.com/2012/04/cara-memasang-rating-bintang-rich.html

Sampai disini postingan Cara Pasang Rating Bintang Rich Snippet di Blogspot sebagai salah satu kunci kesuksesan blog yang bisa anda terapkan khususnya yang baru terjun di dunia blogger pemula seperti saya.
Selamat mencoba.

Dan setelah anda mengetahui Cara Pasang Rating Bintang di Blogspot, mungkin anda tertarik untuk belajar posting gambar menggunakan CSS pada blog anda, silahkan anda baca pada artikel CARA MELIPAT GAMBAR DENGAN MENGGABUNGKAN CSS3 DAN JQUERY

Semoga postingan Cara Pasang Rating Bintang Rich Snippet di Blogspot diatas dapat bermanfaat untuk anda, salam sukses selalu ...

Edit; wawansurya
Sumber ;
www.affiliate-waones.com
http://waones-sbm.blogspot.com
http://mitra-sbm.blogspot.com

merchant 
Search Engine

No comments:

Post a Comment