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.
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">Contoh penerapan dalam blog icalcell.com
</span>
Rating: <span itemprop="rating">4.5</span>
Mas kalo mau buat di WP gimana ya?
BalasHapusUdah muter2 nyari tutorialnya gak nemu-nemu
kira2 apakah ada efek besarnya utk seo blog kita????
BalasHapusmasih agak bingung sih saya..tapi thanks buat tipsnya mas..
BalasHapuswahhhh sidikit punyeng dah scripnya..... heheh
BalasHapuskeren banget :)
BalasHapushehe 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
BalasHapusbang ical mau tanya nich cara mendisable tombol back agar pengunjung tdk dpt kembali kehalaman pencarian dan mencekal blog kita gimana caranya bang ,..thx
BalasHapusbaca 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
BalasHapusbang icalell buat WP dong bang ditunggu ya.
BalasHapusiya betul, buat wp gimana nih
BalasHapuskalo wp keknya tinggal pake plugin bro,, ical belum terlalu paham soal WP, baru mau belajar juga... :)
BalasHapusmampir lagi disini gan numpang ngucapin terima kasih banyak sebelumnya....:)
BalasHapusmakasih banyak mas, dari sekian tutorial, hanya di sini yang berhasil. makasih sebelumnya
BalasHapuskalo point ke dua pada code span itu diletakkan dimana gan?
BalasHapusdata post author bro......
BalasHapusbetul tu mas,, dan hasilnya muncul di pencarian serp
BalasHapusyoi mas.....
Hapussip masbro.. sukses dicoba :salaman:
BalasHapusGa Jalan Gan...
BalasHapusnunggu berapa hari ne mastah... biar bisa nampil bintangnya di google, n verifikasi-nya gmn...?
BalasHapus--------------
Warning: Missing required field "updated".
Warning: Missing required hCard "author".
--------------
duh gan ribet banget yah...masih males nyoba gan nambahin tanda rating..huft..bang ical ane numpang promosi blog ane yah..hehehehee..
BalasHapushttp://smilewithismail.blogspot.com/
sip keren banget tipsnya kakak.sudah saya terapkan dan smoga bisa berhasilni. thank's for share
BalasHapuskeren ne,
BalasHapuskeliling2,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