Penerapan Microdata + Schema.org

Ukuran: px

Mulai penontonan dengan halaman:

Download "Penerapan Microdata + Schema.org"

Lanny Harjanti Makmur
7 tahun lalu
Tontonan:

Penerapan Microdata + Schema.org Microdata merupakan format pemberian tag pada dokumen HTML 5 yang memungkinkan data bisa lebih dikenali oleh mesin pencari.

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.

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.

2 Bagaimana menggunakan Microdata? Untuk memberi tag artikel (misalnya: website berita) Contoh, saya mengambil berita dari Kompas Online: et.masih.normal Surono: Aktivitas Gunung Slamet Masih Normal Rabu, 12 Maret :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= g.slamet.masih.normal >Surono: Aktivitas Gunung Slamet Masih Normal</a></h2> <span class= date >Rabu, 12 Maret :42 WIB </span> <img src= /> <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 <div itemscope itemtype= > <h2 itemprop= name content= Surono: Aktivitas Gunung Slamet Masih Normal ><a itemprop= url href= g.slamet.masih.normal >Surono: Aktivitas Gunung Slamet Masih Normal</h2> <span class= date itemprop= datecreated content= >Rabu, 12 Maret :42 WIB </span> <img itemprop= image src= /> <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> </div>

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 = 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= >Ini Judul</a></h2> <h2 itemprop= name content= Ini Judul ><a href= >Ini Judul</a></h2> karena ada link, maka nilai name dimasukkan dalam content. Atau bisa juga: <h2><a href= ><span itemprop= name >Ini Judul</span></a></h2> temprop= url menandai URL itemprop= datecreated menandai tanggal tulisan diuat. Diberi tag content= 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= > <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).

Menerapkan Microdata + Schema.org untuk menandai buku Untuk menandai buku, vocabulary yang digunakan adalah: Book, http://schema.org/book Property yang didukung a.

6 Menerapkan Microdata + Schema.org untuk menandai buku Untuk menandai buku, vocabulary yang digunakan adalah: 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 URL Gambar: ISBN: 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 Penerbit: Desantara Foundation

7 Tandai dengan Microdata + Schema.org <div itemscope itemtype= itemref= thumb > <h1 itemprop= name >Bissu: Pergulatan dan Peranannya di Msyarakat Bugis</h1> <img id= thumb-3200 itemprop= image src= /> <span itemprop= author >Halilintar Lathif</span> <span itemprop= isbn > </span> <span itemprop= datepublished content= 2004 >2004</span> <span itemprop= numberofpages >219</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: <meta itemprop= url content= /> letakkan sebelum </div> dari wrapper di atas.

8 Setelah halaman ditandai dengan Microdata + Schema.org, lihat hasil ekstraksi. Bisa kita coba fasilitas ekstraksi Rich Snippet milik Google: Alamatnya: Lalu lihat hasilnya. Kalau tidak ada kesalahan, maka Google akan menampilkan hasil ekstraksi dari Microdata yang kita buat. Contoh tampilan hasil ekstraksi dari 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. Selamat mencoba.

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: , info@paradesain.net

dokumen-dokumen yang mirip

BAB IV ANALISA DAN PERANCANGAN

BAB IV ANALISA DAN PERANCANGAN 4.1. Analisa Pada tahap spesifikasi ini, dokumen yang menjadi acuan dalam proses analisa untuk spesifikasi sistem adalah dokumen informasi yang terdapat di website madu hutan