Dasar-Dasar Data Terstruktur JSON-LD
Tambahkan data terstruktur yang dapat dibaca mesin dengan JSON-LD.
Dasar-Dasar Data Terstruktur JSON-LD adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Apa Itu Data Terstruktur?
Data terstruktur adalah JSON yang dapat dibaca mesin dan menjelaskan isi halaman — artikel, resep, produk, atau acara. Mesin pencari menggunakannya untuk menampilkan hasil kaya (peringkat bintang, kartu resep, jejak navigasi) alih-alih tautan biru biasa.
JSON-LD adalah Format yang Direkomendasikan
Format yang disukai Google adalah JSON-LD: satu blok <script type="application/ld+json"> di head atau body yang berisi satu atau beberapa objek schema.org. Format ini terpisah dari HTML yang terlihat, sehingga penambahan atau pembaruannya tidak memerlukan penulisan ulang templat.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Learn HTML",
"author": { "@type": "Person", "name": "Ada Lovelace" },
"datePublished": "2024-05-01"
}
</script>@context dan @type
Setiap objek JSON-LD memerlukan @context (hampir selalu "https://schema.org") dan @type (kelas schema.org: Article, Recipe, Product, FAQPage). @context memberi tahu pengurai dari kosakata mana nama properti tersebut berasal.
Properti Artikel Umum
Untuk Article, sediakan headline, image (URL atau array), datePublished, dateModified, author (objek Person atau Organization), dan publisher (Organization dengan logo). Inilah bidang minimum yang diperlukan agar Google mempertimbangkan halaman tersebut untuk carousel berita utama.
Skema Produk
Halaman produk mendeklarasikan @type Product dengan name, image, description, brand, sku, dan subobjek offers yang berisi price, priceCurrency, dan availability. Jika digabungkan dengan aggregateRating, Google dapat menampilkan peringkat bintang dan cuplikan harga langsung dalam hasil pencarian.
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Coddy Plus",
"offers": { "@type": "Offer", "price": "29.00", "priceCurrency": "USD" }
}Skema Jejak Navigasi
BreadcrumbList menjelaskan hierarki navigasi. Setiap itemListElement adalah ListItem dengan position, name, dan item (URL). Jika tersedia, Google mengganti baris URL dalam cuplikan dengan jejak navigasi berlabel, yang dapat menghasilkan lebih banyak klik.
FAQ dan HowTo
Skema FAQPage dan HowTo sebelumnya membuka komponen hasil kaya di SERP. Google kemudian membatasi hasil kaya FAQ untuk beberapa kategori situs saja (gov, edu), tetapi markup ini tetap bermanfaat bagi asisten suara dan pihak lain yang menggunakannya—pertahankan markup ini pada halaman FAQ yang sebenarnya.
Cocokkan dengan Halaman yang Terlihat
Google memberikan penalti pada markup yang tidak sesuai dengan apa yang dilihat pengguna. Jangan menyatakan peringkat 5 bintang yang tidak muncul di halaman; jangan mencantumkan harga $9,99 yang tidak pernah dilihat pengguna. Data terstruktur harus mendeskripsikan konten yang ditampilkan secara akurat.
Memvalidasi dengan Uji Hasil Kaya
Uji Hasil Kaya Google (search.google.com/test/rich-results) mengurai URL apa pun atau kode yang ditempelkan, mencantumkan jenis skema yang terdeteksi, dan memperingatkan tentang properti wajib yang hilang. Jalankan uji ini sebelum menerapkan perubahan apa pun pada data terstruktur.
Beberapa Skema per Halaman
Anda dapat mendeklarasikan beberapa blok JSON-LD pada halaman yang sama (misalnya Article + BreadcrumbList + Organization), atau menggabungkannya dalam satu larik @graph. Kedua bentuk tersebut valid; pilih bentuk yang paling mudah dijadikan templat dalam alur pembangunan Anda.
Memperbarui Tanpa Merender Ulang
JSON-LD berada dalam tag skrip yang terpisah dari konten yang terlihat. Untuk memperbaruinya, buat ulang blok JSON—jangan pernah menyisipkan data terstruktur hanya melalui JavaScript sisi klien, karena Googlebot tidak selalu menjalankan JS dengan andal sebelum pengindeksan.
Pemeriksaan Pengetahuan
Dua properti tingkat teratas apa yang harus disertakan setiap objek JSON-LD agar menjadi data terstruktur yang valid?
Ringkasan
JSON-LD mendeklarasikan data terstruktur dalam satu blok skrip application/ld+json, dengan @context dan @type yang mengidentifikasi setiap objek. Skema umum (Article, Product, BreadcrumbList) membuka hasil kaya dalam penelusuran ketika markup secara akurat mencerminkan halaman yang terlihat. Validasi dengan Uji Hasil Kaya sebelum menerapkannya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Dasar-Dasar Data Terstruktur JSON-LD” gratis?
Ya — teks lengkap “Dasar-Dasar Data Terstruktur JSON-LD” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Dasar-Dasar Data Terstruktur JSON-LD”?
Tambahkan data terstruktur yang dapat dibaca mesin dengan JSON-LD. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Dasar-Dasar Data Terstruktur JSON-LD” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- OpenGraph og:title og:description og:image
- Tag Meta Twitter Card
- Dasar-Dasar Data Terstruktur JSON-LD
- Hreflang untuk Halaman Internasional