Cara Marketer Indonesia Pasang FAQPage Schema di Next.js untuk Naikkan Citation AI Overview 2026
TL;DR: FAQPage Schema membantu Google dan AI Search seperti AI Overview, Perplexity, dan ChatGPT mengutip jawaban langsung dari halaman Anda. Pasang lewat JSON-LD di komponen Next.js dengan dynamic
dangerouslySetInnerHTML, pastikan konten Q dan A identik dengan UI, dan validasi pakai Schema Markup Validator sebelum publish.
Banyak halaman layanan UMKM Indonesia sebenarnya sudah punya section FAQ panjang, tapi tidak ada satupun yang ditandai sebagai FAQPage Schema. Akibatnya, ketika calon klien bertanya ke ChatGPT soal "cara pilih jasa pembuatan website Indonesia", AI mengutip sumber luar yang strukturnya lebih jelas, bukan halaman Anda.
Dalam beberapa proyek terakhir, Vito Atmo memantau citation di AI Overview untuk konten klien Atmo LMS dan Vetmo. Halaman yang ditandai FAQPage Schema secara konsisten mengalami kenaikan citation 20 sampai 35% dalam 60 hari pertama, dibanding halaman tanpa schema. Bukan magic, sekadar karena AI Search butuh jawaban self-contained dan terstruktur.
Apa yang Perlu Disiapkan
Tiga hal: Next.js 14 atau 15 dengan App Router, daftar pasangan Q dan A yang sudah live di halaman, dan helper kecil untuk generate JSON-LD. Sebelum mulai, pastikan halaman Anda sudah punya section FAQ visual. Schema tanpa konten yang terlihat user dianggap manipulatif oleh Google dan bisa kena pinalti soft.
Untuk konteks lebih luas tentang penanda struktur ini, lihat dulu glosarium structured-data dan schema-markup. Keduanya jadi prasyarat memahami kenapa schema penting di era AI Search.
Implementasi di Next.js App Router
Buat helper di lib/seo/faq-schema.ts:
type FAQ = { q: string; a: string };
export function buildFAQSchema(faqs: FAQ[]) {
return {
"@context": "https://schema.org",
"@type": "FAQPage",
mainEntity: faqs.map(({ q, a }) => ({
"@type": "Question",
name: q,
acceptedAnswer: { "@type": "Answer", text: a },
})),
};
}
Lalu di page server component:
import { buildFAQSchema } from "@/lib/seo/faq-schema";
const FAQS = [
{ q: "Berapa lama proyek website selesai?", a: "Umumnya 3-6 minggu tergantung scope." },
{ q: "Apakah harga termasuk SEO?", a: "Setup teknis SEO sudah include, optimasi konten terpisah." },
];
export default function LayananPage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(buildFAQSchema(FAQS)) }}
/>
<section>
{FAQS.map(({ q, a }) => (
<details key={q}><summary>{q}</summary><p>{a}</p></details>
))}
</section>
</>
);
}
Pola ini DRY: satu sumber kebenaran (array FAQS), dipakai untuk schema dan UI sekaligus. Tidak ada risiko schema dan UI berbeda.
Aturan yang Sering Dilupakan
| Aturan | Konsekuensi Kalau Dilanggar |
|---|---|
| Konten Q dan A wajib identik dengan UI | Schema diabaikan Google, halaman bisa kena spam signal |
| Jangan pasang FAQ Schema untuk iklan atau penjualan | Disqualified dari rich result |
| 1 FAQPage per URL | Konten duplikat antar halaman menurunkan otoritas |
| Jawaban minimal 2 kalimat self-contained | AI Search melewatkan halaman pendek |
Studi Kasus: Atmo LMS
Saat Vito Atmo melakukan refactor halaman pricing Atmo LMS pada April 2026, ada 6 pertanyaan FAQ yang sudah live di section bawah. Setelah ditambahkan FAQPage Schema valid dan dimonitor 8 minggu, citation di AI Overview untuk query seputar "platform LMS Indonesia harga" naik dari 4% ke 17%. Tidak ada perubahan copywriting, hanya penambahan schema dan sedikit perbaikan struktur jawaban supaya self-contained. Praktik ini sejalan dengan dokumentasi resmi Google Search Central tentang FAQ Schema.
Pertanyaan Umum
Apakah FAQPage Schema masih bisa muncul sebagai rich result di SERP?
Sejak Agustus 2023, Google membatasi tampilan rich result FAQ hanya untuk situs pemerintah dan otoritas kesehatan. Tapi schema tetap penting karena dipakai sebagai sinyal struktur untuk AI Search.
Berapa jumlah Q dan A ideal per halaman?
Praktik standar 3-8 pertanyaan per halaman. Pastikan setiap jawaban minimal 2 kalimat substantif supaya AI Search bisa kutip langsung.
Apakah schema bisa di-generate dari CMS otomatis?
Bisa. Pola helper di atas bisa ambil data dari Supabase, Sanity, atau CMS apapun. Yang penting array yang dipakai render UI sama dengan yang dipakai generate schema.
Apakah perlu pasang FAQPage di semua halaman?
Tidak. Pasang hanya di halaman yang memang punya konten tanya-jawab substantif. Memaksa FAQ di halaman yang tidak butuh malah jadi sinyal spam.
Penutup
FAQPage Schema bukan jaminan masuk AI Overview, tapi tanpa schema valid, halaman Anda bahkan tidak masuk shortlist sumber yang dipertimbangkan AI Search. Pasang sekali, monitor 60 hari, ulang di halaman lain yang punya konten tanya-jawab. Konsistensi struktur mengalahkan optimasi sesaat.
Artikel Terkait
Website Bisnis
Cara Marketer Indonesia Pasang Product Schema di Next.js untuk Muncul Rich Result Harga dan Rating 2026
Product Schema bikin halaman produk Anda muncul dengan harga, rating, dan stok di SERP Google. Panduan implementasi di Next.js 15 dengan generateMetadata dan JSON-LD.
Website Bisnis
Cara Marketer Indonesia Pasang Partytown di Next.js untuk Pindahkan Tag Pihak Ketiga ke Web Worker dan Pangkas INP 2026
Tag GA4, Meta Pixel, dan chat widget bisa bikin INP melonjak ke atas 500 ms. Partytown memindahkan script pihak ketiga ke web worker supaya main thread tetap responsif.
Website Bisnis
Cara Marketer Indonesia Pasang Attribution Reporting API di Next.js untuk Pengukuran Konversi Tanpa Cookie 2026
Panduan praktis pasang Attribution Reporting API di Next.js untuk marketer Indonesia. Pengukuran konversi iklan tetap akurat di era cookieless tanpa bergantung pada pixel pihak ketiga.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang