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 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7A50e0EsSeKGypkTz5HqRyKXL0n38JEpjvnykpo-afjGM_z2zcX-j11zE_JMB0H7DrYUAPHvNvjuabAbHljkcClAQaxy-T_SS_GJHdJfR9uAJhNJJQm7X2_SyfLual6PARTXOd0njWY/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.


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.