Senin, Desember 26, 2011

Tips [Cara] Membuat Rich Snippets Untuk Blogspot

Google memang selalu penuh sensasi, kali ini ical perkenalkan fitur Rich Snippets untuk blogspot. Fitur ini berfungsi untuk menampilkan rating yang berwujud dalam berapa banyak bintang dimana rating ini akan default ditampilkan di mesin pencari khususnya google. Sehingga hasil pencarian yang mengarah ke blog kita, akan tampil beda dengan hasil pencarian dari blog lain yang belum menggunakan fitur Rich Snippets. Sebagai contoh, kamu bisa melalukan pencarian di google.co.id dengan kata kunci "www.icalcell.com" atau bisa langsung mengklik link ini. Perhatikan link blog icalcell di hasil pencarian, pasti dilengkapi dengan rating (bintang).

Tertarik membuat Rich Snippet untuk diterapkan di blog kamu???. Oke icalcell akan bagikan cara singkat bagaimana membuat rich snippet untuk blogspot atau blogger. Langkahnya seperti dibawah ini:
1. Buatlah terlebih dahulu akun Google+ kalau sudah punya, silahkan buat juga halaman Google+. Seperti halnya di Facebook ada istilah Halaman facebook. Contoh halaman Google+ bisa cek ke Icalcell On Google+.

2. Halaman Google+ dianggap sudah ada dan siap digunakan untuk keperluan Rich Snippets. Rich Snippet sendiri adalah suatu proses menghubungkan profil Google+ ke blog, agar di hasil pencarian Google, author blog dimunculkan dan beberapa fitur lain seperti rating dan deskripsi dari blog.

3.Selanjutnya kita akan menghubung halaman Google+ dengan blog yaitu dengan menempatkan kode dibawah ini di halaman edit html blog tepat di bagian header.
<!-- Tempatkan tag ini di bagian <head> dokumen Anda --> <link href="https://plus.google.com/111799635502470708810" rel="publisher" /><script type="text/javascript"> window.___gcfg = {lang: 'id'}; (function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })();</script>
Ganti tulisan warna merah dengan id halaman google+ kamu, dan tulisan berwarna orange sesuaikan bahasa untuk blog kamu dalam kasus di atas icalcell menggunakan id yaitu bahasa indonesia. Untuk melihat pengaturan lengkap tentang kode ini, kamu bisa berkunjung ke sini https://developers.google.com/+/plugins/badge/config?pageId=

4. Setelah kode berhasil diterapkan di blog, selanjutnya kita akan mengecek apakah blog sudah terverifikasi di Rich Snippets. Untuk itu silahkan berkunjung ke halaman rich snippets tool. Masukkan salah satu link post di blog, dan perhatikan apakah publisher statusnya sudah verified atau belum. Seperti gambar dibawah ini.
mengecek status publisher rich snippets
Jika status sudah verified, sekarang waktunya untuk memasukkan kode-kode Rich Snippets ke html blog seperti Judul, Deskripsi, Reviews dan Rating.
1. Kode dasar Rich Snippets, yaitu suatu div yang meng-cover body blog, sebagai tanda bahwa blog kita adalah blog review untuk Rich Snippet
kode : <div><div itemscope='' itemtype='http://data-vocabulary.org/Review'>  , tambah tepat setelah kode <body>
kode : </div></div>  , tambahkan tepat sebelum kode </body> .
Contohnya seperti dibawah ini :
<body>
<div><div itemscope='' itemtype='http://data-vocabulary.org/Review'>
--------------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------
</div></div>
</body>

2. Kode untuk Reviewer atau author atau penulis, ini akan nampak pada hasil pencarian Google.
kode : <span itemprop='reviewer'>ICALCELL</span>, selipkan <data:post.author/> diantara tag <span>. sehingga nanti akan menjadi seperti ini <span itemprop='reviewer'><data:post.author/></span>
Dengan itu, maka nama author di blog contohnya icalcell, akan tampil sebagai nama reviewer.

3. Kode untuk Title atau Judul postingan
kode : <span itemprop='itemreviewed'><Tag Judul Posting></span> , Judul posting disini yang dimaksud adalah tag h1 atau h2 (tergantung judul post kamu menggunakan tag h1 atau h2) dalam html blog yang menunjukkan judul dari postingan. Sehingga setelah kode diterapkan akan menjadi seperti ini.

<span itemprop='itemreviewed'>
      <h1 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>
      </h1>
</span>
Dalam kasus diatas ical menggunakan tag h1 untuk judul posting (tag h1 dicap sebagai tag judul ramah seo). Mungkin untuk template blog lain menggunakan tag h2 , silahkan sesuaikan saja.

4. Untuk Deskripsi dan Rating Rich Snippets, ical rekomendasi untuk membuatnya secara manual (diterapkan pada single postingan). Artinya setiap posting artikel baru, ikutkan kode rich snippets untuk merekam Deskripsi dan Rating tulisan atau postingan.
Kode untuk Deskripsi Rich Snippets
<span itemprop='description'>Deskripsi Tulisan</span>
kode untuk rating
Rating: <span itemprop='rating'>jumlah rating</span>

Untuk deskripsi ical biasanya sisipkan di awal postingan, contoh untuk tulisan ini ical menggunakan kode deskripsi seperti dibawah ini:
<span itemprop='description'>Google memang selalu penuh sensasi, kali ini ical perkenalkan fitur Rich Snippet untuk blogspot. Fitur ini berfungsi untuk menampilkan rating yang berwujud dalam berapa banyak bintang dimana rating ini akan default ditampilkan di mesin pencari khususnya google.</span>
contoh kasus diatas, kita tidak perlu menulis/mengkopy deskrispi cukup sisipkan kode <span itemprop="description"> pada paragraf di blog yang bagus untuk dijadikan deskripsi dan tutup dengan tag </span>.

