Panduan Lengkap Implementasi JSON-LD Schema Markup

Q: Apa perbedaan antara JSON-LD dan Microdata?

JSON-LD adalah blok script terpisah yang ditempatkan di head dokumen. Microdata menambahkan atribut itemscope, itemtype, dan itemprop langsung ke elemen HTML yang ada. Google secara resmi merekomendasikan JSON-LD karena lebih mudah dipelihara — perubahan struktur HTML Anda tidak pernah memengaruhi data terstruktur.

Q: Apakah JSON-LD menjamin hasil kaya di Google?

Tidak. JSON-LD yang valid membuat halaman Anda memenuhi syarat untuk hasil kaya tapi tidak menjamin munculnya. Google menerapkan sinyal kualitas tambahan dan kebijakan konten sebelum menampilkan fitur kaya. Gunakan Tes Hasil Kaya untuk memastikan kelayakan dan memeriksa properti wajib yang hilang.

Q: Berapa banyak blok schema yang bisa saya miliki dalam satu halaman?

Tidak ada batasan keras. Halaman artikel biasa mungkin memiliki blok Article, blok FAQPage, dan blok BreadcrumbList — ketiganya diproses secara independen oleh Google. Hindari menggandakan tipe yang sama dalam satu halaman karena dapat membingungkan parser.

Q: Di mana saya harus menempatkan tag script JSON-LD?

Di dokumen. Ini lokasi yang direkomendasikan karena memastikan schema tersedia sebelum konten body diparsing. Beberapa implementasi menempatkannya di akhir body — Google mendukung keduanya, tapi penempatan di head dianggap praktik terbaik.

Q: Bisakah saya menghasilkan JSON-LD secara dinamis di aplikasi Blazor?

Ya. Di Blazor Server atau WASM, Anda membangun JSON-LD di OnInitialized atau OnInitializedAsync dan merendernya sebagai MarkupString di head melalui MetadataComponent. Kuncinya adalah memastikan schema dirender di sisi server atau saat prerendering agar crawler pencarian melihatnya pada respons HTTP awal.

Q: Apa yang terjadi jika JSON-LD saya memiliki kesalahan sintaks?

Google akan mengabaikan blok yang salah tanpa pemberitahuan. Halaman Anda tetap diindeks tapi kehilangan kelayakan hasil kaya untuk tipe schema tersebut. Selalu validasi dengan Tes Hasil Kaya setelah menerapkan perubahan, terutama setelah memodifikasi model serialisasi.

Q: Haruskah saya menyertakan dateModified meskipun tidak ada perubahan?

Ya. Tetapkan dateModified sama dengan datePublished jika artikel tidak pernah diperbarui. Tidak adanya properti dateModified dapat mengurangi kepercayaan Google pada sinyal kesegaran. Beberapa validator hasil kaya memberi peringatan jika properti ini hilang.

Q: Apakah schema BreadcrumbList diperlukan untuk hasil kaya breadcrumb?

Hasil kaya breadcrumb bisa berasal dari schema BreadcrumbList atau markup breadcrumb HTML yang diparsing otomatis oleh Google. Schema BreadcrumbList eksplisit memberi Anda kontrol penuh atas label dan URL setiap tingkat, yang lebih andal daripada mengandalkan ekstraksi otomatis.

Apa itu JSON-LD dan mengapa penting untuk SEO

JSON-LD (JavaScript Object Notation for Linked Data) adalah metode pengkodean data terstruktur menggunakan format JSON. Mesin pencari seperti Google membaca data ini untuk memahami makna konten Anda, bukan hanya kata kuncinya.

Saat Google dapat mengurai data terstruktur Anda, halaman Anda memenuhi syarat untuk hasil kaya — daftar pencarian yang ditingkatkan secara visual menampilkan rating, dropdown FAQ, gambar artikel, breadcrumb, dan fitur lain langsung di halaman hasil pencarian. Hasil kaya secara konsisten mendapatkan klik lebih banyak dibanding tautan biru biasa.

