FAQ Schema di Next.js untuk Marketer Indonesia: Cara Pasang Markup FAQPage agar Konten Anda Dikutip AI Overview di 2026

TL;DR: FAQ Schema (tipe FAQPage Schema.org) adalah markup terstruktur yang menandai pasangan tanya-jawab di halaman. Sejak Agustus 2023 Google membatasi rich result FAQ untuk situs umum, tetapi markup ini tetap berdampak besar di era AI Search. Di Next.js App Router, cukup render JSON-LD lewat komponen Script atau langsung di metadata route, lalu validasi dengan Rich Results Test.

Banyak marketer Indonesia masih memasang FAQ Schema dengan harapan dapat bintang dan accordion di halaman pencarian Google. Ekspektasi itu sudah usang sejak pertengahan 2023. Tetapi anggapan bahwa FAQ Schema tidak berguna lagi juga keliru. Markup ini sekarang bermain di lapangan baru: AEO dan GEO.

Dalam beberapa proyek konten yang Vito Atmo tangani sejak akhir 2024, halaman dengan FAQ Schema yang konsisten lebih sering dikutip oleh Google AI Overview dan Perplexity dibanding halaman tanpa markup, walaupun keduanya punya kualitas konten setara. Ini bukan jaminan, tetapi sinyal kuat bahwa investasi 30 menit memasang markup masih bernilai di 2026.

Apa yang Sudah Berubah Sejak 2023

Pada Agustus 2023, Google mengumumkan rich result FAQ hanya akan tampil untuk situs pemerintah dan layanan kesehatan resmi. Untuk semua situs lain, accordion FAQ di halaman hasil pencarian dihilangkan. Banyak SEO meratapi keputusan ini dan melepas markup mereka.

Pertimbangan yang sering terlewat: rich result hanyalah satu fungsi dari structured data. Fungsi lain, yaitu pemahaman konten oleh mesin pencari dan mesin AI, justru menguat. Dokumen Google Search Central tentang structured data masih menempatkan markup sebagai sinyal pemahaman utama, bukan sekadar dekorasi visual.

Cara Kerja FAQ Schema

FAQ Schema menggunakan tipe FAQPage di akar JSON-LD, dengan properti mainEntity berisi array Question. Lihat glosarium FAQ Schema untuk struktur dasar dan beda FAQPage vs QAPage.

Pasangan minimal yang wajib ada per pertanyaan:

Aturan paling sering dilanggar: teks di markup harus sama dengan teks yang dilihat pengguna. Kalau berbeda, Google bisa anggap markup manipulatif dan mengabaikan halaman dari hasil rich result (walau untuk konten umum tidak ada rich result).

Implementasi di Next.js App Router

Di Next.js 15 App Router, ada tiga cara umum memasang JSON-LD. Pilih yang paling cocok dengan workflow tim:

Cara 1: Render Langsung di Komponen Page

// app/artikel/[slug]/page.tsx
export default function ArticlePage({ faqs }) {
  const faqJsonLd = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": faqs.map((faq) => ({
      "@type": "Question",
      "name": faq.question,
      "acceptedAnswer": {
        "@type": "Answer",
        "text": faq.answer
      }
    }))
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
      />
      {/* konten artikel */}
    </>
  );
}

Cara ini paling sederhana, JSON-LD ikut SSG tanpa hydration warning. Cocok untuk situs yang FAQ-nya berbeda per halaman dan datanya sudah ada saat build.

Cara 2: Pisahkan ke Komponen Reusable

// components/atoms/FaqSchema.tsx
export function FaqSchema({ faqs }: { faqs: { q: string; a: string }[] }) {
  const data = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": faqs.map(({ q, a }) => ({
      "@type": "Question",
      "name": q,
      "acceptedAnswer": { "@type": "Answer", "text": a }
    }))
  };
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
}

Pendekatan atomic ini lebih DRY dan sejalan dengan prinsip content pillar yang konsisten di semua halaman.

Cara 3: Gabungkan dengan Article Schema

Untuk artikel dengan FAQ section, lebih kuat memasang dua schema sekaligus: Article + FAQPage. Render keduanya dalam dua tag script terpisah agar tidak saling konflik. Ini selaras dengan rekomendasi standar Schema.org untuk konten kompleks.

Studi Kasus

Saat menyusun konten edukasi untuk Atmo, platform LMS yang Vito Atmo bantu kembangkan, kami menambahkan FAQ Schema ke 40+ halaman pelajaran selama Q4 2024. Dalam 90 hari, jumlah klik dari people also ask Google ke halaman tersebut naik sekitar 35-50%. Angka ini berdasarkan data internal Search Console dan sangat tergantung kompetisi keyword.

Pelajaran yang sama tidak terjadi di halaman dengan FAQ section yang ditulis seadanya tanpa markup. Konten dan markup harus bekerja bersama, bukan salah satu saja.

Validasi dan Monitoring

Setelah memasang markup, jalankan tiga validasi minimum:

1. Rich Results Test dari Google: cek apakah markup terbaca tanpa error.
2. Schema Markup Validator dari Schema.org: cek validitas struktur lebih ketat.
3. Search Console Enhancement Report: monitor selama 30 hari untuk melihat apakah ada peringatan.

Untuk situs Next.js yang pakai ISR atau dynamic rendering, validasi juga dengan View Source di production, bukan hanya di local dev. Hydration mismatch bisa membuat markup yang lolos di dev tidak terbaca di prod.

Pertanyaan Umum

Apakah FAQ Schema masih layak dipasang di 2026?

Layak, terutama untuk konten yang menargetkan AI Search. Rich result FAQ memang tidak lagi tampil di Google untuk situs umum, tetapi markup tetap dipakai mesin AI untuk memahami struktur konten dan memilih kutipan jawaban.

Berapa banyak FAQ ideal per halaman?

Tidak ada angka mutlak. Yang penting setiap pertanyaan benar-benar dicari pengguna dan jawabannya self-contained. Untuk artikel 1500-2500 kata, 3-5 FAQ biasanya cukup. Lebih dari itu cenderung memperburuk pengalaman baca.

Apakah FAQ Schema bertentangan dengan Article Schema?

Tidak. Keduanya bisa hidup bersama di satu halaman, dipasang dalam dua tag script JSON-LD terpisah. Article Schema menandai konten sebagai artikel, FAQPage menandai bagian tanya-jawab di dalamnya.

Bagaimana memastikan teks markup sinkron dengan UI?

Render markup dari sumber data yang sama dengan yang dipakai komponen UI. Di Next.js, idealnya FAQ disimpan sebagai array data, lalu dirender ke UI dan markup dari array tersebut. Hindari menulis ulang teks di markup secara manual.

Penutup

FAQ Schema sekarang bermain di babak kedua: bukan lagi soal accordion di halaman pencarian, tetapi soal bagaimana mesin AI memahami dan mengutip konten Anda. Implementasinya di Next.js murah, dampaknya di AEO terus relevan, dan biaya teknis untuk maintain mendekati nol kalau dipasang dengan pola atomic yang DRY. Marketer Indonesia yang serius soal organic visibility tidak punya alasan kuat untuk melewatinya.