Untuk rating silahkan simpan di akhir postingan, cukup mengkopy kode di atas. Jumlah rating dari 1-5 bintang. Contoh untuk tulisan ini ical berikan rating 4.5 bintang , sehingga kodenya Rating: <span itemprop='rating'>4.5</span>. Bisa dilihat diakhir postingan.

Untuk memudahkan dalam pengaplikasin kode deskripsi dan rating, silahkan masukkan kode dibawah ini ke template blog (akan otomatis muncul setiap melalukan postingan baru) masuk di settings - posts and comments.
<span itemprop="description">


</span>
Rating: <span itemprop="rating">4.5</span>
Contoh penerapan dalam blog icalcell.com
post template untuk deskripsi dan rating blog
Untuk postingan lama, silahkan edit dan masukkan deskripsi dan rating sendiri-sendiri. Untuk Rating sendiri, bisa dibedakan setiap postingan, agar tampak memiliki nilai seni dan berkharisma, jangan mentok pada rating 5 bintang, usahakan bervariasi-lah. Untuk mengecek Rich Snippets tulisan ini silahkan klik link ini. Untuk melihat hasil pencarian di google klik disini. Itulah tulisan tentang Tampil Beda Di Search Engine Dengan Rating Bintang Rich Snippets, Tampil Beda Di Search Engine Dengan Rating Bintang. Rating: 4.5

Artikel Terkait

Tips [Cara] Membuat Rich Snippets Untuk Blogspot
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

24 komentar

24 Desember, 2011 20:30 delete

Mas kalo mau buat di WP gimana ya?
Udah muter2 nyari tutorialnya gak nemu-nemu

Reply
avatar
25 Desember, 2011 02:42 delete

kira2 apakah ada efek besarnya utk seo blog kita????

Reply
avatar
25 Desember, 2011 04:33 delete

masih agak bingung sih saya..tapi thanks buat tipsnya mas..

Reply
avatar
25 Desember, 2011 04:57 delete

wahhhh sidikit punyeng dah scripnya..... heheh

Reply
avatar
25 Desember, 2011 10:29 delete

hehe kenapa mesti bingung mas,,, inti dari rich snippets itu adalah review judul post, penulis, deskripsi dan rating,,, sebenarnya semuanya bisa dibuat manual, tapi terlalu repot, jadi judul sama penulis diterapkan dalam edit html,, agar lebih simple aja,,,, rating juga sebenarnya bisa dimasukkan dalam html, tapi rating semua post akan sama, jadi ga begitu baguslah kelihatanya, masa semua post ratingnya sama,,, hehehe

Reply
avatar
25 Desember, 2011 13:35 delete

bang ical mau tanya nich cara mendisable tombol back agar pengunjung tdk dpt kembali kehalaman pencarian dan mencekal blog kita gimana caranya bang ,..thx

Reply
avatar
25 Desember, 2011 14:19 delete

baca disini kang udah ane jwb, kbnran ada visitor juga yg tax demikin http://www.icalcell.com/2011/12/merry-christmas-and-happy-new-year-2012.html?showComment=1324779919693

Reply
avatar
25 Desember, 2011 16:43 delete

bang icalell buat WP dong bang ditunggu ya.

Reply
avatar
26 Desember, 2011 11:48 delete

kalo wp keknya tinggal pake plugin bro,, ical belum terlalu paham soal WP, baru mau belajar juga... :)

Reply
avatar
30 Desember, 2011 04:40 delete

mampir lagi disini gan numpang ngucapin terima kasih banyak sebelumnya....:)

Reply
avatar
14 Januari, 2012 22:27 delete

makasih banyak mas, dari sekian tutorial, hanya di sini yang berhasil. makasih sebelumnya

Reply
avatar
17 Januari, 2012 09:49 delete

kalo point ke dua pada code span itu diletakkan dimana gan?

Reply
avatar
17 Januari, 2012 15:27 delete

data post author bro......

Reply
avatar
23 Januari, 2012 10:41 delete

betul tu mas,, dan hasilnya muncul di pencarian serp

Reply
avatar
29 Januari, 2012 23:15 delete

sip masbro.. sukses dicoba :salaman:

Reply
avatar
31 Januari, 2012 13:42 delete

nunggu berapa hari ne mastah... biar bisa nampil bintangnya di google, n verifikasi-nya gmn...?

--------------

Warning: Missing required field "updated".
Warning: Missing required hCard "author".

--------------

Reply
avatar
17 Februari, 2012 03:58 delete

duh gan ribet banget yah...masih males nyoba gan nambahin tanda rating..huft..bang ical ane numpang promosi blog ane yah..hehehehee..

http://smilewithismail.blogspot.com/

Reply
avatar
27 Maret, 2012 08:51 delete

sip keren banget tipsnya kakak.sudah saya terapkan dan smoga bisa berhasilni. thank's for share

Reply
avatar
28 Mei, 2012 01:08 delete

keren ne,
keliling2,akhirnya nemu blog ini
working ne review nya tapi jadi ada masalah html saat peninjauan rich snippet
Warning: At least one field must be set for Hcard.
Warning: Missing required field "name (fn)".
apakah harus di ubah dengan span itemprop='reviewer?

kalau di wordpress itu mudah,pakai aja plugin gd star rating

Reply
avatar
12 Januari, 2015 22:51 delete

artikelnya sangat bagus kawan

http://acemaxs31.com/obat-nyeri-haid-herbal/
http://apotekgumilar.com/
http://acemaxs86.com/

Reply
avatar