Google secara resmi merekomendasikan JSON-LD dibanding Microdata dan RDFa karena dapat ditempatkan di mana saja dalam halaman — termasuk di head — dan tidak perlu mengubah elemen HTML yang ada. Data terstruktur sepenuhnya terpisah dari markup Anda.

Kelayakan hasil kaya

Schema markup yang valid membuat halaman Anda memenuhi syarat untuk dropdown FAQ, carousel artikel, breadcrumb, dan fitur kaya lainnya di Google Search.

Lebih banyak klik dari peringkat yang sama

Kejelasan semantik

Data terstruktur menghilangkan ambiguitas. Halaman tentang topik tanya jawab secara eksplisit dideklarasikan sebagai FAQPage, sehingga Google tahu untuk menampilkannya sebagai hasil kaya FAQ.

Beritahu mesin pencari dengan tepat apa yang Anda miliki

Tanpa perubahan HTML

JSON-LD berada dalam tag script di head. Tidak pernah menyentuh HTML visual Anda, jadi menambah atau memperbarui schema tidak berisiko merusak tata letak atau aksesibilitas.

Pemisahan tanggung jawab yang jelas

JSON-LD vs. Microdata vs. RDFa

Ada tiga format untuk menyematkan data terstruktur schema.org di halaman web. Ketiganya dipahami Google, tapi berbeda signifikan dalam penerapan dan pemeliharaannya.

Format	Lokasi sintaks	Pemeliharaan	Dampak SEO	Rekomendasi Google
JSON-LD	Tag script terpisah	Mudah — tanpa perubahan HTML	Dukungan penuh hasil kaya	Direkomendasikan
Microdata	Atribut HTML inline	Tinggi — terikat erat ke markup	Dukungan penuh hasil kaya	Didukung
RDFa	Atribut HTML inline	Tinggi — terikat erat ke markup	Dukungan penuh hasil kaya	Didukung

Mengapa JSON-LD unggul dalam pemeliharaan

Dengan Microdata dan RDFa, atribut schema tersebar di seluruh HTML Anda. Perubahan desain yang merestrukturisasi template bisa merusak data terstruktur tanpa disadari. JSON-LD adalah blok mandiri — perbarui script sekali dan HTML tidak terpengaruh.

Pelajari penerapan tag meta HTML, Open Graph, dan data terstruktur JSON-LD.
Strategi SEO praktis untuk meningkatkan visibilitas dan peringkat di mesin pencari.
Proyek langsung yang mencakup desain responsif dan optimasi kinerja.

Jelajahi kursus Pengembangan Web

Tipe schema inti dan kapan menggunakannya

Schema.org mendefinisikan ratusan tipe tapi hanya beberapa yang mencakup mayoritas konten web. Ini adalah tipe yang membuka hasil kaya di Google Search.

Tipe schema	Kasus penggunaan	Tipe hasil kaya
Article	Posting blog, panduan, artikel berita	Carousel artikel, Berita utama
FAQPage	Halaman dengan pasangan tanya/jawab	Dropdown FAQ di hasil pencarian
BreadcrumbList	Halaman dengan hierarki navigasi	Jejak breadcrumb di bawah URL
WebSite / WebPage	Beranda, halaman hub, halaman landing	Kotak pencarian sitelinks, pengenalan entitas
SoftwareApplication	Aplikasi, alat, produk perangkat lunak	Hasil kaya aplikasi dengan rating dan harga

Kosa kata Schema.org

Semua tipe schema didefinisikan di schema.org. Properti @context di setiap blok JSON-LD memberi tahu parser untuk mengartikan nama properti sesuai kosa kata schema.org. Anda bisa menggabungkan beberapa tipe schema dalam satu halaman — Google memproses setiap blok script secara independen.

Implementasi schema Artikel

Schema Artikel adalah tipe terpenting untuk situs berbasis konten. Ini memberi tahu Google judul, deskripsi, tanggal terbit, penulis, dan penerbit konten — set properti minimum yang diperlukan untuk kelayakan hasil kaya.

