Senin, 19 Desember 2011

Cara Memasang Rich Snippet di Blogspot

Akhir-akhir ini bahasan tentang Rich Snippet begitu semarak, dan sudah ada beberapa blogger yang memakai fitur ini. Rich Snippet adalah data tambahan dari blog/postingan kamu yang akan ikut ditampilkan pada halaman mesin pencarian (SERP). Berbagai data yang bisa dimasukkan seperti rating, vote, author, tanggal, file audio, resep masakan, produk (harga, stok, dsb), event, dan banyak yang lainnya.

Aku buatkan tutorial untuk ini, tapi ingat, ini adalah caraku pribadi, sebenarnya ada beberapa cara lain untuk memasukkan rich snippet ke dalam blog kamu, silahkan cari dan pelajari sendiri.


1. Buat Page Google Plus
Disini tidak akan ditulis cara untuk membuat akun Google plus (silahkan cari sendiri). Masuk ke akun G+ anda, klik disini untuk membuat Page G+. Pada Page G+ kamu, klik "Edit Profile", masukkan Email dan Alamat blog kamu. Klik "Done Editing", lalu klik "Verify Email" dan sebuah link konfirmasi akan dikirim ke emailmu.

2. Menghubungkan Page G+ dengan Blog
Di halaman utama Page G+ kamu, klik tulisan "Get Started" tepat dibawah nama Page. Klik "Get The Badge" dan pilih tipe badge yg bisa kamu sematkan di sidebar blog. Ikuti petunjuknya, jika kamu memakai badge bergambar, maka verifikasinya ada 2 tahap, yaitu memasukkan kode ke verifikasi tag <HEAD> dan kode html ke sidebar blog.

Setelah selesai melakukan 2 cara diatas, cek lah salah satu link postingan di blog kamu di Rich Snippet Testing Tools. Jika menampilkan data "publisher" sebagai verified, maka kamu sukses memverifikasi blog kamu dengan Google Plus.

Langkah selanjutnya, mungkin ini agak ribet, karena harus ngoprek template blogspot. Semoga aku bisa menjelaskan pada sesi ini dengan gamblang.

Cara memasukkan rich snippet sebenarnya mudah. Konsepnya, kita memasukkan markup/tanda rich snippet dengan benar dan sesuai dengan value nya. Tidak semua value dan jenis rich snippet bisa dipakai bersamaan.

Rich snippet yang akan aku pakai untuk blog ini adalah untuk keterangan review/ulasan, dengan menampilkan data penulis dan rating.

Studi kasus ini aku terapkan di blog ini, yang merupakan template standar bawaan dari blogspot (Simple Black). Template blogspot ini di dalam postingannya sudah tertampil nama penulis, yang mana data tersebut akan kita "markup/tandai" sebagai item rich snippet, sehingga Google akan memunculkannya di SERP.

Oke, ikuti langkahnya:

1. Kode Dasar Rich Snippet. Buka Edit HTML Template (centang Expand Template Widget). Masukkan tag rich snippet di awal konten untuk menunjukkan bahwa konten ini adalah review. Caranya dengan memasukkan kode markup dibawah tag <body> dan diatas tag </body>.

Untuk dibawah tag <body> kodenya :
<div>
<div itemscope="" itemtype="http://data-vocabulary.org/Review">

Untuk diatas tag </body> kodenya :
</div></div>


2. Markup Judul untuk Rich Snippet. Sama seperti langkah #1, kode rich snippet untuk judul ini dipasang di HTML Edit template. Kita harus menemukan dimana letak judul postingan di HTML template blogspot kita, dan memberinya markup. Untuk di template Simple Black ini, berikut kodenya:
<span itemprop="itemreviewed">Ini Judul Postingan</span>
Ilustrasinya sebagai berikut:
Nomer 1: adalah kode rich snippet yang dimasukkan untuk markup title/judul.
Nomer 2: script dari blogspot untuk menampilkan Judul Postingan. Kamu cari sendiri script diatas di template blogspotmu, untuk lebih mudahnya, masukkan markup nya sebelum dan sesudah tag <H...>

3. Markup Deskripsi untuk Rich Snippet. Langkah ini mirip dengan langkah #2, namun kita mencari dimana data letak konten di template blogspot kita. Untuk rich snippet deskripsi/konten kodenya sebagai berikut:
<span itemprop="description">Ini Konten Postingan Saya. Blablabla.......</span>
Ilustrasinya seperti berikut:
Keterangan sama dengan keterangan gambar pada #2 diatas. Setiap template mungkin mempunyai kode yang berbeda, jadi silahkan anda kreatif mencarinya. :)

4. Markup Author untuk Rich Snippet. Poin ini mungkin agak susah, aku telah melihat berbagai template blogspot dan tidak semuanya sama dalam meletakkan Nama Penulis / Author pada postingan, bahkan sebagian template tidak ada sama sekali. Post author ini biasanya ditulis seperti, "Posted by ...", "Ditulis oleh...", "Diposkan oleh..." dan sebagainya. Di template yang dipakai oleh blog ini, Author ditulis dibawah postingan. Jadi langkah yang harus kita lakukan pertama-tama adalah menemukan script di template kita dimana "post author" itu diletakkan. Jika sudah menemukan, kode rich snippetnya adalah sebagai berikut:
<span itemprop="reviewer">Nama Saya</span>
Ilustrasinya sebagai berikut:

5. Markup Rating Rich Snippet. Ini dia yang kita tunggu! Rating inilah yang akan dipakai Google untuk memunculkan tanda bintang pada SERP. Untuk cara ini, mari kita lupakan sejenak kepenatan ngoprek template blogspot, dan beralih ke sesuatu yang lebih mudah. :)

Rating pada rich snippet di blogger ini harus diisi dengan MANUAL dari rentang 1 - 5 (sesuai jumlah bintang). Untuk mempermudah cara ini, kita sematkan saja ke "Template Entri" agar setiap kita hendak posting, kita bisa memasukkan nilai rating saat itu juga.

Caranya adalah:

  • Masuk ke Dashboard Blogspot. Pilih Setting/Setelan -> Format. Lihat tulisan paling bawah ada "Entry Template / Templat Entri"
  • Masukkan kode rich snippet ini: Rating: <span itemprop="rating">4.5</span>
  • Simpan setelan / Save
Setiap kamu membuat postingan, ubah angka "5" sesuai keinginan. Jumlah pada rating ini adalah jumlah bintang yang akan ditampilkan di SERP, dengan nilai terendah adalah "0.5" hingga tertinggi adalah "5". 

NB: Karena Rating dimasukkan secara manual, maka setiap posting di blogspot sebelum kamu menambahkan fitur ini, kamu harus menambahi kode rich snippet rating secara manual untuk memunculkannya (Edit Post).

Jangan lupa untuk mengeceknya di Rich Snippet Testing Tools untuk mengetahui apakah rich snippet di blogmu bekerja dengan baik. 

Rujukan:

NB: Ini adalah untuk pembelajaran. Aku tidak akan "menyuapi" kalian dengan mensettingkan rich snippet untuk blogmu. Silahkan luangkan waktu untuk belajar, dan bila masih belum paham, silahkan tulis di komentar. 

Rating: 5