Dengan meningkatnya popularitas komponen web dan library pendukung seperti Polymer, elemen kustom menjadi cara yang menarik untuk membuat fitur UI. Enkapsulasi default elemen kustom membuatnya sangat berguna untuk membuat widget independen.
Meskipun beberapa widget bersifat mandiri, banyak widget yang 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 dalam project, Anda dapat menyertakan dan mengonfigurasinya dengan sangat mudah di HTML, misalnya dengan meneruskan data untuk mengisi widget melalui atribut.
Sebaiknya 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 lain tentang konten halaman kita. Kita dapat melakukannya dengan menggunakan standar schema.org dan format JSON-LD untuk data kita.
Mengisi komponen dengan data terstruktur
Biasanya, JSON adalah cara yang mudah untuk memasukkan data ke widget tertentu. Dengan meningkatnya dukungan untuk JSON-LD, kita dapat menggunakan kembali struktur data yang sama untuk memberi tahu UI serta mesin telusur dan konsumen data terstruktur lainnya tentang arti persis konten halaman.
Dengan menggabungkan komponen web dengan JSON-LD, kita membuat arsitektur yang ditentukan dengan baik untuk aplikasi:
- schema.org dan JSON-LD mewakili lapisan data, dengan schema.org yang menyediakan kosakata untuk data dan JSON-LD sebagai format dan pengangkutan data;
- elemen kustom mewakili lapisan presentasi, yang dapat dikonfigurasi dan dipisahkan dari data itu sendiri.
Contoh
Mari pertimbangkan contoh berikut - halaman yang mencantumkan beberapa lokasi Google Office: https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Halaman ini berisi dua widget: peta dengan pin untuk setiap kantor dan dropdown dengan daftar lokasi. Kedua widget tersebut harus menyajikan data yang sama kepada pengguna dan halaman dapat dibaca oleh mesin telusur.
Dalam demo ini, kita menggunakan entitas LocalBusiness untuk mengekspresikan makna data kita, yaitu lokasi geografis beberapa Kantor Google.
Cara terbaik untuk memeriksa cara Google membaca dan mengindeks halaman ini adalah melalui Alat Pengujian Data Terstruktur yang baru dan lebih baik. Kirim URL demo di bagian Ambil URL, lalu klik Ambil dan validasi. Bagian di sebelah kanan akan menampilkan data yang diuraikan yang diambil dari halaman beserta error yang mungkin terjadi. Ini adalah cara yang sangat mudah untuk memeriksa apakah markup JSON-LD Anda sudah benar dan dapat diproses oleh Google.
Anda dapat membaca selengkapnya tentang alat ini dan peningkatan yang diperkenalkannya 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 begitu, kami dapat memastikan bahwa data dapat diakses dengan mudah oleh konsumen lain yang mendukung standar schema.org dan format JSON-LD, misalnya 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, kita 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-elemennya. Kita melakukannya dalam callback siap polimer (ini adalah peristiwa yang dipicu 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 biasa untuk meneruskan data. JSON-LD memiliki beberapa keunggulan, yang langsung didapatkan dari kompatibilitas schema.org-nya:
- Data disusun dengan cara yang tidak ambigu menggunakan standar schema.org. Ini adalah keuntungan yang tidak biasa, karena memastikan Anda dapat memberikan input yang bermakna dan konsisten ke komponen web yang mengaktifkan JSON-LD.
- Data dapat digunakan secara efisien oleh mesin telusur, yang meningkatkan pengindeksan halaman, dan dapat menghasilkan rich snippet yang 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 komponen - schema.org sudah melakukan semua pekerjaan berat dan membangun konsensus untuk Anda. Hal ini juga mempermudah pembuatan seluruh ekosistem komponen yang kompatibel.
Singkatnya, JSON-LD dan schema.org yang dikombinasikan dengan teknologi komponen web memungkinkan pembuatan bagian 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. Lihat dokumentasi Data Terstruktur di developers.google.com untuk mendapatkan inspirasi tentang berbagai entitas yang dapat Anda beri tag dengan JSON-LD.
Sebaiknya beri tahu kami di @polymer untuk menunjukkan elemen kustom yang telah Anda buat.