Microformat & Microdata - Rich Snippets

waroho

Lama mungkin tidak share untuk sahabat semua dan rasanya kurang pas jika tidak berbagi, kali ini saya sedikit membahas tentang Microformat & Microdata - Rich Snippets

Apa kegunaan dan fungsi Rich Snippets?

Rich Snippet digunakan untuk memperjelas atau memberikan deskripsi tambahan dari suatu situs agar pengunjung dengan mudah menemukan target yang dicarinya.

Jika suatu blog menambahkan Rich Snippet sama persis seperti blog resminya maka blog tersebut akan dianggap sebagai situs sampah. Rich Snippets berfungsi untuk menambahkan atau melengkapi informasi yang penting untuk diketahui oleh pengguna internet. jika kita perhatikan hasil dari mesin pencari sekarang sudah semakin sedikit situs spam yang menggunakan black hat SEO yang terindex pada mesin pencari hal ini salah satunya dipengaruhi oleh Rich Snippet.

Kenapa Harus Menambahkan Rich Snippet?

biasanya tag HTML ditulis untuk memberitahu browser bagaimana menampilkan informasi yang ada didalam tag. Sebagai contoh; <h1>DB</h1>. Tag ini berarti memberitahu browser untuk menampilkan string teks "DB" dalam format heading 1 (Judul 1). Namun, tag HTML ini tidak memberikan informasi apa-apa tentang arti string teks tersebut. 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.

Contoh penggunaan microformat:

<dl class="vcard">
<dt class="fn"><a href="http://defandaky.blogspot.com" class="url">Defandaky</a></dt>
<dd class="title">Blog Tutorial</dd>
<dd class="adr">
<span class="locality">Indonesia</span>,
<abbr title="sumatra selatan" class="region">SumSel</abbr>
<span class="postal-code">46750</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.

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.

Contoh penggunaan microdata:

<dl itemscope itemtype="http://schema.org/Person">
<dt itemprop="name"><a href="http://defandaky.blogspot.com" itemprop="url">Defandakly</a></dt>
<dd itemprop="title">Blog Tutorial</dd>
<dd itemprop="address" itemscope itemtype="http://schema.org/Address">
<span itemprop="locality">Indonesia</span>,
<abbr title="sumatra selatan" itemprop="region">Sumsel</abbr>
<span itemprop="postal-code">57609</span>
</dd>
</dl>

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.

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://defandaky.blogspot.com" itemprop="url">defandaky</a></dt>
<dd class="title" itemprop="title">Blog Tutorial</dd>
<dd class="adr" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span class="locality" itemprop="locality">indonesia</span>,
<abbr title="sumatra selatan" class="region" itemprop="region">sumsel</abbr>
<span class="postal-code" itemprop="postal-code">87965</span>
</dd>
</dl>

Warning Microformat Google Webmaster Rich Snippets

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.

Artikel di atas belum mewakili semua yang perlu di pahami, masih banyak yang perlu di gali dan semoga berguna juga bermanfaat...
Tags
Ads Section

#buttons=(Accept !) #days=(20)

Situs web kami menggunakan cookie untuk meningkatkan pengalaman Anda browsing disini. Learn More
Accept !