Penerapan Microdata + Schema.org

(1)

Penerapan Microdata + Schema.org

Microdata merupakan format pemberian tag pada dokumen HTML 5 yang memungkinkan data bisa lebih dikenali oleh mesin pencari. Tag ini akan menandai jenis dokumen, judul, foto, penulis, jumlah komentar, review, jumlah halaman buku, dll.

Schema.org merupakan vocabulary berisi kumpulan tag-tag untuk menandai dokumen HTML sesuai jenisnya. Schema.org merupakan proyek bersama mesin pencari: Google, Yahoo!, Bing. Format Microdata + Schema.org merupakan format penulisan mata data yang direkomendasikan.

Search engines including Bing, Google, Yahoo! and Yandex rely on this markup to improve the display of search results, making it easier for people to find the right web pages. (schema.org).

Bing, Google, Yahoo! Dan Yandex menggunakan schema.org untuk meningkatkan tampilan hasil pencarian agar lebih sesuai dengan yang dibutuhkan.

(2)

Bagaimana menggunakan Microdata?

Untuk memberi tag artikel (misalnya: website berita)

Contoh, saya mengambil berita dari Kompas Online:

http://regional.kompas.com/read/2014/03/12/1442519/Surono.Aktivitas.Gunung.Slam et.Masih.Normal

Surono: Aktivitas Gunung Slamet Masih Normal Rabu, 12 Maret 2014 | 14:42 WIB

JAKARTA, KOMPAS.com - Pakar Vulkanologi, Surono, mengatakan bahwa aktivitas yang ditunjukkan Gunung Slamet di Jawa Tengah masih tergolong biasa sebagai gunung api. Oleh karena itu, masyarakat tidak perlu panik. Potongan berita di atas ada di halaman depan, jadi ada juga berita-berita yang lain.

(3)

Berita di atas misalnya mempunyai susunan html seperti

ini:

<h2><a

href=”http://regional.kompas.com/read/2014/03/12/1442519/Surono.Aktivitas.Gunun g.Slamet.Masih.Normal”>Surono: Aktivitas Gunung Slamet Masih

Normal</a></h2>

<span class=”date”>Rabu, 12 Maret 2014 | 14:42 WIB </span> <img src=”http://kompas.com/gambar_gunung.jpg />

<p>JAKARTA, KOMPAS.com - Pakar Vulkanologi, Surono, mengatakan bahwa aktivitas yang ditunjukkan Gunung Slamet di Jawa Tengah masih

tergolong biasa sebagai gunung api. Oleh karena itu, masyarakat tidak perlu panik.</p>

Setelah beri tag Microdata + Schema.org

<h2 itemprop=”name” content=”Surono: Aktivitas Gunung Slamet Masih Normal”><a itemprop=”url”

href=”http://regional.kompas.com/read/2014/03/12/1442519/Surono.Aktivitas.Gunun g.Slamet.Masih.Normal”>Surono: Aktivitas Gunung Slamet Masih

Normal</h2>

<span class=”date” itemprop=”dateCreated” content=”2014-03-12”>Rabu, 12 Maret 2014 | 14:42 WIB </span>

<img itemprop=”image” src=”http://kompas.com/gambar_gunung.jpg /> <p itemprop=”description”>JAKARTA, KOMPAS.com - Pakar Vulkanologi, Surono, mengatakan bahwa aktivitas yang ditunjukkan Gunung Slamet di Jawa Tengah masih tergolong biasa sebagai gunung api. Oleh karena itu, masyarakat tidak perlu panik.</p>

(4)

Penjelasan:

itemscope = merupakan kerangka/wrapper, jadi semua yang di dalam tag ini dianggap sebagai anggota, dalam hal ini bagian dari “Article”. Oleh karena itu saya tambahkan tag <div> di awal dan penutup </div> di akhir.

itemtype = “http://schema.org/Article

menandai jenis dokumen adalah artikel

itemprop=”name” menandai nama/ judul dokumen→

alternatif menandai judul: <h2>Ini Judul</h2>

<h2 itemprop=”name”>IniJudul</h2>

<h2><a href=”http://domain.com/ini-judul”>Ini Judul</a></h2> <h2 itemprop=”name” content=”Ini Judul”><a

href=”http://domain.com/ini-judul”>Ini Judul</a></h2>

karena ada link, maka nilai name dimasukkan dalam content. Atau bisa juga:

<h2><a href=”http://domain.com/ini-judul”><span itemprop=”name”>Ini Judul</span></a></h2>

temprop=”url” → menandai URL

itemprop=”dateCreated” menandai tanggal tulisan diuat. Diberi tag →

content=”2014-03-14” karena format harus standar menggunakan ISO date

itemprop=”image” menandai gambar→

temprop=”description” menandai deskripsi tulisan→

