Website Bisnis

Cara Marketer Indonesia Pasang VideoObject Schema di Next.js untuk Muncul di Carousel Video SERP 2026

A
Admin·26 Mei 2026·0 kali dibaca·4 min baca
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 dari contentUrl atau embedUrl. 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

FieldWajibFormat
nameYaString, judul video
descriptionYaString, 1 sampai 2 kalimat
thumbnailUrlYaURL gambar, minimal 1200 px sisi panjang
uploadDateYaISO 8601, contoh 2026-05-26
durationDisarankanISO 8601 duration, contoh PT3M45S
contentUrlSalah satu wajibURL file video langsung
embedUrlSalah satu wajibURL 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:

tsx
// 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.

Bagikan

Artikel Terkait

#videoobject-schema#structured-data#nextjs#seo#rich-result

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang