Rich Snippet Bintang Lima Dengan Foto Tanpa Daftar Google +

INFO: Blog ini sudah discontinue sejak Desember 2018. Untuk info tutorial SEO terupdate silahkan ke halaman Belajar SEO di Kepointernet.com

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