Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

15
Tgl. 02 Juli 2013

Penggunaan Informasi Resep Masakan (hRecipe Microformat) Untuk Menampilkan Rating, Thumbnail, Dan Jumlah Ulasan Artikel Pada SERP

Pernahkah Anda mendapati hasil penelusuran web Google yang menampilkan gambar, peringkat, dan jumlah ulasan untuk sebuah artikel seperti ya...

Contoh Hasil Penggunaan hRecipe Microformats Pada Blog ELTELU Dalam Google SERP
Pernahkah Anda mendapati hasil penelusuran web Google yang menampilkan gambar, peringkat, dan jumlah ulasan untuk sebuah artikel seperti yang tampak pada gambar di atas? Ya, seperti yang tampak pada gambar dengan tanda anak panah di atas dapat kita lihat bahwasanya ketika dilakukan penelusuran web dengan memakai keyword eltelu atau dengan menggunakan penelusuran khusus site:eltelu.blogspot.com maka pada salah satu daftar yang ditampilkan di halaman pertama Google SERP terdapat sebuah hasil penelusuran yang menampilkan rating, banyaknya ulasan, dan juga thumbnail dari salah satu gambar yang terdapat dalam sebuah artikel di samping kiri daftar hasil penelusuran Google.

Bagi kita yang baru tahu tentang hal seperti ini, bisa jadi akan berpikir dan kemudian bertanya-tanya dalam hati, “kok bisa seperti itu ya? bagaimana ya cara membuatnya?”. Begitu pula lah pertanyaan yang terlintas di pikiran saya ketika beberapa waktu lalu ada seorang sahabat yang bertanya kepada saya tentang bagaimana cara menampilkan gambar yang terdapat dalam sebuah artikel pada hasil penelusuran web Google. Karena kebetulan belum mengerti teknik yang dipakai untuk membuat rich snippets bergambar seperti itu, maka saya pun akhirnya menjawab bahwa saya sendiri juga belum mengetahui cara untuk membuatnya.

Singkat kata singkat cerita karena terdorong oleh rasa penasaran, saya pun mencoba melakukan penelusuran untuk menemukan referensi terkait dengan hal tersebut, yang akhirnya dari berbagai referensi yang ada dapat disimpulkan bahwa ternyata untuk membuat rich snippet bergambar seperti di atas caranya adalah dengan memanfaatkan hRecipe microformat.

hRecipe microformat sendiri sebenarnya adalah dirancang untuk memberikan penanda informasi terkait dengan artikel yang berisikan tentang sebuah resep tertentu, dalam hal ini misalnya adalah resep masakan.

Mengutip dari http://microformats.org/wiki/hrecipe dijelaskan bahwa sulit bagi browser untuk mengekstrak informasi semantik tentang sebuah resep yang terdapat pada suatu halaman web, sehingga metadata seperti penulis dan nama serta rincian seperti bahan, metode, persiapan waktu, dan lain sebagainya dapat memberikan informasi yang relevan tentang resep yang dimaksud. Sehingga setelah informasi tersebut ditandai maka dapat memberikan sejumlah manfaat bagi yang melihatnya, yang akhirnya jika web browser yang dipakai memahami bahwa halaman web berisikan resep dengan karakteristik tertentu maka dapat menghasilkan informasi yang lebih kaya. Selengkapnya terkait dengan hRecipe microformat, Anda dapat mengetahuinya dengan cara membuka URL di atas dan atau dapat pula Anda lakukan dengan cara membuka https://support.google.com/webmasters/answer/173379?hl=en.

Setelah membuka URL di atas maka Anda akan mengetahui bahwa hRecipe microformat dapat digunakan untuk memberikan penanda khusus pada bagian artikel yang ada hubungannya dengan nama, jenis, photo, tanggal publikasi, deskripsi, review, kandungan nutrisi, instruksi, dan lain sebagainyaresep yang dimaksud, termasuk diantaranya juga penanda untuk informasi yang berhubungan dengan pembuat resep tersebut.

