Thumbnail WhatsApp & Social Share Native via OpenGraph WDP Link Post
Thumbnail WhatsApp & Media Sosial Native WDP Link Post menyajikan metadata OpenGraph (og:image, og:title, og:description) langsung di tag
<head>dokumen utama yang cocok dengan host domain kustom. Saat bot perayap WhatsApp (WhatsApp Crawler) melakukan scraping pada link undangan, bot langsung menemukan gambar pratinjau foto pengantin dalam ukuran presisi tanpa terhalang skema masking URL atau iFrame.
Kendala Link Undangan Tanpa Gambar Pratinjau di WhatsApp
Ketika calon pengantin menyebarkan link undangan pernikahan melalui WhatsApp, harapan mereka adalah munculnya kartu pratinjau (link preview card) yang indah berisi foto pre-wedding mereka, judul undangan, dan keterangan tanggal pernikahan.
Namun, banyak vendor mendapati masalah serius:
- Link yang dikirimkan ke WhatsApp hanya menampilkan teks biru biasa tanpa gambar pratinjau.
- Gambar yang muncul bukan foto pengantin, melainkan logo default hosting atau ikon server.
- Bot perayap WhatsApp (WhatsAppBot/2.x) mengalami kegagalan membaca meta tag karena terhadang script pembungkus iFrame atau rantai redirect yang terlalu panjang.
Pentingnya Tampilan Kartu Sosial bagi Citra Profesional Vendor
Tampilan chat WhatsApp yang buruk memberikan dampak instan pada bisnis vendor:
- Klien merasa kecewa karena undangan digital mereka terkesan tidak profesional dan seperti pesan spam atau penipuan (phishing).
- Tamu undangan ragu-ragu untuk mengklik tautan karena tidak ada gambar foto wajah mempelai yang mereka kenal.
- Vendor menghabiskan waktu berjam-jam mencoba mencari tahu mengapa metadata tidak terbaca, padahal mereka telah memasang plugin SEO di WordPress.
Solusi Penyajian Metadata OpenGraph Native Tingkat Rendah
Perayap WhatsApp tidak menjalankan JavaScript kompleks. Bot perayap hanya mengunduh 300 kilobyte pertama dari dokumen HTML mentah dan mencari tag standar OpenGraph.
Karena WDP Link Post bekerja di tingkat kueri internal, dokumen HTML yang disajikan ke bot WhatsApp adalah dokumen lengkap milik postingan undangan tersebut.
Struktur Tag OpenGraph yang Dihasilkan
WDP Link Post memastikan tag berikut tersaji dengan sempurna di dalam tag <head>:
<!-- OpenGraph Metadata Terverifikasi WDP Link Post -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Pernikahan Andy & Zhea - Undangan Resmi" />
<meta property="og:description" content="Merupakan suatu kehormatan bagi kami atas kehadiran Anda dalam momen bahagia kami." />
<meta property="og:image" content="https://andy-zhea.com/wp-content/uploads/2026/09/foto-prewedding-og.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://andy-zhea.com/" />
Standar Ukuran & Format Gambar Rekomendasi
Agar thumbnail WhatsApp langsung muncul dalam rasio besar (large card preview) dan tidak terpotong, terapkan pedoman berikut:
| Parameter | Nilai Rekomendasi | Keterangan |
|---|---|---|
| Dimensi Gambar | 1200 x 630 piksel | Rasio aspek standar 1.91:1 yang disukai bot media sosial |
| Format Gambar | WebP atau JPEG Progresif | Ukuran kompresi tinggi dengan kualitas visual jernih |
| Berat File | Di bawah 300 KB | Bot WhatsApp sering mengabaikan gambar di atas 500 KB |
| Posisi Fokus Objek | Berada di area tengah (center safe area) | Mencegah kepala atau teks terpotong saat diubah ke rasio kotak di desktop |
Studi Kasus Nyata: Pratinjau Undangan Andy & Zhea
Vendor menyiapkan halaman undangan untuk Andy & Zhea:
- Custom Domain:
https://andy-zhea.com - Featured Image Post: Foto prewedding berukuran 1200x630 piksel dengan berat 185 KB.
Saat Andy membagikan link ke grup keluarga besar via WhatsApp:
- Server WhatsApp mengirimkan request dengan User-Agent
WhatsApp/2.26.x. - Router WDP Link Post mengenali domain dan langsung menyajikan HTML post 418.
- Bot WhatsApp membaca tag
og:imagedalam waktu 120 milidetik. - Kartu pratinjau muncul seketika di ruang obrolan WhatsApp dengan foto Andy & Zhea yang tajam dan teks keterangan resmi.