Berikut beberapa solusi jika link preview di WhatsApp tidak muncul

Blog | | 14.4Kx read | 9 months ago posted | by Nurman Teguh Novianto

✅ 1. Periksa Tag Open Graph di Website

WhatsApp menggunakan metadata Open Graph (og:) untuk menampilkan preview. Pastikan HTML halaman target punya tag ini:

<meta property="og:title" content="Judul Halaman">
<meta property="og:description" content="Deskripsi singkat halaman">
<meta property="og:image" content="https://domain.com/path/to/image.jpg">
<meta property="og:url" content="https://domain.com/halaman">

Catatan: og:image harus berupa URL absolut (bukan relatif), format JPG/PNG, dan disarankan ukuran minimal 300x200 px.

✅ 2. Hindari Redirect Berlebihan

Jika link kamu diarahkan (301/302) terlalu banyak, WhatsApp tidak akan bisa mengikuti hingga akhir. Pastikan URL langsung mengarah ke konten utama.

✅ 3. Gunakan HTTPS

WhatsApp lebih menyukai link yang aman. Gunakan HTTPS dengan sertifikat SSL yang valid.

✅ 4. Gunakan WhatsApp Debugger

Untuk cek dan refresh cache WhatsApp, gunakan tool berikut:

👉 https://wa.linkpreview.dev/

Atau cek di:

👉 https://www.opengraph.xyz/ (untuk cek tag OG)

✅ 5. Cek Ukuran dan Aksesibilitas Gambar

Gambar og:image tidak boleh di-block oleh robots.txt
Ukuran file < 5MB
Format harus jpg, png, atau webp
Coba buka langsung di browser: https://domain.com/path/to/image.jpg → jika error, WA pun tidak bisa ambil

✅ 6. Tidak Di-Compress/Diblock oleh Firewall

Beberapa CDN (seperti Cloudflare) atau sistem keamanan mungkin memblokir user-agent WhatsApp. Pastikan user-agent seperti berikut tidak diblok:

facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
WhatsApp/2.20

✅ 7. Cek Robots.txt dan Meta Tag

Pastikan website kamu tidak melarang crawling:

User-agent: *
Disallow: / ❌ (jangan disallow semua)

Dan jangan gunakan ini di HTML:

<meta name="robots" content="noindex, nofollow"> ❌

🧪 Contoh Minimal HTML untuk Link Preview:

<head>
  <meta property="og:title" content="Contoh Judul">
  <meta property="og:description" content="Ini deskripsi halaman">
  <meta property="og:image" content="https://mechat.id/img/banner.jpg">
  <meta property="og:url" content="https://mechat.id">
head>

Baca juga

Berikut Fungsi Desktop Analytics dan Penjelasan Setiap Fiturnya

4 months ago
Aplikasi Website Analytics Desktop dirancang untuk memberikan kontrol penuh terhadap performa website melalui satu dashboard terpusat. Seluruh aktivitas pengunjung, konten, hingga aspek teknis SEO dap...

Berikut ini keunggulan veo 3

6 months ago
🎉 Halo, pembaca setia bangnopi.id! Kali ini kita akan bahas sesuatu yang super keren, yaitu Veo 3, gadget terbaru yang lagi hits banget. Apa sih yang bikin Veo 3 ini spesial? Pertama, desainnya sup...

Berikut ini Fungsi asisten Ai di website kita

9 months ago
Halo semua! Kamu pasti sudah tidak asing lagi dengan kehadiran asisten AI di berbagai platform, termasuk di website kita di bangnopi.id. 🤖 Asisten AI atau Artificial Intelligence adalah teknologi c...

Berikut peran penting halaman blog pada website

8 months ago
Setiap klik, setiap guliran layar, membawa kita ke dalam sebuah dunia di mana informasi dan inspirasi bertemu dalam harmoni yang sempurna. Di balik layar-layar digital, terdapat satu elemen yang serin...

Berikut penjelasan tentang Syarat Pengajuan Verifikasi WhatsApp Centang BIru

9 months ago
Halo pembaca setia bangnopi.id! 🎉 Apakah kalian penasaran dengan proses pengajuan verifikasi WhatsApp Centang Biru? Jangan khawatir, dalam artikel ini saya akan memberikan penjelasan lengkapnya unt...