Kelas C# di bawah ini adalah model serialisasi. Setiap properti langsung dipetakan ke field JSON-LD yang sesuai menggunakan atribut JsonPropertyName.

C#Kelas C# ArticleSchema (JsonLdService.cs)

private class ArticleSchema
{
    [JsonPropertyName("@context")]
    public string Context { get; } = "https://schema.org";

    [JsonPropertyName("@type")]
    public string Type { get; } = "Article";

    [JsonPropertyName("headline")]
    public string? Headline { get; set; }

    [JsonPropertyName("description")]
    public string? Description { get; set; }

    [JsonPropertyName("image")]
    public string? Image { get; set; }

    [JsonPropertyName("url")]
    public string? Url { get; set; }

    [JsonPropertyName("author")]
    public Organization? Author { get; set; }

    [JsonPropertyName("publisher")]
    public ArticlePublisher? Publisher { get; set; }

    [JsonPropertyName("datePublished")]
    public string? DatePublished { get; set; }

    [JsonPropertyName("dateModified")]
    public string? DateModified { get; set; }

    [JsonPropertyName("articleSection")]
    public List<string>? ArticleSection { get; set; }
}

Properti wajib adalah: headline, image, datePublished, dateModified, author, dan publisher. Array articleSection opsional tapi direkomendasikan — menandakan cakupan topik artikel ke Google.

HTMLOutput JSON-LD schema Artikel

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "JSON-LD Schema Markup: Complete SEO Implementation Guide",
  "description": "Learn how to implement JSON-LD structured data for Article, FAQPage, BreadcrumbList, WebSite, and WebPage schema types.",
  "image": "https://ghostlyinc.com/images/web/jsonldguide/opengraph/hero-1200.png",
  "url": "https://ghostlyinc.com/en/json-ld-schema-markup-seo-guide/",
  "author": {
    "@type": "Organization",
    "name": "GhostlyInc",
    "url": "https://ghostlyinc.com"
  },
  "publisher": {
    "@type": "Organization",
    "name": "GhostlyInc",
    "logo": {
      "@type": "ImageObject",
      "url": "https://ghostlyinc.com/images/logo.png"
    }
  },
  "datePublished": "2026-03-28T10:00:00Z",
  "dateModified": "2026-03-28T10:00:00Z",
  "articleSection": [
    "What is JSON-LD and why it matters for SEO",
    "JSON-LD vs. Microdata vs. RDFa",
    "Core schema types and when to use them",
    "Article schema implementation"
  ]
}
</script>

Penulis dan penerbit keduanya bertipe Organization. Untuk blog pribadi, penulis bisa bertipe Person dengan nama dan url.

Schema FAQ untuk snippet kaya

Schema FAQPage membuat hasil kaya FAQ — pasangan tanya/jawab yang dapat diperluas ditampilkan langsung di hasil Google Search di bawah listing halaman Anda. Ini dapat meningkatkan ruang vertikal hasil Anda secara signifikan, memperbaiki visibilitas dan rasio klik.

Kelas FaqPage memuat daftar entitas pertanyaan. Setiap entitas harus memiliki nama (pertanyaan) dan acceptedAnswer dengan properti teks (jawaban).

C#Kelas C# FaqPage (JsonLdService.cs)

private class FaqPage
{
    [JsonPropertyName("@context")]
    public string Context { get; } = "https://schema.org";

    [JsonPropertyName("@type")]
    public string Type { get; } = "FAQPage";

    [JsonPropertyName("@id")]
    public string? Id { get; set; }

    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("mainEntity")]
    public List<FaqEntity>? MainEntity { get; set; }
}

private class FaqEntity
{
    [JsonPropertyName("@type")]
    public string Type { get; } = "Question";

    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("acceptedAnswer")]
    public FaqAnswer? AcceptedAnswer { get; set; }
}

