Microformat & Microdata - Rich Snippets

HTML sitemap

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:

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-9<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:

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-9<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:

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-9<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...

Artikel Terkait

  • Membatasi jumlah posting di halamam label
    Seringkali terkadang jumlah posting yang muncul di halaman search label blogger melebihi jumlah yang sudah kita terapkan di pengaturan dasar, ketik kita telah mengatur jumlah posting yang muncul di halaman beranda blogger dengan jumlah maksimal misalkan sepuluh posting maka poating yang akan muncul di halaman label akan tetap berada di jumlah…
  • Breadcrumb Microdata valid HTML5
    Fungsi dari breadcrumb pada blog adalah untuk mengetahui sedang dihalaman mana sekarang pengunjung berada. Dengan breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu, breadcrumb juga sangat baik untuk SEO blog karena memperkaya kata kunci dalam postingan. Hal ini terbukti dari beberapa postingan blog sesepuh seperti, kang ismet,…
  • Microformat & Microdata - Rich Snippets
    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 t…
  • Pencarian dengan tombol bersihkan
    Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda. Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link i…
  • Highlighter Language Autodetection
    Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Synta…
  • Cara membuat penomoran otomatis pada tag pre
     Setelah sebelumnya saya share cara membuat header judul pada tag pre kali ini saya mau berbagi tentang cara bagaiman memberi urutan nomor pada tag pre yang bisa langsung hanya dengan menambahkan css saja dan sedikit penambahan kode html pada elemen tag pre. untuk bagaimana hasilnya silahkan di lihat di blog ini. langsung ke topik pembah…
Back to Top
Loading...