Schema.org Markup, Fungsi dan Cara Penggunaannya

Schema.org Markup atau sering disebut Schema Markup adalah kosakata semantik dari tag (atau mikrodata) yang dapat Anda tambahkan ke elemen HTML untuk meningkatkan cara mesin telusur membaca dan merepresentasikan halaman Anda di dalam SERP (Search Engine Result Page).

Schema.org menyediakan kumpulan kosakata yang dapat digunakan oleh webmaster untuk menandai halaman mereka dengan cara yang dapat dipahami oleh mesin pencari seperti: Google, Microsoft, Yandex, dan Yahoo.

Fungsi Shema.org Markup

Fungsi schema markup adalah untuk menandai suatu elemen html agar mesin pencari dapat dengan mudah memahami isi pada suatu halaman. Jadi pada dasarnya schema markup ini hanya untuk bot mesin telusur agar mesin telusur dapat dengan mudah memahami elemen yang tersajikan pada suatu situs web.

Kebanyakan webmaster sudah familiar dengan tag HTML di halaman mereka. Biasanya, tag HTML memberi tahu browser cara menampilkan informasi yang disertakan dalam tag. Misalnya, <h1> Avatar </h1> memberi tahu browser untuk menampilkan string teks “Avatar” dalam format Heading 1(H1). Namun, tag HTML tidak memberikan informasi apa pun tentang arti string teks itu— “Avatar” dapat merujuk ke film 3D yang sangat sukses, atau dapat merujuk pada jenis gambar profil — dan ini dapat mempersulit mesin penelusuran untuk secara cerdas menampilkan konten yang relevan kepada pengguna.

Maka dari itu schema markup ini akan dibutuhkan oleh mesin telusur untuk memahami element html yang ada pada suatu website.

Cara Penggunaan Schema.org Markup

Umumnya schema.org markup digunakan bersamaan dengan format Microdata, RDFa, atau JSON-LD. Pada panduan ini akan menjelaskan tentang cara menggunakan schema.org dan microdata.

1. Cara memberi markup konten menggunakan microdata

a. Kenapa menggunakan microdata?

Halaman web Anda memiliki makna mendasar yang dipahami orang ketika mereka membaca halaman web. Tetapi mesin pencari memiliki pemahaman yang terbatas tentang apa yang sedang dibahas di halaman tersebut. Dengan menambahkan tag tambahan ke HTML laman web Anda — tag yang mengatakan, “Hai mesin telusur, informasi ini menjelaskan film, atau tempat, atau orang, atau video tertentu ini” —Anda dapat membantu mesin telusur dan aplikasi lain untuk lebih memahami konten Anda dan menampilkannya dengan cara yang berguna dan relevan. Microdata adalah sekumpulan tag, diperkenalkan dengan HTML5, yang memungkinkan Anda melakukan ini.

b. itemscope dan itemtype

Mari kita mulai dengan contoh konkret. Bayangkan Anda memiliki halaman tentang film Avatar — halaman dengan link ke cuplikan film, informasi tentang sutradara, dan sebagainya. Kode HTML Anda mungkin terlihat seperti ini:

<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Untuk memulai, kenali bagian halaman yang “tentang” film Avatar. Untuk melakukan ini, tambahkan elemen itemscope ke tag HTML yang menyertakan informasi tentang item tersebut, seperti ini:

<div itemscope>
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954) </span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Dengan menambahkan itemscope, Anda menetapkan bahwa HTML yang terdapat dalam blok <div> ... </div> adalah tentang item tertentu.

Tetapi tidak terlalu membantu untuk menentukan bahwa ada item yang sedang dibahas tanpa menentukan jenis item itu. Anda dapat menentukan jenis item menggunakan atribut itemtype segera setelah itemscope.

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Ini menetapkan bahwa item yang ada di div sebenarnya adalah Film, sebagaimana ditentukan dalam hierarki jenis schema.org. Jenis item disediakan sebagai URL, dalam hal ini http://schema.org/Movie.

c. itemprop

