Membuat situs semantik dengan Komponen Web dan JSON-LD

Ewa Gasperowicz

Dengan makin populernya komponen web dan library pendukung seperti Polymer, elemen kustom menjadi cara yang menarik untuk membangun fitur UI. Enkapsulasi default elemen kustom menjadikannya sangat berguna untuk membuat widget independen.

Meskipun beberapa widget bersifat mandiri, banyak di antaranya mengandalkan data eksternal untuk menampilkan konten kepada pengguna - misalnya, prakiraan cuaca saat ini untuk widget cuaca atau alamat perusahaan untuk widget peta.

Di Polymer, elemen kustom bersifat deklaratif, yang berarti setelah diimpor ke project, sangat mudah untuk menyertakan dan mengonfigurasinya dalam HTML, misalnya dengan meneruskan data untuk mengisi widget melalui atribut.

Alangkah baiknya jika kita dapat menghindari pengulangan dan memastikan konsistensi data, dengan menggunakan kembali cuplikan data yang sama untuk mengisi widget yang berbeda serta memberi tahu mesin telusur dan konsumen lainnya tentang konten halaman kita. Kita dapat mencapainya dengan menggunakan standar schema.org dan format JSON-LD untuk data.

Mengisi komponen dengan data terstruktur

Biasanya, JSON adalah cara yang mudah untuk memasukkan data ke dalam widget tertentu. Dengan meningkatnya dukungan untuk JSON-LD, kita dapat menggunakan kembali struktur data yang sama untuk menginformasikan UI serta mesin telusur dan konsumen data terstruktur lainnya tentang arti persis konten halaman.

Dengan mengombinasikan komponen web menggunakan JSON-LD, kita akan membuat arsitektur yang terdefinisi dengan baik untuk sebuah aplikasi:

  • schema.org dan JSON-LD mewakili lapisan data, sedangkan schema.org menyediakan kosakata untuk data tersebut dan JSON-LD yang merupakan format dan transportasi untuk data tersebut;
  • elemen khusus mewakili lapisan presentasi, dapat dikonfigurasi, dan terpisah dari data itu sendiri.

Contoh

Mari kita lihat contoh berikut - halaman yang mencantumkan beberapa lokasi Google Office: https://github.com/googlearchive/structured-data-web-components/tree/master/demo

Aplikasi tersebut berisi dua widget: peta dengan pin untuk setiap kantor dan dropdown yang berisi daftar lokasi. Kedua widget harus menyajikan data yang sama kepada pengguna dan halaman tersebut dapat dibaca oleh mesin telusur.

Halaman demo Komponen Web dan JSON-LD

Dalam demo ini, kami menggunakan entitas LocalBusiness untuk mengekspresikan arti data kami, yang merupakan lokasi geografis dari beberapa Kantor Google.

Cara terbaik untuk memeriksa cara Google membaca dan mengindeks halaman ini adalah melalui Alat Pengujian Data Terstruktur baru yang ditingkatkan. Kirim URL demo di bagian Ambil URL, lalu klik Ambil dan validasi. Bagian di sebelah kanan akan menunjukkan penguraian data yang diambil dari halaman bersama dengan error yang mungkin terjadi. Ini adalah cara yang sangat mudah untuk memeriksa apakah markup JSON-LD Anda sudah benar dan dapat diproses oleh Google.

UI alat pengujian data terstruktur.

Anda dapat membaca selengkapnya tentang alat ini dan peningkatan yang diperkenalkan di postingan blog Pusat Webmaster.

Menautkan komponen ke sumber data terstruktur

Kode untuk demo dan komponen web yang digunakan untuk membangunnya ada di GitHub. Mari kita lihat kode sumber halaman combined-demo.html.

Sebagai langkah pertama, kami menyematkan data di halaman menggunakan skrip JSON-LD:

<script type="application/ld+json">
{...}
</script>

Dengan cara ini, kami memastikan bahwa data mudah diakses oleh konsumen lain yang mendukung standar schema.org dan format JSON-LD, mis. mesin telusur.

Sebagai langkah kedua, kita menggunakan dua komponen web untuk menampilkan data:

  • address-dropdown-jsonld - Elemen ini membuat dropdown dengan semua lokasi yang diteruskan dalam atribut “jsonld”.
  • google-map-jsonld - Elemen ini membuat peta Google dengan pin untuk setiap lokasi yang diteruskan dalam atribut “jsonld”.

Untuk melakukannya, kami mengimpornya ke halaman menggunakan impor HTML.

<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">

Setelah diimpor, kita dapat menggunakannya di halaman:

<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>

Terakhir, kita kaitkan data JSON-LD dan elemen secara bersamaan. Kami melakukannya dalam callback yang siap digunakan polimer (ini adalah peristiwa yang terpicu saat komponen siap digunakan). Karena elemen dapat dikonfigurasi melalui atribut, cukup tetapkan data JSON-LD ke atribut komponen yang sesuai:

document.addEventListener('polymer-ready', function() {
    var jsonld = JSON.parse(
        document.querySelector(
            'script[type="application/ld+json"]').innerText);
    document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
    document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
    });

JSON-LD, saudara JSON yang canggih

Seperti yang mungkin Anda perhatikan, cara kerjanya sangat mirip dengan menggunakan JSON lama biasa untuk meneruskan data. Namun, JSON-LD memiliki beberapa keuntungan, yang langsung berasal dari kompatibilitas schema.org-nya:

  • Data disusun dengan cara yang tidak ambigu menggunakan standar schema.org. Hal ini bukan keuntungan yang mudah, karena memastikan Anda dapat memberikan input yang bermakna dan konsisten ke setiap komponen web yang mendukung JSON-LD.
  • Data tersebut dapat digunakan secara efisien oleh mesin telusur, sehingga meningkatkan pengindeksan halaman, dan dapat menghasilkan cuplikan kaya untuk ditampilkan di hasil penelusuran.
  • Jika Anda menulis komponen web dengan cara ini, tidak perlu mempelajari atau merancang struktur (dan dokumentasi) baru untuk data yang diharapkan oleh komponen - schema.org sudah melakukan semua pekerjaan berat dan membangun konsensus untuk Anda. Hal ini juga membuatnya lebih mudah untuk membangun seluruh ekosistem komponen yang kompatibel.

Singkatnya, JSON-LD dan schema.org digabungkan dengan teknologi komponen web memungkinkan pembuatan UI yang dapat digunakan kembali dan dienkapsulasi yang mudah digunakan oleh developer dan mesin telusur.

Membuat komponen Anda sendiri

Anda dapat mencoba contoh di GitHub atau membaca panduan Polymer tentang membuat komponen yang dapat digunakan kembali untuk mulai menulis komponen Anda sendiri. Baca dokumentasi Data Terstruktur di developers.google.com untuk mendapatkan inspirasi tentang berbagai entitas yang dapat Anda tandai dengan JSON-LD.

Pertimbangkan untuk menyapa kami di @polymer untuk memamerkan elemen kustom yang telah Anda buat.