Bismillah. Alhamdulillah. Berawal dari rasa penasaran dengan perkembangan standar bahasa HTML dan tingkah laku mesin pencari, juga rasa penasaran dengan gencarnya para Blogger membahas "cara menampilkan bintang pada hasil penelusuran Google" yang secara garis besar para Blogger baik lokal maupun global hanya membahas cara-caranya saja tanpa detail maksud dan tujuan hingga memperoleh bintang pada hasil penelusuran. Muncul berbagai pertanyaan dalam benak saya secara pribadi. Untuk apakah jika kita memperoleh bintang? Berpengaruhkan hal tersebut terhadap blog kita dihadapan mesin pencari? dan lain sebagainya. Hingga terjadilah pertemuan dengan istilah Rich Snippet yang sedang hangat dibahas, terutama Google yang gencar memperkenalkan Rich Snippet pada para webmaster. Masih hangat beberapa saat yang lalu, Blogger Tune-Up membahas tentang metadata dengan standar Open Graph, sekarang akan dibahas yang mirip-mirip namanya tetapi berbeda fungsinya yaitu microdata dan microformat. Apa perbedaan microdata dan microformat? Dan apa hubungannya dengan Rich Snippet? Atau justru masih bertanya, apa Rich Snippet? Mari sama-sama menyimak artikel ini.
Apa dan Untuk Apa Rich Snippet?
Jika diterjemahkan perkata mungkin akan menghasilkan persepsi yang berbeda. Rich Snippet dalam bahasa Indonesia berarti sama dengan Sisipan Kaya. Sesuai dengan namanya maka Rich Snippet digunakan untuk memperjelas atau memberikan deskripsi tambahan dari suatu situs agar pengunjung dengan mudah menemukan target yang dicarinya. Silahkan anda perhatikan mesin pencari dalam menampilkan suatu kata kunci, semakin sedikit situs spam yang menggunakan black hat SEO ter-index pada mesin pencari hal ini salah satunya dipengaruhi oleh Rich Snippet. Jika suatu situs menambahkan Rich Snippet sama persis seperti situs resminya maka situs tersebut dianggap sebagai situs sampah. Sisipan Kaya berfungsi untuk menambahkan atau melengkapi informasi yang penting untuk diketahui oleh pengguna internet. Misal; Kita akan mencari suatu aplikasi dengan nama "Tune Up Utilities" namun lupa nama lengkap aplikasi tersebut, yang kita ingat hanya kata "Tune Up". Ketika kita mencari aplikasi tersebut dengan kata kunci "Tune Up" pada mesin pencari maka akan disuguhkan sederet situs yang beragam, beberapa kemungkinan yang bisa saja muncul pada mesin pencari adalah sebagai berikut:
- Tune-Up yang berhubungan dengan blog ini
- Tune-Up yang berhubungan dengan mesin
- Tune-Up yang berhubungan dengan aplikasi
Situs mana yang akan diklik? Dapat dipastikan pengguna internet akan meng-klik "Tune Up Utilities 2012 - CNET Download.com" sesuai tujuannya untuk memperoleh informasi lengkap tentang aplikasi tersebut. Nomor 1 itulah yang kemudian dikenal dengan Rich Snippet yang berisi informasi sisipan tentang:
- Rating
- Penulis Ulasan
- Harga
- Sistem Operasi
- Kategori Aplikasi
Dan kecil kemungkinan pengguna nyasar ke situs "Blogger Tune Up". Disinilah fungsi Rich Snippet yang membuat mesin pencari lebih mudah untuk digunakan oleh pengguna yang awam sekalipun. Index mesin pencari pun semakin mendekati sasaran yang benar-benar dibutuhkan oleh pengguna internet. Rich Snippet akan memberikan informasi yang sangat berguna bagi pengguna.
Sedangkan Nomor 2 pada gambar biasanya diambil dari meta description.Manusia Pertama, Mesin Kedua
Human First, Machines Second adalah kalimat yang selalu ditekankan oleh para webmaster. Intinya, ketika kita membuat sebuah situs maka hal yang pertama harus diperhatikan adalah para pengunjung baik itu dari sisi usability dan accessibility. Sedangkan mesin adalah prioritas kedua dalam membangun sebuah situs. Tim Berners - Lee menyebutkan:
... berbagai informasi penting dalam desain web digunakan untuk konsumsi manusia, dan ... stuktur data tidak ditujukan untuk robot web browsing. ... Semantic Web disusun dalam membantu pendekatan bahasa untuk mengekspresikan informasi kedalam sebuah mesin pemrosesan formulir.
Dari penjelasan diatas dapat diambil kesimpulan bahwa pada dasarnya desain web itu mengutamakan manusia namun ketika kita menyusun web dengan aturan semantic berarti kita juga melakukan pendekatan pada mesin. Semantic berada diantara web desainer dan mesin yang digunakan sebagai media untuk saling berkomunikasi dan Rich Snippet harus disusun sesuai dengan Semantic Web.
Kenapa Harus Menambahkan Rich Snippet?
Kebanyakan para webmaster sangat familiar dengan tag HTML dalam menyusun halam web. Dan biasanya tag HTML ditulis untuk memberitahu browser bagaimana menampilkan informasi yang ada didalam tag. Sebagai contoh; <h1>Tune Up</h1>. Tag ini berarti memberitahu browser untuk menampilkan string teks "Tune Up" dalam format heading 1 (Judul 1). Namun, tag HTML ini tidak memberikan informasi apa-apa tentang arti string teks tersebut. Apakah string teks "Tune Up" tersebut merupakan sebuah aplikasi, sebuah blog, atau tentang mesin? Sehingga hal ini menjadi sangat sulit bagi mesin pencari untuk menampilkan informasi yang relevan kepada pengguna internet. Dimulai dari permasalah inilah kemudian mesin pencari (Google, Yahoo!, Microsoft dan Yandex) memperkenalkan Rich Snippet agar hasil pencarian mereka menjadi lebih relevan sesuai dengan apa yang dicari pengguna internet.
Seperti dijelaskan diatas bahwa untuk menyusun Rich Snippet, kita harus mengikuti aturan main semantic agar web yang kita susun mampu dengan mudah dibaca oleh mesin pencari. Dalam menyusun Rich Snippet para webmaster menyarankan dua format yaitu microdata dan microformat. Format microdata dan microformat sebenarnya merupakan pengembangan dari bahasa mark up, sehingga dalam penggunaannya pun terintegrasi didalam tag-tag HTML yang sudah ada. Namun tidak menutup kemungkinan untuk menyusun Rich Snippet didalam tag HTML secara terpisah.
Apa Microformat dan Microdata?
Microdata hampir sama dengan microformat, karena keduanya merupakan perkembangan bahasa markup yang masih termasuk kedalam machine-readable metadata (mesin pembaca metadata) untuk menguraikan konten web. Tag HTML, Microdata dan Microformat adalah bahasa markup unik yang saling melengkapi satu sama lain dan ketiganya sangat membantu mesin pencari dalam merayapi halaman-halaman web. Diantara ketiganya, microdata merupakan perkembangan bahasa markup terbaru yang keberadaannya memberikan persaingan selaras terhadap microformat yang menggunakan standar RDFa. Dalam penggunaannya, sebenarnya para webmaster bebas untuk menentukan format markup-nya, boleh menggunakan microformat saja, microdata saja atau menggunakan keduanya. Namun webmaster terutama Google menyarankan penggunaan kedua format tersebut.
Microformat didesain untuk berbagai jenis konten web secara umum. Mereka terintegrasi didalam markup dan atribut yang sebenarnya mudah untuk dipahami dan digunakan. Dan mereka sangatlah sederhana karena menggunakan kosakata pre-defined, misal; fn, author, rel, vcard, updated, dan sebagainya. Microformat menggunakan format standar yang didefinisikan oleh microformat.org.
Contoh penggunaan microformat:<dl class="vcard">
<dt class="fn"><a href="http://modification-blog.blogspot.com" class="url">Hendriono</a></dt>
<dd class="title">Web Desain</dd>
<dd class="adr"><span class="locality">Ciamis</span>, <abbr title="Jawa Barat" class="region">JABAR</abbr> <span class="postal-code">46383</span></dd>
</dl>
Perhatikan nilai dari atribut class (vcard, fn, url, title, adr, locality, region, postal-code). Dari contoh diatas dapat diambil kesimpulan bahwa microformat bisa diintegrasikan didalam atribut class, dan dapat digunakan bersama dengan CSS. (Insya Allah artikel berikutnya akan membahas tentang Microformat secara detail)
Microdata adalah bagian dari spesifikasi HTML5. Namun juga tergantung pada perubahan kosakata dan atribut baru dalam penerapan metadata. Dan itu tidak dibatasi untuk setiap jenis tertentu dari konten web, untuk dapat menjelaskan konten unik yang tidak mampu ditangani oleh Microformat. Selanjutnya, microdata dapat menggunakan notasi DOM, yang dapat membuat parsing metadata lebih mudah.
Ada dua standar kosakata microdata yang digunakan saat ini yaitu kosakata dari data-vocabulary.org dan kosakata dari schema.org. Namun dari keduanya, beberapa webmaster terutama Google menyarankan penggunaan kosakata dari schema.org, dengan alasan kosakata schema.org lebih banyak dan lebih fleksibel dari pada kosakata data-vocabulary. Walau contoh yang diberikan oleh Google masih menggunakan data-vocabulary namun disarankan pada webmaster untuk menggunakan Schema yang lebih banyak kosakatanya dan kemungkinan kedepannya, data-vocabulary tidak lagi digunakan.
Contoh penggunaan microdata:<dl itemscope itemtype="http://schema.org/Person">
<dt itemprop="name"><a href="http://modification-blog.blogspot.com" itemprop="url">Hendriono</a></dt>
<dd itemprop="title">Web Desain</dd>
<dd itemprop="address" itemscope itemtype="http://schema.org/Address">
<span itemprop="locality">Ciamis</span>, <abbr title="Jawa Barat" itemprop="region">JABAR</abbr> <span itemprop="postal-code">46383</span>
</dd>
</dl>
Nah, sekarang kita bisa membedakan, mana syntaks microformat dan mana syntaks microdata. Keduanya jelas memiliki perbedaan syntaks, microdata menggunakan itemscope untuk sinkronisasi dengan kosakata dan itemtype untuk deklarasi spesifik kosakata yang akan digunakan. Sedangkan itemprop adalah deklarasi masing-masing item yang harus sesuai dengan jenis kosakata (itemtype) yang digunakan.
Misal contoh diatas jika saya baca sebagai mesin; Tujuannya adalah memperkenalkan siapa Hendriono, maka syntaks wajibnya adalah itemscope. Kemudian menentukan jenis kosakata yang akan digunakan dalam memperkenalkan diri, maka syntaks itemtype spesifik mengarah pada perpustakaan http://schema.org/Person. Sedangkan itemprop adalah deklarasi masing-masing item; name, title dan address. Disana ada lagi penambahan kosakata lain yaitu http://schema.org/Address karena alamat memiliki begitu banyak item lainnya (dalam contoh; locality, region, postal-code). Apakah susunannya harus selalu seperti itu? Tidak...
Contoh diatas hanya menggunakan logika sederhana;- Siapa namanya? Hendriono
- Apa hobinya? Web Desain
- Dimana alamatnya? (Nah, pada pertanyaan ini, kita akan membutuhkan banyak sekali item jawaban, misal; Kabupaten, Propinsi, Kode POS, Nomor Telephone dan lain sebagainya, maka dibutuhkan sebuah kosakata lagi)
Walaupun memiliki perbedaan syntaks dan perbedaan standar namun microdata dan microformat bisa di-integrasikan secara bersama-sama. Dibawah ini contoh perpaduan Microformat dan Microdata:
<dl class="vcard" itemscope itemtype="http://data-vocabulary.org/Person">
<dt class="fn" itemprop="name"><a href="http://modification-blog.blogspot.com" itemprop="url">Hendriono</a></dt>
<dd class="title" itemprop="title">Web Desainer</dd>
<dd class="adr" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span class="locality" itemprop="locality">Ciamis</span>, <abbr title="Jawa Barat" class="region" itemprop="region">JABAR</abbr> <span class="postal-code" itemprop="postal-code">46383</span>
</dd>
</dl>
Warning Microformat Google Webmaster Rich Snippets
Saya secara pribadi sempat bingung dengan beberapa warning yang ditampilkan saat melakukan pemeriksaan Rich Snippet. Namun warning default yang ditampilkan Tool Rich Snippet biasanya terdiri dari tiga jenis (tidak menutup kemungkinan lebih banyak lagi) warning dan semua itu kesalahan secara default dari microformat blogger (bukan dari microdata):
Warning: Missing required hCard "author"
<span class='post-author vcard'>
<a class='url fn' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a>
</span>
Warning ini diatasi dengan menambahkan kode class='url fn'. url menunjukan link url author dan fn menunjukan nama lengkap (full name)
Warning: Missing required field "updated"
<abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>
Warning ini diatas dengan menambahkan kode class='updated published' yang menunjukan waktu diterbitkan dan waktu diupdatenya artikel.
Warning: Missing required field "entry-title"
<h2 class='post-title entry-title'>
Warning diatas diatasi dengan menambahkan entry-title pada class, untuk menunjukan judul artikel.
Situs wiki microformats.org menuliskan beberapa issue untuk para pengguna blogger, diantaranya:
- Template baru menggunakan "main" untuk identifikasi global semua artikel (entri)
- Template baru menggunakan "post" untuk identifikasi masing-masing artikel blog
- Template baru menggunakn "post-title" untuk identifikasi judul artikel
Video Rich Snippet dari Google Webmaster
Video dibawah ini dibahas oleh tim Google Webmaster khusus tentang Rich Snippet. Video-video terbaru akan ditambahkan kemudian.
Introduction to Rich Snippets
Types of Rich Snippets
Rich Snippets - Product Search
Rich Snippets - Reviews
Rich Snippets - Recipe markup
Rich Snippets - Events
Rich Snippets - Breadcrumbs
Rich Snippets - Apps
Rich Snippets - Notifying Google
Rich Snippets - Troubleshooting
When will Rich Snippets become widely available?
Kesimpulan
Artikel diatas mungkin belum memenuhi harapan akan keingintahuan tentang semantic microformat dan microdata. Artikel ini hanya pancingan agar kita jangan telalu cepat menggunakan trik-trik yang dibahas luas oleh pada blogger tanpa tahu tujuannya dan efeknya untuk blog kita. Hati-hati dalam menerapkan kode, script atau tutorial sepintas tanpa penjelasan, karena ketidaktahuan fungsi bisa membuat kita masuk dalam kotak sebagai bagian dari Blogger yang menerapkan Black Hat SEO. Dan Black Hat SEO membuat blog kita dianggap sampah oleh mesin pencari.
Lalu apakah microformat dan microdata adalah bagian dari teknik SEO. Ma'af saya bukan ahli SEO dan tidak tahu tentang SEO, saya menulis artikel ini hanya mengikuti aturan main dan standar yang ada. Blogger Tune-Up masih tetap berkomitmen "Tanpa SEO adalah SEO sebenarnya yang murni tanpa intimidasi". Sampai ketemu pada pembahasan berikutnya. Happy Blogging :)
