MTUC: Rich Snippets - Revolusi Carian

Assalamualaikum dan salam motivasi, salam kejayaan diucapkan buat semua para pembaca sekalian. Dalam pos kali ini saya akan menerangkan "Rich snippets" iaitu standard HTML yang terbaru (tak de la baru sangat, ianya dah ada pada; May 12, 2009 - Berdasarkan daripada laman Wikipedia).

Tetapi apakah dia si "Rich Snippets" ini?

Adakah ianya penting?

Ada manfaat ke "Rich Snippets" ini?

SIRI: Mengoptimumkan Template Untuk Carian(MTUC) 2012

Episod-1: Mengoptimumkan Template Untuk Carian - Pengenalan

Episod-2: MTUC: Kehebatan HTML5 Dan Cara Pemasang Dalam Theme Blogger

Episod-3: MTUC: Membuat Tajuk Halaman Blogger Mesra Carian

Episod-4: MTUC: Memasang Meta Tags Pada Blogger Dengan Betul Dan Tepat

Episod-5: MTUC: Memahami Open Graph Protocal Dan Memasang Pada Blogger

Episod-6: MTUC:Rich Snippet - Revolusi Carian

Episod-7: MTUC: Kenapa RDF Breadcrumb Tak Mesra Carian?

Episod-8:MTUC: Mengoptimumkan Link Dalam Template Untuk Carian. Link Apa?

Definisi "Rich Snippets"

Rich snippets dalam English. Agak kurang jelas maksudnya. Apa kata saya "Google translate it" menjadi Bahasa Melayu.

Rich = Kaya

Snippets = Coretan

Coretan? Apa itu? Lagi tak faham daripada English.

Maksud snippets itu ialah = Beberapa baris teks yang muncul di bawah setiap carian hasil direka untuk memberikan pengguna rasa(sense) untuk apa yang pada halaman dan mengapa ia adalah relevan kepada pertanyaan mereka.

Pun tak faham yang ini.

Lol... susahnya kan?

Untuk mudah faham beginilah ceritanya

Saya sedang mencari pada Google tentang mengenai "Tune Up".

Di situ ada banyak maksud Tune Up

Adakah Tune Up adalah sebuah perisian yang melajukan komputer?

Adakah Tune Up itu adalah sebuah tutorial untuk blog?

Adakah Tune Up itu adalah Game?

Jadi, untuk memudahkan pengguna dapat apa yang mereka cari. Maka, Google memperkenalkan Rich Snippets pada dunia :)

Adakah Ianya Penting Dalam Carian?

Penting. Tidak boleh dinafikan. Kalau anda ingin membuat sebuah laman tentang review. Anda boleh menggunakan review Rich Snippets yang akan memaparkan rating pada laman carian.

Ok, disini saya kena jelas satu perkara. Rich Snippets ini ada 3 format markup.

Antaranya ialah?

#1 - Microdata (recommended)

#2 - Microformats

#3 - RDFa

Sumber: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=99170&topic=21997&ctx=topic

Jadi, nombor 1 ialah pilihan kita.

Kenapa pilih Microdata?

Kerana Microdata ialah salah satu format markup yang boleh digunakan dalam HTML5.

P.S: Ketahuilah maklumat lebih lanjut tentang Microdata pada laman Google Support

Tapi yang format markup yang lain boleh support HTML5 tak?

Itu saya tak pasti. Kerana saya bukanlah pakar lagi tentang Rich Snippets. Anda kena cari sendirilah kalau nak jawapan yang itu.

Sekarang Anda Ingin Memasang Star Rating Pada Blogger

Kalau anda nak tahu, saya telahpun membuat satu artikel tentang Star Rating ini pada laman OMG! Hackers? Tetapi tidak mengapa, saya akan buat juga tutorialnya disini

1) Pergi ke Blogger Dashboard > Template > Klik "Edit HTML" > Klik "Proceed" > Klik "Expand Widget Templates"

2) Cari kod di bawah

<div class='post-footer'>

Nota: Yang mula-mula sekali

3) Selepas sahaja anda dah jumpa kod di atas tadi, letakkan kod di bawah di atas kod #2

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div style='display:none !important;'>
<span itemprop='itemreviewed'><span itemprop='description'><data:post.title/></span></span>
<span itemprop='reviewer'><data:post.author/></span>
Rating: <span itemprop='rating'>5</span>
<span itemprop="dtreviewed"><data:post.dateHeader/></span>
</div>
</div>
</b:if>