private class FaqAnswer
{
    [JsonPropertyName("@type")]
    public string Type { get; } = "Answer";

    [JsonPropertyName("text")]
    public string? Text { get; set; }
}

Output adalah satu blok FAQPage dengan array mainEntity. Setiap item bertipe Question dengan acceptedAnswer. Google mendukung hingga sepuluh pertanyaan per halaman untuk hasil kaya.

HTMLOutput JSON-LD schema FAQ

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "@id": "https://ghostlyinc.com/en/json-ld-schema-markup-seo-guide/#faq",
  "name": "Frequently asked questions",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is the difference between JSON-LD and Microdata?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON-LD is a separate script block that lives in the head and does not touch HTML. Microdata adds attributes directly to HTML elements. Google recommends JSON-LD for its maintainability."
      }
    },
    {
      "@type": "Question",
      "name": "How many FAQ questions can I mark up?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Google supports up to ten questions per page for the FAQ rich result. Additional questions are still valid schema but will not appear in the search result enhancement."
      }
    }
  ]
}
</script>

@id pada blok FAQPage mengaitkan schema ke fragmen URL tertentu. Ini praktik terbaik untuk halaman dengan beberapa blok schema, agar parser dapat mengidentifikasi setiap entitas tanpa ambigu.

BreadcrumbList untuk navigasi

Schema BreadcrumbList memberi tahu Google jalur hierarki dari beranda ke halaman saat ini. Google menggunakan ini untuk menampilkan breadcrumb di hasil pencarian, menggantikan URL mentah dengan jalur navigasi yang lebih mudah dibaca.

Kelas C# membangun daftar elemen ListItem, masing-masing dengan posisi, nama, dan item (URL). Posisi dimulai dari 1 — beranda adalah posisi 1.

C#Kelas C# BreadcrumbListSchema (JsonLdService.cs)

private class BreadcrumbListSchema
{
    [JsonPropertyName("@context")]
    public string Context { get; } = "https://schema.org";

    [JsonPropertyName("@type")]
    public string Type { get; } = "BreadcrumbList";

    [JsonPropertyName("itemListElement")]
    public List<BreadcrumbListElement>? ItemListElement { get; set; }
}

private class BreadcrumbListElement
{
    [JsonPropertyName("@type")]
    public string Type { get; } = "ListItem";

    [JsonPropertyName("position")]
    public int Position { get; set; }

    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("item")]
    public string? Item { get; set; }
}

Output JSON menempatkan setiap breadcrumb sebagai itemListElement. Google mengharuskan minimal dua item untuk hasil kaya breadcrumb. Item terakhir harus URL halaman saat ini.

HTMLOutput JSON-LD schema BreadcrumbList

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://ghostlyinc.com/en/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Web SEO Hub",
      "item": "https://ghostlyinc.com/en/web-seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "JSON-LD Schema Markup: Complete SEO Implementation Guide",
      "item": "https://ghostlyinc.com/en/json-ld-schema-markup-seo-guide/"
    }
  ]
}
</script>

Hasil kaya breadcrumb muncul di bawah judul halaman di hasil pencarian. Ini meningkatkan UX dan memberi pengguna keyakinan bahwa mereka memahami struktur situs sebelum mengklik.

Schema WebSite dan WebPage

Schema WebSite dan WebPage membangun grafik entitas dasar untuk situs. WebSite mengidentifikasi situs itu sendiri — nama, URL, bahasa, dan penerbitnya. WebPage mendeskripsikan halaman individual dan menghubungkannya ke WebSite induk menggunakan relasi isPartOf.

Kedua kelas mengikuti pola JSON-LD yang sama. @id pada WebSite adalah root domain; @id pada WebPage adalah URL halaman lengkap.

C#Kelas C# WebSiteSchema dan WebPageSchema (JsonLdService.cs)

private class WebSiteSchema
{
    [JsonPropertyName("@context")]
    public string Context { get; } = "https://schema.org";