Akan tetapi walaupun sebenarnya hRecipe microformat ini dirancang untuk dipakai pada artikel yang berisikan tentang resep tertentu, namun pada kenyataannya tidak jarang pula digunakan untuk artikel yang tidak ada keterkaitannya sama sekali dengan suatu resep masakan. Dimana untuk kasus yang seperti ini biasanya salah satu maksud dan tujuan dari penggunaannya adalah untuk memberikan penanda informasi yang ada hubungannya dengan gambar, peringkat, dan banyaknya ulasan komentar untuk artikel tersebut sehingga akhirnya pada hasil penelusuran pun akan ditampilkan seperti layaknya artikel yang berisikan resep masakan. Dalam hal ini sebagai contoh hasil penelusuran Google untuk artikel yang menggunakan hRecipe microformat adalah seperti yang tampak pada gambar di atas.

Nah, yang menjadi pertanyaan sekarang adalah bagaimana caranya menggunakan hRecipe microformat agar setiap artikel yang diterbitkan secara otomatis ditandai, sehingga akhirnya ketika dilakukan penelusuran dengan memakai search engine menghasilkan tampilan seperti yang tampak pada gambar di atas? Untuk keperluan ini maka dapat dikerjakan dengan cara melakukan sedikit modifikasi pada kode yang digunakan, dalam hal ini tentunya adalah dengan melakukan perubahan kode yang disesuaikan dengan model template Blogger. Yang mana urutan langkahnya lebih kurang adalah seperti di bawah ini.

Pertama, buka editor template.

Kedua, sisipkan CSS berikut ini dalam area skin.
.photo{
  float:left;
  width:16px;
  height:16px;
  margin-right:5px;
  overflow:hidden;
}


Ketiga, sisipkan rangkaian kode berikut ini tepat di bawah <data:post.body/> atau di bagian lain dalam area posting yang sesuai dengan desain tampilan blog Anda.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.numComments != 0'>
    <b:if cond='data:post.numComments != 1'>
      <div class='hrecipe'>
        <b:if cond='data:post.thumbnailUrl'>
          <img class='photo' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
        <b:else/>
          <img alt='Image' class='photo' src='https://lh4.googleusercontent.com/-eRDsEdCfSQw/UQmcgxiL9aI/AAAAAAAABHs/JaKhiAtPP04/s144/No%2520Image.jpg' title='Image'/>
        </b:if>
        Perihal: <span class='item fn'><a expr:href='data:post.url' expr:title='data:post.title' rel='tag'><strong><em><u><data:post.title/></u></em></strong></a></span>
        <span class='review hreview-aggregate'>
          <span class='rating'>
            Peringkat: <span class='average'>4.5</span>
            Balasan: <span class='count'><data:post.numComments/></span>
          </span> 
        </span>
      </div>
    </b:if>
  </b:if>
</b:if>


Keempat, simpan template.

Setelah template disimpan maka hasil yang didapat dari penerapan teknik di atas lebih kurang adalah seperti yang tampak pada gambar di bawah ini. Dimana bagian ini secara otomatis akan dimunculkan di tempat yang sesuai dengan penempatan kode untuk langkah yang ketiga. Sehingga apabila rangkaian kode yang terdapat pada langkah ketiga Anda letakkan tepat di bawah <data:post.body/>, maka bagian ini pun secara otomatis juga akan dimunculkan di bawah setiap artikel yang ada. Sedangkan untuk hasil yang didapat pada hasil penelusuran adalah seperti yang tampak pada gambar pertama di atas.
Contoh Hasil Penerapan hRecipe Microformat Dalam Artikel

