Cara Implementasi Schema Markup JSON-LD di Next.js (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.

Ringkasan cepat:

1. JSON-LD ditulis dalam satu blok <script>, terpisah total dari HTML yang dilihat pengguna.
2. Google merekomendasikan JSON-LD dibanding Microdata/RDFa karena tidak menempel di tiap elemen HTML.
3. Structured data bukan sinyal ranking langsung, tapi membantu Google dan AI answer engine memahami isi halaman.
4. Di Next.js App Router, JSON-LD disisipkan lewat Server Component memakai builder function yang bisa dipakai ulang.
5. Validasi lewat Rich Results Test Google atau Schema Markup Validator schema.org sebelum deploy.

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

JSON-LD adalah singkatan dari JavaScript Object Notation for Linked Data, spesifikasi resmi yang dikelola json-ld.org, bukan buatan Google sendiri:

"JSON-LD is a lightweight Linked Data format. It is easy for humans to read and write." (json-ld.org)

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 (diakses Juli 2026), Google menggunakan structured data untuk memahami isi halaman dan berpotensi menampilkannya sebagai rich result di hasil pencarian, seperti artikel, breadcrumb, atau rating. Google resmi menghentikan rich result untuk FAQPage per Mei 2026, tapi markup-nya tetap valid dan tetap berguna untuk AI answer engine (ChatGPT, Perplexity, Google AI Overview) yang mem-parsing structured data secara independen, hanya sudah tidak lagi tampil sebagai rich snippet SERP klasik.

Google resmi menghentikan tampilan rich result untuk markup FAQPage di hasil pencarian per Mei 2026, meski markup-nya sendiri tetap valid dan tetap dibaca AI answer engine seperti ChatGPT, Perplexity, dan Google AI Overview (dokumentasi resmi Google Search Central).

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). Pola ini mengandalkan Server Component sebagai default di App Router. Kalau proyekmu masih di Pages Router dan perlu tahu apa yang berubah, lihat App Router vs Pages Router: kapan pakai yang mana:

// 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. Perbandingan lebih lengkap ketiga tools validasi ini (termasuk Schema Markup Validator dari schema.org untuk validasi sintaks penuh) ada di tools cek dan validasi schema markup gratis.

Validasi ulang juga penting setiap kali situs mengalami perubahan visual besar, bukan cuma sekali saat pertama dipasang. Saat redesign visual "Editorial Craft" di situs ini sendiri (Juli 2026), schema JSON-LD Person/ProfilePage/FAQ sengaja diverifikasi ulang untuk memastikan tidak ikut terhapus atau rusak, detail lengkapnya ada di studi kasus redesign situs dan dampaknya ke SEO.

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.