Informasi tambahan apa yang dapat kami berikan kepada mesin pencari tentang film Avatar? Film memiliki sifat yang menarik seperti aktor, sutradara, rating. Untuk memberi label properti item, gunakan atribut itemprop. Misalnya, untuk mengidentifikasi sutradara film, tambahkan itemprop = “sutradara” ke elemen yang menyertakan nama sutradara. (Ada daftar lengkap semua properti yang dapat Anda kaitkan dengan film di http://schema.org/Movie.)

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Perhatikan bahwa kami telah menambahkan tag <span> ... </span> tambahan untuk melampirkan atribut itemprop ke teks yang sesuai di laman. Tag <span> tidak mengubah cara halaman dirender oleh browser web, jadi mereka adalah elemen HTML yang nyaman untuk digunakan dengan itemprop.

Mesin pencari sekarang dapat memahami tidak hanya bahwa http://www.avatarmovie.com adalah sebuah URL, tetapi juga bahwa itu adalah URL untuk cuplikan film fiksi ilmiah Avatar, yang disutradarai oleh James Cameron.

d. Embedded items

Terkadang nilai properti item itu sendiri bisa menjadi item lain dengan set propertinya sendiri. Misalnya, kita dapat menentukan bahwa sutradara film adalah item bertipe Person dan Person memiliki nama properti dan tanggal lahir. Untuk menentukan bahwa nilai properti adalah item lain, Anda memulai itemscope baru segera setelah itemprop terkait.

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

2. Menggunakan schema.org

 a. schema.org types and properties

Tidak semua laman web berisi tentang film dan orang — selain jenis Film dan Orang yang dijelaskan di bagian 1, schema.org mendeskripsikan berbagai jenis item lainnya, yang masing-masing memiliki kumpulan properti sendiri yang dapat digunakan untuk mendeskripsikan barang.

Berikut sekumpulan jenis item yang umum digunakan:

• Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries
• Embedded non-text objects: AudioObject, ImageObject, VideoObject
• Event
• Organization
• Person
• Place, LocalBusiness, Restaurant
• Product, Offer, AggregateOffer
• Review, AggregateRating

b. Expected types dan URL

Berikut beberapa catatan yang perlu Anda perhatikan saat menambahkan markup schema.org ke halaman web.

• Lebih banyak lebih baik, kecuali untuk teks tersembunyi. Secara umum, semakin banyak konten yang Anda markup, semakin baik. Namun, sebagai aturan umum, Anda harus mem-markup hanya konten yang terlihat oleh orang-orang yang mengunjungi halaman web dan bukan konten di div tersembunyi atau elemen halaman tersembunyi lainnya.
• Expected types vs teks. Saat menjelajahi jenis schema.org, Anda akan melihat bahwa banyak properti memiliki “Expected types“. Ini berarti bahwa nilai properti itu sendiri dapat menjadi item yang disematkan (lihat bagian 1d: Embedded items). Namun ini bukan persyaratan — tidak masalah untuk menyertakan teks biasa atau URL saja. Selain itu, setiap kali tipe yang diharapkan ditentukan, Anda juga dapat menyematkan item yang merupakan tipe turunan dari tipe yang diharapkan. Misalnya, jika tipe yang diharapkan adalah Place, Anda juga bisa menyematkan LocalBusiness.
• Using the url property. Beberapa halaman web membahas item tertentu. Misalnya, Anda mungkin memiliki halaman web tentang satu orang, yang dapat Anda markup menggunakan jenis item Orang. Halaman lain memiliki kumpulan item yang dijelaskan di dalamnya. Misalnya, situs perusahaan Anda dapat memiliki halaman yang mencantumkan karyawan, dengan link ke halaman profil untuk setiap orang. Untuk halaman seperti ini dengan koleksi item, Anda harus menandai setiap item secara terpisah (dalam hal ini sebagai serangkaian Orang) dan menambahkan properti url ke link ke halaman yang sesuai untuk setiap item, seperti ini:

<div itemscope itemtype="http://schema.org/Person">
  <a href="alice.html" itemprop="url">Alice Jones</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
  <a href="bob.html" itemprop="url">Bob Smith</a>
</div>

c. Menguji markup

Sama seperti browser web yang penting untuk menguji perubahan pada tata letak halaman web Anda, dan kompiler kode penting untuk menguji kode yang Anda tulis, Anda juga harus menguji markup schema.org untuk memastikannya diterapkan dengan benar. Google menyediakan alat pengujian data terstruktur, yang dapat Anda gunakan untuk menguji markup dan mengidentifikasi kesalahan apa pun.