Jika mempunyai penulis bisa ditandai sbb: <span itemprop=”author”>Joko Santoso</span>

(5)

Misalnya menggunakan tag HTML 5,

<section itemscope itemtype=” itemtype=”http://schema.org/Article”> <title itemprop=”name”>Surono: Aktivitas Gunung Slamet Masih Normal</title>

…... </section>

Intinya tag Microdata disisipkan dalam tag HTML (h1,h2,h3, p, span, strong, em, td, tr, dd, li, a, section, dll).

(6)

Menerapkan Microdata + Schema.org

untuk menandai buku

Untuk menandai buku, vocabulary yang digunakan adalah: Book,

http://schema.org/Book” Property yang didukung a.l:

Name, author, editor, publisher, contributor, dateCreated, datePublished, ISBN, numberofPages, image, description, url, dll.

Contoh

Judul Buku:

Bissu: Pergulatan dan Peranannya di Msyarakat Bugis

URL

http://www.desantara.or.id/09-2011/3200/bissu-pergulatan-dan-peranannya-di-masyarakat-bugis/

URL Gambar: http://www.desantara.or.id/wp-content/uploads/2011/09/bissu.jpg

ISBN: 9793596007

Deskripsi:

Bissu adalah pendeta agama Bugis kuno pra Islam. Ketua para bissu adalah seorang yang bergelar Puang Matowa atau Puang Towa. Secara biologis, sekarang, bissu kebanyakan laki-laki (berpenis) dan sedikit yang perempuan (bervagina). Dalam kesehariannya, bissu berpenampilan seperti layaknya perempuan. Sehingga tidak mudah membedakan mana bissu yang laki-laki dan mana bissu yang perempuan.

Penulis: Halilintar Lathif

Tahun Terbit: 2004

Jumlah Halaman: 219

(7)

Tandai dengan Microdata + Schema.org

<h1 itemprop=”name”>Bissu: Pergulatan dan Peranannya di Msyarakat Bugis</h1>

<img id=”thumb-3200” itemprop=”image” src=”http://www.desantara.or.id/wp-content/uploads/2011/09/bissu.jpg

” />

<span itemprop=”author”>Halilintar Lathif</span> <span itemprop=”isbn”>9793596007</span>

<p itemprop=”description”>Bissu adalah pendeta agama Bugis kuno pra Islam. Ketua para bissu adalah seorang yang bergelar Puang Matowa atau Puang Towa. Secara biologis, sekarang, bissu kebanyakan laki-laki (berpenis) dan sedikit yang perempuan (bervagina). Dalam kesehariannya, bissu berpenampilan seperti layaknya perempuan. Sehingga tidak mudah membedakan mana bissu yang laki-laki dan mana bissu yang perempuan.</p>

<span itemprop=”publisher”>Desantara Foundation</span> </div>

Untuk halaman detail biasanya judul tidak ada linknya, untuk menambahkan bisa dipakai tag meta:

(8)

Setelah halaman ditandai dengan Microdata + Schema.org, lihat

hasil ekstraksi. Bisa kita coba fasilitas ekstraksi Rich Snippet milik

Google:

Alamatnya:

https://www.google.com/webmasters/tools/richsnippets

Lalu lihat hasilnya. Kalau tidak ada kesalahan, maka Google akan menampilkan hasil ekstraksi dari Microdata yang kita buat.

Contoh tampilan hasil ekstraksi dari www.paradesain.net yang mengunakan format RDFa.

(9)

Hasil ekstrak data terstruktur:

Apakah setelah menggunakan Microdata + Schema.org lalu pasti akan menjadi nomor satu di Google, Yahoo, atau Bing? Tentu tidak. Tapi dengan format yang benar, memungkinkan data bisa dibaca dengan lebih baik sehingga akan sampai juga ke pembaca yang tepat sesuai dengan kata kunci yang dimasukkan.

Isi web tetap yang utama, tapi dengan format yang benar memungkinkan isi web yang baik lebih terlihat oleh calon pengunjung. Jadi isi yang baik dan format yang benar akan saling mendukung.

(10)

Apakah website anda sudah

menerapkan teknologi semantik?

Kami melayani pemformatan ulang website menjadi website semantik, mengunakan:

– Microdata + Schema.org

– RDFa (+ontology yang sesuai)

Kami juga melayani pembuatan website profesional dari Website Berita,

Jurnal Ilmiah, Toko Online, Web Directory, Web Property, Web Kuliner, Web Organisasi, dll. Untuk website profesional kami menggunakan

Microdata/RDFa.

Engine menggunakan CMS Wordpress dan Drupal.

Selain itu, kami juga melayani: Jasa Migrasi Website

Jasa Re-Design Website Jasa Konsultasi SEO CALL ME:

Sumedi MP

hp: 0812 1962 8057, 0815 8601 7439 email: [email protected]