    [JsonPropertyName("@type")]
    public string Type { get; } = "WebSite";

    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("url")]
    public string? Url { get; set; }

    [JsonPropertyName("inLanguage")]
    public string? InLanguage { get; set; }

    [JsonPropertyName("publisher")]
    public Organization? Publisher { get; set; }
}

private class WebPageSchema
{
    [JsonPropertyName("@context")]
    public string Context { get; } = "https://schema.org";

    [JsonPropertyName("@type")]
    public string Type { get; } = "WebPage";

    [JsonPropertyName("@id")]
    public string? Id { get; set; }

    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("description")]
    public string? Description { get; set; }

    [JsonPropertyName("url")]
    public string? Url { get; set; }

    [JsonPropertyName("inLanguage")]
    public string? InLanguage { get; set; }

    [JsonPropertyName("isPartOf")]
    public WebSiteReference? IsPartOf { get; set; }
}

Properti inLanguage menggunakan kode bahasa BCP 47 (misal en, de, fr). Tautan isPartOf menghubungkan WebPage ke entitas WebSite dengan merujuk @id domain. Ini membantu Google membangun model entitas lengkap situs Anda.

HTMLOutput JSON-LD schema WebSite dan WebPage

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "GhostlyInc",
  "url": "https://ghostlyinc.com",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "GhostlyInc",
    "url": "https://ghostlyinc.com"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "@id": "https://ghostlyinc.com/en/json-ld-schema-markup-seo-guide/",
  "name": "JSON-LD Schema Markup: Complete SEO Implementation Guide",
  "description": "Learn how to implement JSON-LD structured data for Article, FAQPage, BreadcrumbList, WebSite, and WebPage schema types.",
  "url": "https://ghostlyinc.com/en/json-ld-schema-markup-seo-guide/",
  "inLanguage": "en",
  "isPartOf": {
    "@type": "WebSite",
    "@id": "https://ghostlyinc.com"
  }
}
</script>

Praktik terbaik implementasi

Metode pembantu WrapInScriptTag adalah titik tunggal di mana string JSON menjadi blok JSON-LD yang valid. Ini membungkus payload schema yang diserialisasi dalam tag script yang diperlukan dengan tipe MIME application/ld+json.

Ini adalah metode yang dipanggil semua pembangun schema dalam layanan — Article, FAQPage, BreadcrumbList, WebSite, dan WebPage semua mengirim JSON yang diserialisasi ke utilitas yang sama ini.

C#Metode WrapInScriptTag (JsonLdService.cs)

private static MarkupString WrapInScriptTag(string json)
{
    var builder = new StringBuilder();
    builder.AppendLine("<script type=\"application/ld+json\">");
    builder.AppendLine(json);
    builder.AppendLine("</script>");

    return new MarkupString(builder.ToString());
}

Objek SchemaContext adalah titik masuk untuk metode BuildSchema. Ini membawa semua data yang diperlukan untuk membangun set lengkap blok schema untuk sebuah halaman — tipe, metadata, daftar FAQ, hierarki breadcrumb, dan data artikel.

C#Logika dispatch BuildSchema (JsonLdService.cs)

public SchemaBuildResult BuildSchema(SchemaContext context)
{
    if (context == null) throw new ArgumentNullException(nameof(context));

    var jsonLd = new List<MarkupString>();

    switch (context.PageType)
    {
        case PageSchemaType.Home:
            jsonLd.Add(WebSite(context));
            jsonLd.Add(WebPage(context));
            break;
        case PageSchemaType.Article:
            jsonLd.Add(Article(context.Article!));
            break;
        case PageSchemaType.Tool:
            jsonLd.Add(WebPage(context));
            jsonLd.Add(SoftwareApplication(context.SoftwareApplication!));
            break;
        case PageSchemaType.Hub:
            jsonLd.Add(WebPage(context));
            break;
    }

    if (context.Faqs != null && context.Faqs.Count > 0)
    {
        jsonLd.Add(FAQ(context.Faqs.ToList(), context.FaqTitle, context.Url));
    }

    if (context.ParentHierarchy.Count > 0)
    {
        jsonLd.Add(BreadcrumbList(BuildBreadcrumbItems(context)));
    }

    return new SchemaBuildResult(jsonLd, context.PageType == PageSchemaType.Article);
}

