Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Friday, 22 May 2015

Cara Implementasi Microdata Pada Blog

Berikut ini adalah cara implementasi Microdata pada sebuah halaman web atau blog :


     1.  Langkah yang pertama adalah login pada Blogger.com

     2.  Setelah berhasil login, klik Design, Edit HTML. Untuk antisipasi jika terjadi 
          kesalahan sebaiknya backup terlebih dahulu tamplate sebelumnya.

     3.  Selanjutnya carilah kode seperti ini:

<b:includable id='post' var='post'>


     4.  Bila sudah ditemukan, sisipkan kode ini tepat dibawahnya :

          <div itemscope = "itemscope" itemtype="http://schema.org/Person">
          <span itemprop="name">Ichsan Perdana Putra</span>
          <span itemprop="gender">Male</span>
          <span itemprop="nationality">Indonesia</span>
          <span itemprop="email">chan.perdana@gmail.com</span>
          <span itemprop="url"><a href="twitter.com/IP_13">twitter.com/IP_13</a></span>
          </div>

         nb : kode diatas dapat diubah sesuai keingin, dengan vocabulary dari schema.org

     5. Untuk mengetahui keberhasilannya, testing dengan menggunakan Structured Data 
         Testing Tool dari Google. Atau dapat menggunakan extension web browser jika ada.
         Hasilnya adalah :


Structured Data Testing Tool
Microdata telah berhasil terpasang


Referensi :

http://optimasi-blog.blogspot.com/2012/12/microdata-pada-bloggercom.html
http://schema.org/

Syarat dan Ketentuan Untuk Menggunakan Microdata

Kosakata atau Vocabulary

Kosakata Microdata menyediakan bentuk semantic atau makna dari suatu benda. Pemilik web dapat membuat kosata khusus atau menggunakan kosakata yang telah tersedia pada web tersebut. Kosakata yang sering digunakan biasanya adalah kosakata dari Schema.org, ini meliputi Person, Event, Organization, Product, Review, Review-aggregate, Breadcrumb, Offer-aggregate dan sebagainya. Schema.org telah digunakan oleh banyak mesin pencarian seperti Google, Yahoo dan Microsoft untuk meningkatkan hasil pencarian mereka. Selain Schema.org, terdapat kosakata yang sering digunakan yaitu Vocabulary.org.

Atribut

Kita harus paham dengan atribut yang akan digunakan dalam sebuah microdata. Berikut adalah atribut-atribut global dan kegunaannya :
  •           Itemscope : Menunjukan suatu benda berisi informasi mengenai benda tersebut
  •           Itemtype   : Menunjukan sifat-sifat dari suatu benda
  •           Itemid       : Menunjukan kode unik atau ID suatu benda
  •           Itemprop   : Menunjukan nilai suatu benda seperti nama, elemen dan unsur lain

Contoh Penggunaan atribut :

           <section> Hello, my name is John Doe, I am a graduate research assistant at
the University of Dreams.
My friends call me Johnny.
You can visit my homepage at 
<a href="http://www.JohnnyD.com">www.JohnnyD.com</a>.
I live at 1234 Peach Drive, Warner Robins, Georgia.</section>

Berikut adalah markup yang sama dengan menambahkan Schema.org :

<section itemscope itemtype="http://schema.org/Person">
Hello, my name is
<span itemprop="name">John Doe</span>,
I am a
<span itemprop="jobTitle">graduate research assistant</span>
at the
<span itemprop="affiliation">University of Dreams</span>.
My friends call me
<span itemprop="additionalName">Johnny</span>.
You can visit my homepage at
<a href="http://www.JohnnyD.com" itemprop="url">www.JohnnyD.com</a>.
<section itemprop="address" 
itemscope itemtype="http://schema.org/PostalAddress">
I live at
<span itemprop="streetAddress">1234 Peach Drive</span>,
<span itemprop="addressLocality">Warner Robins</span>,
<span itemprop="addressRegion">Georgia</span>.
</section>
</section>

Penjelasan :

<section itemscope itemtype="http://schema.org/Person">
Tipe yang digunakan adalah orang

<span itemprop="name">John Doe</span>
Untuk item nama

<span itemprop="jobTitle">graduate research assistant</span> 
Untuk item pekerjaan

<span itemprop="affiliation">University of Dreams</span>
Untuk item afiliansi

<span itemprop="additionalName">Johnny</span>
Untuk item nama tambahan

<section itemprop="address" itemscope
itemtype="http://schema.org/PostalAddress">
Tipe yang diubah menjadi alamat

<span itemprop="streetAddress">1234 Peach Drive</span>
Untuk item jalan

<span itemprop="addressLocality">Warner Robins</span>
Untuk item lokasi


<span itemprop="addressRegion">Georgia</span>
Untuk item wilayah bagian


Referensi :

http://en.wikipedia.org/wiki/Microdata_(HTML)
http://schema.org/

Microdata

Microdata adalah sebuah script baru HTML5 yang memungkinkan data dapat dibaca oleh mesin (dalam hal ini Search Engine) untuk dimasukan dalam sebuah dokumen HTML. Dengan kata lain Microdata membantu komputer untuk memahami isi yang terdapat dari suatu halaman web.

Microdata membuat suatu halaman web lebih mudah untuk diurai dan dimengerti oleh komputer sehingga pengguna dapat menggunakan informasi pada suatu halaman web untuk membuat suatu informasi yang lebih akurat.


Perusahaan Search Engine seperti Bing, Google dan Yahoo menggunakan Microdata untuk menampilkan banyak potongan-potongan data dalam hasil pencarian mereka, seperti sebuah peristiwa, nama seseorang yang terkenal, hingga ke suatu ulasan tertentu. 

Tools Microdata Reveal Google Chrome

Gambar diatas adalah contoh penggunaan Tools Microdata. Terlihat dalam suatu halaman web IMDB, tools tersebut mengambil Microdata yang ada seperti nama film, genre film, tanggal publish dan sebagainya. Sehingga kita dapat menggunakan informasi yang ada dengan lebih mudah dan akurat.


Referensi :

http://webdesign.about.com/od/microdata/a/what-is-microdata.htm