Structured Data di Next.js: Yang Tidak Otomatis seperti Plugin SEO WordPress

Di WordPress, plugin SEO sering men-generate graph Organization dan Article dari metadata situs. Di Next.js App Router, tanggung jawab itu jatuh ke developer: Anda membangun objek JSON-LD Next.js dari data halaman yang sama dengan title, canonical, dan tanggal publish. Framework mendukung output script application/ld+json, tetapi tidak menebak entitas bisnis atau makna halaman untuk Anda.

Artikel ini merangkum pola resmi Next.js, praktik Google Search Central, dan titik validasi agar markup eligible rich result tanpa mengklaim jaminan tampil di SERP.

Pola Resmi JSON-LD di App Router

Dokumentasi Next.js merekomendasikan merender JSON-LD lewat tag script dengan dangerouslySetInnerHTML. Data diserialisasi dari objek JavaScript/TypeScript yang Anda definisikan.

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: post.title,
  datePublished: post.publishedAt,
  dateModified: post.updatedAt,
  author: { '@type': 'Person', name: post.author.name },
  image: [post.coverImage.url],
  mainEntityOfPage: post.canonicalUrl,
};

// Render di Server Component: script type application/ld+json
// dangerouslySetInnerHTML __html = JSON.stringify(jsonLd).replace(LESS_THAN, '\\u003c')

Next.js memperingatkan JSON.stringify saja tidak aman bila string mengandung sequence seperti </script>. Escape karakter < atau gunakan serializer khusus sebelum inject ke HTML.

Sumber Data dan Tipe Schema

Field Article—headline, description, author, image, publisher—sebaiknya berasal dari satu content model dengan komponen UI. Hardcode SEO di layout root berisiko drift: title halaman berubah, schema tetap stale.

Organization schema membutuhkan name, url, dan logo yang valid. Jangan mengarang alamat, sameAs, atau founding date bila tidak terverifikasi. Pilih tipe schema.org sesuai halaman (Article, WebPage, Product) alih-alih menempel Review atau FAQ hanya karena “bisa”.

Google menegaskan structured data valid membuat halaman eligible rich result, bukan menjamin tampil. Validasi tetap wajib setelah deploy.

Untuk situs multibahasa, pastikan field inLanguage dan URL hreflang selaras dengan routing App Router. Satu halaman per locale biasanya punya graph sendiri; jangan menduplikasi Article schema lintas locale tanpa canonical yang jelas.

TypeScript opsional: pakai schema-dts atau tipe custom agar properti wajib terdeteksi saat compile. Build gagal lebih awal lebih murah daripada error silent di production.

Validasi dan Duplikasi

Lapisan QA minimal: syntax JSON, Google Rich Results Test, URL Inspection di Search Console, plus tes otomatis di CI bila tim memakai build-time validation (contoh alur di tutorial komunitas seperti freeCodeCamp).

Cek HTML render untuk schema ganda dari root layout, nested layout, plugin pihak ketiga, dan helper custom. Article schema spesifik halaman tidak belong di root layout seluruh site.

Bandingkan dengan WordPress: plugin SEO menghubungkan author entity dan site graph otomatis; di Next.js Anda yang memetakan relasi tersebut. Pembaca yang memilih stack headless bisa melihat perbandingan arsitektur di WordPress vs Laravel atau konteks decoupled di headless WordPress.

Keamanan dan Kesalahan Umum

Jangan memasukkan input pengguna mentah ke JSON-LD tanpa sanitasi. Untuk route dinamis blog atau produk, generate schema dari fetch yang sama dengan page props dan pastikan canonical URL selaras.

Structured data membantu mesin pencari memahami entitas halaman; bukan faktor ranking tunggal dan bukan jaminan kutipan di mesin AI generatif.

Server Component sering menjadi tempat generate JSON-LD karena data halaman sudah tersedia di server. Namun CSP ketat bisa membatasi inline script; sesuaikan kebijakan security dengan dokumentasi Next.js terbaru sebelum production.

Helper reusable—misalnya komponen JsonLd—memusatkan escape, memudahkan unit test, dan mencegah copy-paste schema berbeda antar route. Uji final di Rich Results Test pada URL staging atau production.

Patuhi dokumentasi resmi: Next.js JSON-LD guide dan Google structured data intro.