Switch dispatch membuat pembangun schema dapat dikomposisi. FAQ dan breadcrumb selalu ditambahkan jika ada, tanpa memandang tipe halaman. Ini berarti tipe halaman apa pun bisa memiliki blok FAQ atau jejak breadcrumb tanpa mengubah logika dispatch inti.

Menguji dan memvalidasi schema Anda

Sintaks JSON-LD yang valid tidak menjamin kelayakan hasil kaya. Alat Google memeriksa validitas sintaks dan apakah konten Anda memenuhi persyaratan kebijakan untuk setiap tipe hasil kaya.

Tes Hasil Kaya

Gunakan search.google.com/test/rich-results untuk menguji URL atau tempel HTML mentah. Google mengonfirmasi tipe hasil kaya yang terdeteksi dan menyoroti properti wajib yang hilang.

Pemeriksa kelayakan resmi Google

Validator Schema Markup

validator.schema.org memeriksa markup Anda terhadap spesifikasi schema.org secara independen dari kebijakan hasil kaya Google. Berguna untuk menemukan kesalahan penamaan properti dan ketidaksesuaian tipe.

Validasi sintaks Schema.org

Google Search Console

Bagian Enhancements di Search Console melaporkan kesalahan dan peringatan schema secara massal di halaman yang diindeks. Gunakan untuk pemantauan berkelanjutan setelah validasi awal.

Pantau secara luas setelah peluncuran

Pertanyaan yang sering diajukan

01 Apa perbedaan antara JSON-LD dan Microdata?

02 Apakah JSON-LD menjamin hasil kaya di Google?

03 Berapa banyak blok schema yang bisa saya miliki dalam satu halaman?

04 Di mana saya harus menempatkan tag script JSON-LD?

05 Bisakah saya menghasilkan JSON-LD secara dinamis di aplikasi Blazor?

06 Apa yang terjadi jika JSON-LD saya memiliki kesalahan sintaks?

07 Haruskah saya menyertakan dateModified meskipun tidak ada perubahan?

08 Apakah schema BreadcrumbList diperlukan untuk hasil kaya breadcrumb?

Panduan Lengkap Implementasi JSON-LD Schema Markup untuk SEO

Apa itu JSON-LD dan mengapa penting untuk SEO

Kelayakan hasil kaya

Kejelasan semantik

Tanpa perubahan HTML

JSON-LD vs. Microdata vs. RDFa

Kuasi Pengembangan Web Modern dengan Praktik SEO Terbaik

Tipe schema inti dan kapan menggunakannya

Implementasi schema Artikel

Schema FAQ untuk snippet kaya

Schema WebSite dan WebPage

Praktik terbaik implementasi

Menguji dan memvalidasi schema Anda

Tes Hasil Kaya

Validator Schema Markup

Google Search Console

Pertanyaan yang sering diajukan

Jawaban atas pertanyaan umum tentang markup schema JSON-LD

Apa itu JSON-LD dan mengapa penting untuk SEO

Kelayakan hasil kaya

Kejelasan semantik

Tanpa perubahan HTML

JSON-LD vs. Microdata vs. RDFa

Kuasi Pengembangan Web Modern dengan Praktik SEO Terbaik

Tipe schema inti dan kapan menggunakannya

Implementasi schema Artikel

Schema FAQ untuk snippet kaya

BreadcrumbList untuk navigasi

Schema WebSite dan WebPage

Praktik terbaik implementasi

Menguji dan memvalidasi schema Anda

Tes Hasil Kaya

Validator Schema Markup

Google Search Console

Pertanyaan yang sering diajukan

Jawaban atas pertanyaan umum tentang markup schema JSON-LD

Sumber terkait