HTML

Rich Snippet Bintang Lima Dengan Foto Tanpa Daftar Google +

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

Masalahnya; tips untuk menampilkan foto pada rich snippet sering meminta kita melaksanakan verifikasi authorship dengan Google Plus. Hal ini cukup banyak membingungkan blogger pemula. Sehingga banyak yang gagal memasang rich snippets pada blognya. Kaprikornus saya akan menggunakan cara yang sedikit lebih mudah. (lihat referensi gambar di bawah)
Contoh Tampilan di Google
Contoh Tampilan Pada Blog
Kaprikornus bagi anda yang ingin menampilkan foto tanpa repot melaksanakan konfirmasi authorship via Google Plus, maka cara ini dapat 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 hidangan Template  pilih Edit HTML
  • Klik Expand Widget Template
  • Cari isyarat <data:post.body/>
  • Pasang isyarat di bawah ini sempurna sehabis isyarat <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 isyarat yang tercetak merah di atas. Kode itu terlebih dahulu harus diubah menjadi URL gambar foto yang anda inginkan.
  • Jika sudah simpulan silahkan klik Simpan Template

UJI RICH SNIPPET AGGREGATE REVIEW ANDA

Untuk menguji apakah pemasangan markup HTML anda berhasil, silahkan ikuti mekanisme 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 dikala hingga alat ini menampilkan referensi tampilan hasil pencarian blog anda di Google (lihat di bab bawah halaman)
Jika anda sudah melihat tampilan Rich Snippet yang disertai foto dan tanda bintang lima plus rating dan jumlah review itu berarti pemasangan isyarat markup yang anda lakukan sudah berhasil. Tinggal tunggu apakah google "merestui" blog anda menggunakan rich snippet itu.

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

Subscribe to receive free email updates:

0 Response to "Rich Snippet Bintang Lima Dengan Foto Tanpa Daftar Google +"

Posting Komentar