Rich Snippet Bintang Lima Dengan Foto Tanpa Daftar Google +

Setelah membahas Rich Snippet versi Review/Ulasan yang menampilkan Rich Snippet bintang lima. Ternyata ada sobat blogger yang ingin agar rich snippet tersebut juga menampilkan foto. Dalam jawaban balasan, saya mengatakan bahwa rich snippet aggregate review juga menampilkan foto.

Masalahnya; tips untuk menampilkan foto pada rich snippet sering meminta kita melakukan verifikasi authorship dengan Google Plus. Hal ini cukup banyak membingungkan blogger pemula. Sehingga banyak yang gagal memasang rich snippets pada blognya. Jadi saya akan memakai cara yang sedikit lebih mudah. (lihat contoh gambar di bawah)

Contoh Tampilan di Google

Contoh Tampilan Pada Blog

Jadi bagi anda yang ingin menampilkan foto tanpa repot melakukan konfirmasi authorship via Google Plus, maka cara ini bisa menjadi pilihan. Cara pemasangannya juga sederhana. Cukup lakukan langkah-langkah berikut ini:

• Masuk ke akun blogger.com anda
• Pilih blog yang akan diedit dan masuk ke Menu Template
• Di dalam menu Template  pilih Edit HTML
• Klik Expand Widget Template
• Cari kode <data:post.body/>
• Pasang kode di bawah ini tepat setelah kode <data:post.body/> (biasanya masing-masing template berbeda, ada yang cuma satu <data:post.body/>, ada yang lebih dari satu. Buat yang lebih dari satu, pasang saja semuanya ... daripada bingung)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top:30px'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
<div style='padding:5px; width:85px; float:left;'>
<img itemprop='photo' src='URL GAMBAR PROFIL ANDA' /></div>
<div style='padding:5px; font-size:11px; float:left;'>
Judul: <span itemprop='itemreviewed'><data:post.title/></span><br />
Rating: <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
      <span itemprop='average'>10</span>
      out of <span itemprop='best'>10</span>
    </span>
    based on <span itemprop='votes'>24</span> ratings.
    <span itemprop='count'>5</span> user reviews.<br />
Ditulis Oleh <data:post.author/><br /><br />
Terima Kasih Atas Kunjungan Anda...</div>
</div>
</div>
</b:if>      

• Perhatikan kode yang tercetak merah di atas. Kode itu terlebih dahulu harus diubah menjadi URL gambar foto yang anda inginkan.
• Jika sudah selesai silahkan klik Simpan Template

UJI RICH SNIPPET AGGREGATE REVIEW ANDA

Untuk menguji apakah pemasangan markup HTML anda berhasil, silahkan ikuti prosedur sederhana berikut ini:

• Buka halaman Google Rich Snippet Testing Tool
• Pada halaman tersebut masukkan URL salah satu artikel anda ke dalam kotak yang bertuliskan "Enter a web page URL to see how it may appear in search results"
• Klik tombol Preview
• Tunggu beberapa saat sampai alat ini menampilkan contoh tampilan hasil pencarian blog anda di Google (lihat di bagian bawah halaman)

Jika anda sudah melihat tampilan Rich Snippet yang disertai foto dan tanda bintang lima plus rating dan jumlah review itu berarti pemasangan kode markup yang anda lakukan sudah berhasil. Tinggal tunggu apakah google "merestui" blog anda memakai rich snippet itu.

PERHATIAN: TIPS INI BISA GAGAL JIKA DITERAPKAN PADA TEMPLATE DINAMIS BLOGGER.COM

Membuat Rich Snippet Bintang Lima (Review)

Membuat Rich Snippet Bintang Lima yang biasanya diikuti kata diulas oleh adalah salah satu rich snippet yang paling mudah untuk dibuat. Rich snippet ini tidak akan mempengaruhi ranking dari artikel anda. Hanya saja tampilan bintang lima tersebut bisa membuat artikel anda terlihat mencolok dan mengundang orang untuk mengklik.

Jika anda belum tahu apa yang dimaksud dengan Rich Snippet, bisa baca di artikel Apa yang dimaksud Rich Snippet? Rich Snippet yang akan dibahas kali ini adalah type Review atau Ulasan.

Aturan Penggunaan Rich Snippet Bintang 5 Review (Review)

• Pada saat anda menggunakan markup HTM Review bintang lima ini, maka Google menginginkan agar halaman tersebut benar-benar hanya membahas satu produk secara spesifik. Anda tidak bisa memberikan banyak review atau ulasan yang berbeda dalam satu halaman. Jadi satu halaman hanya boleh ada satu markup review.
• Google tidak memberi support pada review produk atau layanan dewasa. Jadi jika blog anda berisikan cerita dewasa, atau konten pornografi, maka kemungkinan Google tidak akan menampilkan hasil markup anda pada snippet hasil pencarian.
• Jika Markup Review ini diberikan untuk ulasan satu orang saja, maka nama yang memberi ulasan haruslah valid, dan tidak menggunakan karakter yang tidak diizinkan. Contoh nama yang tidak diizinkan adalah "Diskon 50%"

Dengan menggunakan Rich Snippet Review Bintang 5 ini, maka hasil pencarian anda akan terlihat seperti pada gambar di bawah ini....

Cara Membuat Rich Snippet Bintang 5 (Review)

Untuk membuat Rich Snippet bintang 5 ini, silahkan lakukan prosedur sederhana berikut:

• Masuk ke dalam menu Template blog anda.
• Pilih Edit HTML dan lanjutkan, setelah itu centang Expand Widget Template.
• Gunakan Ctrl f pada browser anda untuk mencari kode <data:post.body/>
• Tepat di bawah kode <data:post.body/> masukkan kode berikut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top: 30px; font-size: 11px; color:#777;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<center>Judul: <span itemprop='itemreviewed'><data:post.title/></span>;  Ditulis oleh <span itemprop='reviewer'><data:post.author/></span>;  Rating Blog: <span itemprop='rating'>5</span> dari 5</center>
</div>
</div>
</b:if>

•  Jika sudah memasukkan kode ini, klik Simpan Template

Silahkan lakukan pengujian, apakah pemasangan kode ini berhasil. Untuk pengujian ikuti prosedur berikut ini:

• Masuk ke halaman Google Rich Snippet Testing Tool
• Pada halaman tersebut masukkan URL salah satu artikel anda ke dalam kotak yang bertuliskan "Enter a web page URL to see how it may appear in search results"
• Jika sudah memasukkan URL artikel silahkan klik tombol Preview
• Alat ini akan segera menampilkan contoh tampilan hasil pencarian blog anda di Google (lihat di bagian bawah halaman)

Jika anda sudah melihat tampilan Rich Snippet yang disertai tanda bintang lima itu berarti pemasangan kode markup yang anda lakukan sudah berhasil.