Cara Implementasi Schema Markup JSON-LD di Next.js (Panduan 2026)

Implementasi schema markup JSON-LD di Next.js berarti menyisipkan blok <script type="application/ld+json"> berisi objek schema.org ke tiap halaman lewat Server Component, biasanya lewat komponen kecil yang menerima objek data dan komponen builder function terpisah yang menyusun objeknya. Pola ini membuat structured data mudah dipelihara tanpa menempel atribut di tiap elemen HTML.

Apa Itu JSON-LD dan Kenapa Dipakai untuk Schema Markup?#

JSON-LD adalah salah satu dari tiga format penulisan structured data yang didukung Google (dua lainnya: Microdata dan RDFa), tapi menjadi format yang paling direkomendasikan karena datanya terpisah total dari markup HTML yang dilihat pengguna. Menurut dokumentasi resmi Google Search Central (developers.google.com/search/docs/appearance/structured-data/intro-structured-data, diakses Juli 2026), Google menggunakan structured data untuk memahami isi halaman dan menampilkannya sebagai rich result di hasil pencarian, seperti artikel, breadcrumb, FAQ, atau rating.

Struktur dasarnya selalu punya @context (biasanya "https://schema.org") dan @type (jenis entitas, mis. "Article", "Person", "FAQPage"), diikuti properti sesuai jenis entitas tersebut.

Kenapa Bukan Microdata atau RDFa?#

Microdata dan RDFa mengharuskan atribut seperti itemprop ditempel langsung di elemen HTML yang relevan, yang gampang rusak setiap kali struktur komponen berubah. JSON-LD tidak bergantung pada struktur HTML sama sekali, sehingga cocok dipasang lewat komponen React yang di-generate dari data, tanpa risiko markup HTML ikut berubah.

Bagaimana Cara Memasang JSON-LD di Next.js App Router?#

Pola paling aman adalah komponen kecil yang menerima objek data dan merender satu tag <script>, dipanggil dari Server Component halaman (bukan Client Component, supaya tidak butuh JavaScript untuk dirender ke HTML awal yang dibaca crawler):

// components/seo/json-ld.tsx
interface JsonLdProps {
  data: Record<string, unknown>;
}
 
export function JsonLd({ data }: JsonLdProps) {
  // Escape karakter "<" supaya string apa pun di dalam data tidak bisa
  // menutup tag <script> lebih awal (mis. kalau ada teks yang memuat "</script>").
  const json = JSON.stringify(data).replace(/</g, "\\u003c");
 
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: json }}
    />
  );
}

Langkah escape < menjadi \u003c ini penting: JSON.stringify biasa tidak melakukannya, dan tanpa langkah ini, data yang kebetulan memuat substring </script> (mis. dari judul artikel atau deskripsi pengguna) bisa merusak rendering halaman.

Dipakai di halaman lewat:

// app/(marketing)/blog/[slug]/page.tsx
import { JsonLd } from "@/components/seo/json-ld";
import { buildBlogPostingSchema } from "@/lib/schema";
 
export default function ArticlePage({ article }: { article: Article }) {
  return (
    <>
      <JsonLd data={buildBlogPostingSchema(article)} />
      {/* konten halaman */}
    </>
  );
}

Bagaimana Cara Membuat Schema yang Bisa Dipakai Ulang di Banyak Halaman?#

Untuk situs dengan lebih dari satu jenis halaman (artikel, profil, halaman layanan, dst.), menulis objek schema langsung di tiap halaman cepat jadi berantakan dan gampang tidak konsisten. Pola yang lebih tahan lama: satu file berisi kumpulan builder function murni (buildXSchema()), masing-masing mengembalikan objek JSON-LD siap pakai:

// lib/schema/index.ts
export function buildBlogPostingSchema(article: Article) {
  return {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: article.title,
    description: article.description,
    datePublished: article.date,
    author: { "@type": "Person", name: article.author },
  };
}

Kenapa Entitas Perlu Berbagi @id yang Sama?#

Kalau beberapa halaman menyebut entitas yang sama (mis. penulis situs muncul di schema artikel, halaman profil, dan halaman kontak), berikan @id yang stabil dan identik di setiap kemunculannya (mis. https://domain.com/#person), lalu referensikan lewat { "@id": "..." } alih-alih menulis ulang seluruh objek. Ini membantu mesin pencari dan AI search memahami bahwa entitas-entitas tersebut adalah simpul yang sama dalam satu graph, bukan entitas terpisah yang kebetulan mirip.

Bagaimana Cara Memvalidasi Schema Markup Setelah Dipasang?#

Setelah deploy, validasi lewat dua alat gratis dari Google:

1. Rich Results Test (search.google.com/test/rich-results): cek apakah URL memenuhi syarat tampil sebagai rich result tertentu, dan tunjukkan error/warning per properti yang hilang.
2. URL Inspection Tool di Google Search Console: menampilkan status structured data yang benar-benar sudah terindeks Google untuk URL tersebut, berguna untuk mengecek apakah crawler Google sungguh membaca markup yang dipasang, bukan cuma valid secara sintaks.

Dokumentasi Google menegaskan bahwa lolos validasi tidak menjamin tampil sebagai rich result. Google tetap memutuskan sendiri kapan dan apakah rich result ditampilkan, meski markup sudah benar sepenuhnya.

Ringkasan#

• JSON-LD dipasang lewat satu blok <script type="application/ld+json"> yang di-generate dari objek data, bukan ditempel sebagai atribut di elemen HTML seperti Microdata.
• Selalu escape karakter < sebelum dangerouslySetInnerHTML untuk mencegah data yang memuat </script> merusak rendering halaman.
• Kumpulkan schema jadi builder function murni yang bisa dipakai ulang lintas halaman, dan pakai @id konsisten untuk entitas yang sama supaya mesin pencari membacanya sebagai satu graph.
• Validasi selalu lewat Rich Results Test dan Search Console, bukan asumsi. Lolos validasi sintaks tidak menjamin tampil sebagai rich result.
• Butuh audit atau implementasi schema markup di situs sendiri? Lihat layanan SEO teknis yang ditawarkan, atau baca panduan cara pakai Google Search Console untuk pemula untuk memantau status indexing setelah markup terpasang.