4) Klik "Preview" dulu.

5) Kalau tiada error SAVE N DONE!

Penerangan

Maksud = <b:if cond='data:blog.pageType == "item"'> dan </b:if>

Ialah: Star Rating hanya akan terpapar pada post page sahaja. Kalau nak paparkan pada semua page. Buang kedua-dua kod tersebut.

Maksud = <div itemscope='' itemtype='http://data-vocabulary.org/Review'>

Ialah: Format markutnya adalah Microformat.

Maksud = <div style='display:none !important;'>

Ialah: Kod nya tidak akan terpapar dalam blog anda, tetapi kodnya tetap berfungsi dalam carian.

Maksud = <span itemprop='itemreviewed'><span itemprop='description'><data:post.title/></span></span>

Ini bahagian yang best :)

itemreviewed: Apakah tajuk post anda?

description: Apakah description post anda?

Jawapannya dibalas dengan: <data:post.title/>

Disitu maksud <data:post.title/> ialah: Tajuk post anda.

Maksud = <span itemprop='reviewer'><data:post.author/></span>

Review: Siapakah yang meriew?

Jawapannya dibalas dengan: <data:post.author/>

<data:post.author/> ialah: Author yang me-riview.

Maksud = Rating: <span itemprop='rating'>5</span>

rating: Berapakah rating post tersebut?

Jawapannya dibalas dengan: 5

Anda boleh tukar 5 kepada nombor perpuluhan seperti ini: 4.9, 4.8, 4.7, 4.6 dan seterusnya kebawah. Tetapi anda tidak boleh meletakkan nombor melebihi 5, kurang tida mengapa.

Maksud = <span itemprop="dtreviewed"><data:post.dateHeader/></span>

dtreviewed: Bilakah tarikh post tersebut?

Jawapannya dibalas dengan: <data:post.dateHeader/>

<data:post.dateHeader/> ialah: Tarih post anda.

Mudahkan faham? Itulah ilmu blogger yang saya pelajari selama ini :)

Saya Sudah Pasang Star Rating Dalam Blog Saya, Bagaimana Saya Nak Pastikan Ianya Betul-betul Berfungsi?

Amat mudah.

Anda perlu pergi ke page > Structured Data Testing Tool

Bila dah masuk anda akan lihat satu kota yang tertulis; www.example.com

Dalam kota tersebut anda letaklah URL post anda.

Klik "PREVIEW"

Dan lihat hasilnya bagaimana =)

Contoh sahabat saya punya:

Klik Untuk Gambaran Jelas

Saranan

Ramai orang tersalah tafsir tentang Star Rating ini. Kalau anda menggunakan Star Rating ini dalam blog peribadi maka anda sedang me-riview kan post peribadi anda. Saranan saya ialah jangan salah guna Rich Snippet ini kerana salah guna kod ini mungkin menyebabkan blog anda kecundang.

Star Rating ini sesuai untuk blog macam:

Gagdets
Makanan/Masakan
Produk review seperti barangan digital, pakaian dan sebagainya.

Daripada Penulis

Alhamdulillah, kesyukuran tidak terhingga kepada Allah SWT kerana ilmu yang diberi kepadaku akhir dapat dikongsikan bersama rakyat Malaysia yang baik-baik belaka(ini satu doa).

Secara ringkasnya, Rich Snippets memang teramat penting dalam carian. Memang penting. Google telah membuat satu pelaburan yang agak besar bagi saya tentang Rich Snippets ini. Oleh kerana pelaburan Google buat. Akhirnya ia akan membuat Google salah satu carian yang paling dipercayai kerana membuat Rich Snippets ini.

Kalau anda merasakan tutorial ini amat susah. Anda amat di alu-alukan untuk komen dibawah yang tersedia. Anda adalah penting bagi saya. Tolonglah, saya meminta tolong kepada anda untuk kongsikan artikel ini dalam laman facebook mahupun sekadar like sahaja pun sudah cukup :)

Terima kasih kerana kesudian anda kongsikan artikel ini dalam laman sosial :D

P.S: Saya memohon maaf sekiranya saya terlambat membuat pos ini. Selalunya saya membuat pos pagi, tapi disebabkan hari ini hari Sabtu terlambat sikit. Bukan hari kerja. Kalau hari kerja awal sikit. (hehehe... )