Membuat data terstruktur dengan JavaScript

Situs modern menggunakan JavaScript untuk menampilkan banyak konten dinamis. Ada beberapa hal yang perlu Anda perhatikan saat menggunakan JavaScript untuk membuat data terstruktur di situs Anda, dan panduan ini mencakup praktik terbaik serta strategi penerapan. Jika baru mengenal data terstruktur, Anda dapat mempelajari lebih lanjut cara kerja data terstruktur.

Ada berbagai cara untuk membuat data terstruktur dengan JavaScript, tetapi yang paling umum adalah:

Menggunakan Google Tag Manager untuk membuat JSON-LD secara dinamis

Google Tag Manager adalah platform yang memungkinkan Anda mengelola tag di situs Anda tanpa mengedit kode. Untuk membuat data terstruktur dengan Google Tag Manager, ikuti langkah-langkah berikut:

  1. Siapkan dan instal Google Tag Manager di situs Anda.
  2. Tambahkan tag HTML Kustom baru ke penampung.
  3. Tempelkan blok data terstruktur yang diinginkan ke dalam konten tag.
  4. Instal penampung seperti yang ditampilkan di bagian Instal Google Tag Manager dari menu admin penampung Anda.
  5. Untuk menambahkan tag ke situs Anda, publikasikan penampung Anda di antarmuka Google Tag Manager.
  6. Uji implementasi Anda.

Menggunakan variabel di Google Tag Manager

Google Tag Manager (GTM) mendukung variabel untuk menggunakan informasi di halaman sebagai bagian dari data terstruktur Anda. Gunakan variabel untuk mengekstrak data terstruktur dari halaman, bukan menduplikasi informasi di GTM. Menduplikasi informasi di GTM meningkatkan risiko ketidakcocokan antara konten halaman dan data terstruktur yang disisipkan melalui GTM.

Misalnya, Anda dapat membuat blok JSON-LD Resep secara dinamis yang menggunakan judul halaman sebagai nama resep dengan membuat variabel khusus bernama recipe_name berikut: 

function() { return document.title; }

Selanjutnya, Anda dapat menggunakan {{recipe_name}} di HTML tag kustom Anda.

Sebaiknya Anda membuat variabel untuk mengumpulkan semua informasi yang diperlukan dari halaman tersebut menggunakan variabel.

Berikut adalah contoh untuk konten tag HTML kustom:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

Membuat data terstruktur dengan JavaScript kustom

Cara lain untuk membuat data terstruktur adalah menggunakan JavaScript untuk membuat semua data terstruktur Anda atau menambahkan informasi lainnya ke data terstruktur yang dirender di sisi server. Apa pun cara yang dipilih, Google Penelusuran dapat memahami dan memproses data terstruktur yang tersedia di DOM saat merender halaman. Untuk mempelajari lebih lanjut cara Google Penelusuran memproses JavaScript, lihat panduan dasar JavaScript.

Berikut adalah contoh data terstruktur yang dibuat JavaScript:

  1. Temukan jenis data terstruktur yang diinginkan.
  2. Edit HTML situs Anda untuk menyertakan cuplikan JavaScript seperti contoh berikut (lihat dokumentasi dari CMS atau penyedia hosting Anda, atau mintalah kepada developer Anda).
    fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
  3. Uji implementasi Anda dengan Pengujian Hasil Kaya.

Menggunakan rendering sisi server

Jika menggunakan rendering sisi server, Anda juga dapat menyertakan data terstruktur yang diinginkan dalam output yang dirender. Periksa dokumentasi framework Anda untuk mengetahui cara membuat JSON-LD untuk jenis data terstruktur yang diinginkan.

Menguji penerapan Anda

Untuk memastikan Google Penelusuran dapat meng-crawl dan mengindeks data terstruktur Anda, uji implementasi Anda:

  1. Buka Pengujian Hasil Kaya.
  2. Masukkan URL yang ingin diuji.
  3. Klik Uji URL.

    Berhasil: Jika semuanya dilakukan dengan benar dan jenis data terstrukturnya didukung di alat tersebut, Anda akan melihat pesan "Halaman memenuhi syarat untuk hasil kaya".
    Jika Anda menguji jenis data terstruktur yang tidak didukung oleh pengujian Hasil Kaya, periksa HTML yang dirender. Jika HTML yang dirender berisi data terstruktur, Google Penelusuran akan dapat memprosesnya.

    Coba lagi: Jika Anda melihat error atau peringatan, kemungkinan besar terjadi error sintaksis atau properti tidak ada. Baca dokumentasi untuk jenis data terstruktur Anda dan pastikan Anda telah menambahkan semua properti. Jika masalah terus berlanjut, pastikan Anda juga melihat panduan tentang memperbaiki masalah JavaScript terkait penelusuran.