Sementara itu untuk melakukan pengujian (dalam hal ini adalah untuk mengetahui bagaimana tampilan artikel Anda pada hasil penelusuran atau SERP) dapat dilakukan dengan cara menggunakan layanan Google Structured Data Testing Tool (http://www.google.com/webmasters/tools/richsnippets). Hal ini disebabkan karena walaupun hRecipe microformat sudah diterapkan, namun tidak serta merta langsung berdampak pada hasil penelusuran untuk blog Anda. Akan tetapi perlu waktu dan proses sampai akhirnya dilakukan peng-indeks-an ulang oleh robot search engine terhadap seluruh artikel yang telah Anda terbitkan.
Sebagai contoh misalnya silakan klik di sini untuk melihat hasil pengujian yang dilakukan oleh Google Structured Data Testing Tool.

Oh ya, kemudian perlu diingat bahwa karena dalam rangkaian kode yang terdapat pada langkah ketiga di atas menggunakan fungsi kondisional <b:if cond='data:blog.pageType == &quot;item&quot;'>, <b:if cond='data:post.numComments != 0'>, dan <b:if cond='data:post.numComments != 1'>, maka hasilnya pun hanya akan didapat pada laman item dan artikel yang telah memiliki jumlah komentar sebanyak 2 buah atau lebih. Selanjutnya bila model yang dihasilkan untuk tampilan dalam artikel seperti yang tampak pada gambar kedua masih kurang sesuai, maka silakan dilakukan perubahan seperlunya pada rangkaian CSS serta kode yang digunakan agar serasi dengan desain tampilan blog yang Anda kelola.

Semoga berguna dan bermanfaat.
Salam.


Katagori: , ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 15 komentar pada artikel ini ▶
02/07/13 18.05 O

Asikkk,, komen pertama!!!
hihihih

Akan saya coba terapkan!!
jika ada masalah saya balik lagi

03/07/13 02.13 O

@Denz AhmadOke, silakan Sob.

03/07/13 09.11 O

Ok mas udh ane terapkan, tapi kode ada 3 ditemplates saya..
saya terapkan di yg pertama aja mas bisa??

thanks!

03/07/13 12.39 O

@Indovision BersamaKalau yang Sobat maksud kodenya ada 3 di sini adalah <data:post.body/>, maka cari saja <data:post.body/> yang letaknya di atasnya <b:if cond='data:post.hasJumpLink'>

04/07/13 05.31 O

Mas kok ga ada yaah code sepeti ini
thanks

04/07/13 06.16 O

@Indovision BersamaMaksudnya "code sepeti ini" yang bagaimana Sob?

Jika kode yang Sobat maksud adalah <b:if cond='data:post.hasJumpLink'> yang tidak ada, maka silakan cari <data:post.body/> yang terletak dalam area <b:includable id='post' var='post'> karena <b:includable id='post' var='post'> pasti ada dalam setiap template termasuk custom template sekalipun.

04/07/13 12.10 O

@AYAHE MELA
Hahahaha kok ilang yaah tadi saya keyik sepertin ini mas b:if cond='data:post.hasJumpLink' kurang lebih..

04/07/13 13.12 O

@Indovision BersamaAgar kode yang ditulis tidak hilang, maka khusus untuk tanda lebih kecil di awal kode dan tanda lebih besar di akhir kode harus di konversi dulu, Sob.

Maksudnya dikonversi di sini adalah tidak boleh langsung ditulis < dan >

Akan tetapi ditulis seperti &*lt; tanpa tanda bintang untuk < dan &*gt; tanpa tanda bintang untuk >

05/07/13 08.30 O

@AYAHE MELA
Ok ok siap,
thanks!

03/09/13 12.26 O

itukan munculnya setelah minimal 2 komentar, jadi kalau ditukar jadi page view bisa nggak???

umpamanya muncul di google
rating: 5
dilihat: 15

tolong dibantu...

Anonim
05/09/13 00.39 O

Kalau di terapkan di blog wordpress self hosting, caranya gimana gan?

Thank U

07/09/13 00.42 O

@Ahmad RidoanSepertinya tidak bisa Sob.

Karena menurut referensi yang terdapat di sini ==> https://support.google.com/webmasters/answer/173379?hl=en bahwasanya Rich Snippets - Recipes tidak mengandung properti untuk menampilkan page view.

07/09/13 01.01 O

@Hani AuroraKalau untuk WP jujur saja saya kurang paham Sob. Namun terkait dengan hal tersebut ada baiknya bila Sobat buka URL rujukan tentang Rich Snippets - Recipes berikut ini ==> https://support.google.com/webmasters/answer/173379?hl=en

Semoga dapat membantu.

bang,,,klo ingin menampilkan jumlah pembaca dlan 1 postingan di blogspot gimana...misalnya = 19x dibaca

16/10/13 10.21 O

@Berita CipayungHwaduh Sob, untuk yang seperti itu, jujur saja saya sendiri juga belum tahu. Jadi mohon maaf apabila saya belum dapat memberikan solusi jawaban atas pertanyaan tersebut.

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog