Menampilkan Gambar Recipe Snippet di Google

Integrasi Vocabulary Recipe Pada Blogger atau Menampilkan Gambar Artikel Pada Hasil pencarian Google . kita akan mencoba beriteraksi tentang richsnippet google dengan memasang sebuah gambar agar tampil pada pencarian google. biasanya tampilan gambar yang muncul adalah gambar profil namun kali ini kita akan menampilakan gambar artikel. dengan menggunakan vocabulary recipe yang biasa di pakai untuk resep masakan dan sebagainya. kita bisa pasang itu untuk semua artikel yang memiliki gambar.
cara menampilkan gambar di hasil pencarian google
Cara ini hampir sama dengan memsang rating bintang di blogger dan tampil di hasil pencarian google. hanya beda pada vocabullary type. yang kita gunakan adalah
<div><div itemscope='' itemtype='http://data-vocabulary.org/Recipe'>
----------------------
</div></div>
dan jika semua pemasangan maka hasil test pada Rich snippets - Recipes . akan seperti gambar di bawah :
Integrasi Vocabulary Recipe Pada Blogger
Intergrasi Cara Memasang Vocabulary Pada Blogger
1. edit template
2. cari code <body> dan masukan code ini simpan tepat di bawahnya.
<div><div itemscope='' itemtype='http://data-vocabulary.org/Recipe'>
3. cari code </body>. dan simpan code penutupnya ini simpan tepat di atasnya :
</div></div>
4. ingat sebelum edit template expand dulu template anda atau checklist checkbox yang sebelah kiri. kemudian cari kode yang mirip seperti ini .
<h3 class='post-title entry-title'>
NB : Tiap template akan berbeda maka cari saja kode tepat seperti code class='post-title.
setelah ketemu maka letakan code ini tepat di atasnya
<span itemprop='itemreviewed'><span itemprop='description'>
5. cari code penutup post title seperti ini </h3> atau </h2> . dan letakan code ini tepat di bawahnya.
</span></span>
Hasil keseluruhan jika benar maka hasilnya akan seperti ini.
<span itemprop='itemreviewed'><span itemprop='description'>
          <h3 class='post-title entry-title' itemprop='name'>
         <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>
          </h3>
   </span></span>
6. Simpan template anda.
7. Sekarang lakukan dalam postingan terbaru anda yang artikel tersebut terdapat sebuah gambar. dan harus menyisipkan microdata berikut contohnya.
pada link gambar sisipkan tag code itemprop="photo" .
dan hasilnya akan seperti ini .
<img itemprop="photo" src="http://url-link-gambar/gambar/jpg" />
8.Dan sisipkan juga item ini di bawah postingan anda.
<span itemprop="review" itemscope="" itemtype="http://data-vocabulary.org/Review-aggregate">
Rating Artikel : <span itemprop="rating">5</span>
Jumlah Voting  : <span itemprop="count">88</span> Orang
</span>
9. Pulbikasikan artikel anda dan check hasilnya di google rich snippets dengan memasukan link artikel terbaru yang baru saja anda buat.
jika berhasil seharusnya gambar artikel terbaru anda akan muncul di sebelah kanan seperti pada gambar kedua di atas.

license by under 88 blogspot.com
Post By : denzdii
Pranala luar : Rich snippets - Recipes

8 comments:

  1. wew keren nih
    cocok buat blog yg share berbagai macam progie

    mas bro jadi klw gambarnya nga di sisipin itemprop-photo
    yg keluar pic author ya

    ReplyDelete
    Replies
    1. gak gitu bro..
      masksud sisipkan itemprop="photo" itu. pada tiap kita membuat postingan yang ada gambarnya. kalau gak di sisipkan maka gak akan muncul gambarnya.
      kalau itemprop="review" itu untuk menampilkan bintang.
      ini masih pake teknik manual.

      Delete
    2. kamsudnya gini om,
      kan pas ane cek di webmaster richsnippets,,foto authornya tampil tuh,,berikut bintang yg berjejer, sama breadcrumb,,,udah mulus dah nga ada warningnya

      nah item prop di sisipkan di pict yg mau kita tampilkan produknya kan!

      pertanyaanya,,misalnya ane nga pake item prop di satu arikel,,yg nongol poto author kah atau gimana???

      makasih bro udah mau jawab :)

      Delete
    3. ouh..
      berhubung ini manual tanpa daftar ke google+.. jadi gambar author gak akan muncul di sampingnya.. ini hanya untuk menampilkan gambar tiap artikel.. untuk menampilakan author tanpa daftar di google+ baca artikel http://under-88.blogspot.com/2012/07/pasang-star-rating-dengan-gambar-author.html

      Delete
    4. oalah tanpa yg ++ toh
      pantes nga nongol2 pic yg ane selipin itemprop

      makasih mas bro pencerahannya :D

      Delete
  2. Mas, kok saya ga ketemu tanda < body>. Mohon infonya ya. Apa < tbody>

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top