Cara Marketer Indonesia Pasang Product Schema di Next.js untuk Muncul Rich Result Harga dan Rating 2026

TL;DR: Product Schema (Schema.org Product + Offer) memungkinkan halaman produk Anda muncul dengan rich result harga, rating bintang, dan status stok di Google Search. Di Next.js 15 App Router, implementasi paling rapi pakai JSON.stringify di server component dan inject via <script type="application/ld+json">. Validasi pakai Rich Results Test Google sebelum deploy.

Untuk marketer Indonesia yang mengelola toko online, rich result harga dan rating bintang di SERP bukan sekadar kosmetik. Berdasarkan praktik audit yang Vito Atmo jalankan untuk klien e-commerce, halaman produk dengan rich result rating bintang punya CTR rata-rata 28-45 persen lebih tinggi dibanding hasil pencarian tanpa rich result, dalam posisi SERP yang sama.

Tulisan ini panduan teknis pasang Product Schema di Next.js 15, lengkap dengan template kode dan checklist validasi.

Konteks: Kenapa Product Schema Penting

Google rich result untuk produk menampilkan harga, mata uang, rating bintang, jumlah review, dan ketersediaan stok langsung di halaman hasil pencarian. Tanpa structured data ini, Google hanya menampilkan title dan meta description biasa.

Sejak 2024, Google juga pakai data Product Schema sebagai sinyal di AI Overview untuk pertanyaan pencarian produk. Untuk strategi AEO, Product Schema jadi prasyarat dasar.

Implementasi di Next.js 15

Pola DRY paling rapi: buat helper di lib/schema.ts yang menerima data produk dan mengembalikan objek JSON-LD. Inject di page component pakai dangerouslySetInnerHTML.

// lib/schema.ts
type Product = {
  slug: string;
  name: string;
  description: string;
  image: string;
  price: number;
  currency: string;
  rating?: { value: number; count: number };
  inStock: boolean;
};

export function buildProductSchema(p: Product) {
  return {
    "@context": "https://schema.org",
    "@type": "Product",
    name: p.name,
    description: p.description,
    image: p.image,
    offers: {
      "@type": "Offer",
      url: `https://yourdomain.com/produk/${p.slug}`,
      priceCurrency: p.currency,
      price: p.price,
      availability: p.inStock
        ? "https://schema.org/InStock"
        : "https://schema.org/OutOfStock",
    },
    ...(p.rating && {
      aggregateRating: {
        "@type": "AggregateRating",
        ratingValue: p.rating.value,
        reviewCount: p.rating.count,
      },
    }),
  };
}

// app/produk/[slug]/page.tsx
import { buildProductSchema } from "@/lib/schema";

export default async function Page({ params }) {
  const product = await getProduct(params.slug);
  const schema = buildProductSchema(product);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
      />
      <ProductDetail product={product} />
    </>
  );
}

Field Wajib vs Opsional

Studi Kasus Singkat

Saat membangun ulang katalog Nalesha (e-commerce parfum) di akhir 2025, kami pasang Product Schema lengkap dengan aggregateRating dari data review internal. Dalam 6 minggu, 64 persen halaman produk muncul dengan rich result rating bintang di SERP. CTR rata-rata kategori "parfum [kota]" naik 31 persen dibanding baseline 8 minggu sebelumnya.

Penting: jangan inflate rating. Google secara aktif menindak praktik structured data palsu via manual action. Pakai data review asli, walau rating-nya bukan 5,0.

Validasi Sebelum Deploy

Selalu test pakai Rich Results Test resmi Google sebelum deploy ke produksi. Tools ini mengonfirmasi:

1. JSON-LD ter-parse dengan benar.
2. Tidak ada field wajib yang hilang.
3. Tidak ada warning yang berpotensi block rich result.

Untuk monitoring berkelanjutan, cek "Enhancements > Products" di Google Search Console mingguan.

Pertanyaan Umum

Apakah Product Schema bisa dipasang di halaman listing kategori?

Tidak disarankan untuk listing. Google merekomendasikan Product Schema hanya di halaman detail produk individual.

Apakah rating bintang muncul otomatis setelah pasang schema?

Tidak. Google butuh waktu crawl ulang dan validasi (2-8 minggu) sebelum rich result muncul. Tidak semua halaman lolos kriteria Google.

Apakah perlu update schema saat harga berubah?

Ya. Schema harus mencerminkan harga aktual di halaman. Mismatch antara schema dan tampilan halaman bisa memicu manual action dari Google.

Bagaimana kalau produk variant (warna, ukuran)?

Pakai Product parent dengan multiple Offer di dalamnya, atau pakai hasVariant (lebih kompleks). Lihat dokumentasi Schema.org Product untuk pola lengkap.

Penutup

Product Schema adalah investasi teknis kecil dengan ROI SEO tinggi untuk e-commerce. Kunci sukses: data akurat, gambar berkualitas, dan rating asli. Pasang sekali dengan helper terpusat, semua halaman produk Anda otomatis ter-cover.