Saat Anda membagikan tautan di WhatsApp, aplikasi akan mengambil halaman Anda, membaca beberapa tag meta dari HTML, lalu menyusun kartu pratinjau berisi judul, deskripsi, dan gambar bahkan sebelum penerima menekan tautannya. Jika tag tersebut salah, pratinjau akan hilang tanpa peringatan. Panduan ini membahas tag Open Graph mana yang dibaca WhatsApp, mengapa og:image harus memakai URL absolut, ukuran gambar yang benar-benar berfungsi, dan cara menguji serta memperbaiki pratinjau sebelum Anda mengirim.
Cara WhatsApp membaca pratinjau tautan
Setiap kali seseorang menempelkan URL ke obrolan WhatsApp, perayap internal aplikasi, yang kadang disebut WhatsApp Link Preview Bot, mengirim permintaan HTTP GET ke URL tersebut. Perayap itu mengurai respons HTML untuk mencari tag <meta property="og:..."> di dalam <head>. Jika tag yang tepat ditemukan, ia menyusun kartu pratinjau. Jika tidak, tautan tampil sebagai teks biasa tanpa konteks visual apa pun.
WhatsApp bukan satu-satunya perayap yang bekerja seperti ini: Facebook, LinkedIn, Slack, Telegram, iMessage, dan Twitter/X semuanya mengikuti protokol Open Graph yang sama, yang dikembangkan Facebook pada 2010. Spesifikasinya ada di ogp.me dan mendefinisikan sekumpulan tag <meta> yang bisa ditambahkan situs mana pun untuk mengatur tampilan halamannya saat dibagikan di media sosial.
Kapan perayapan terjadi?
WhatsApp merayap URL saat Anda pertama kali menempelkannya ke obrolan dan pratinjau dimuat. Hasilnya di-cache secara agresif: WhatsApp akan menyajikan kartu pratinjau yang sama selama berhari-hari atau bahkan berminggu-minggu setelah pengambilan pertama. Karena itu, memperbarui tag OG di server tidak langsung memperbaiki pratinjau yang rusak; versi yang ter-cache terus muncul. Penjelasan lebih lanjut tentang menembus cache ada di bagian berikutnya.
Catatan
Pratinjau di obrolan grup versus pesan langsung
WhatsApp menghasilkan pratinjau baik di pesan langsung maupun obrolan grup. Perilakunya identik: tag OG yang sama dipakai di kedua konteks. Namun ada satu nuansa: jika pengirim menonaktifkan pratinjau tautan di pengaturan WhatsApp (Pengaturan → Obrolan → Buat Pratinjau Tautan), pratinjau tidak akan muncul seberapa pun benar konfigurasi tag Anda. Ini pengaturan sisi klien, bukan masalah sisi server.
Persyaratan URL absolut pada og:image
Ini penyebab paling umum pratinjau WhatsApp yang rusak: jalur relatif pada tag og:image. Spesifikasi protokol Open Graph tegas soal ini — og:image harus berupa URL absolut lengkap. Bukan jalur relatif dari akar, bukan URL relatif protokol, bukan potongan jalur. URL lengkap dengan skema, domain, dan jalur.
| Format | Contoh | Berfungsi di WhatsApp? |
|---|---|---|
| ✓ URL absolut (benar) | https://domainanda.com/images/share.jpg | ✓ Ya |
| ✗ Jalur relatif dari akar | /images/share.jpg | ✗ Tidak — gagal tanpa peringatan |
| ✗ URL relatif protokol | //domainanda.com/images/share.jpg | ✗ Tidak andal |
| ✗ Jalur relatif | images/share.jpg | ✗ Tidak |
| ✗ Data URI | data:image/jpeg;base64,... | ✗ Tidak |
Properti terstruktur dapat ditentukan dengan menaruh titik dua setelah nama properti dan memakai tag og:image lain dengan URL absolut.
Mengapa jalur relatif gagal tanpa peringatan
Saat perayap WhatsApp mengambil halaman Anda, ia mengurai HTML secara terpisah — ia tidak "mengetahui" URL dasar Anda seperti halnya browser. Jalur relatif seperti /images/share.jpg tidak punya konteks, sehingga perayap mengabaikannya atau berusaha menyelesaikannya terhadap URL dasar yang mungkin tidak disimpulkan dengan benar. Hasilnya gambar hilang tanpa pesan galat: pratinjau muncul tanpa gambar atau tidak muncul sama sekali.
Selalu gunakan URL absolut lengkap termasuk https://. Jika situs Anda mendukung HTTP dan HTTPS, selalu gunakan https:// — banyak perayap sosial menolak memuat gambar non-HTTPS di pratinjau karena alasan keamanan.
Peringatan
CDN dan host gambar pihak ketiga
Jika gambar Anda disajikan dari CDN atau host pihak ketiga (seperti Cloudinary, Imgix, atau bucket penyimpanan cloud), persyaratan URL absolut tetap berlaku — cukup pakai URL lengkap CDN tersebut. Satu pertimbangan tambahan adalah header CORS: pastikan CDN Anda mengizinkan permintaan lintas origin karena sebagian perayap memeriksanya. Verifikasi juga bahwa URL CDN tidak memuat token autentikasi yang kedaluwarsa — URL bertanda tangan dengan masa berlaku terbatas akan merusak pratinjau bagi siapa pun yang mengeklik tautan setelah token kedaluwarsa.
Pengoptimal teks pratinjau Open Graph
Periksa apakah panjang og:title dan og:description Anda sudah optimal untuk WhatsApp, Facebook, LinkedIn, dan Twitter sekaligus.
Aturan ukuran dan format og:image
Membenarkan URL gambar baru separuh pertempuran. WhatsApp juga punya persyaratan ukuran dan format yang menentukan apakah gambar ditampilkan menonjol atau dilewati sepenuhnya.
Dimensi yang disarankan
Spesifikasi Open Graph menyarankan 1200×630 piksel dengan rasio aspek 1,91:1. Ini target yang tampil baik sekaligus di WhatsApp, Facebook, LinkedIn, dan Slack, jadi tidak ada alasan untuk tidak memakainya sebagai nilai default.
| Platform | Ukuran minimum | Ukuran disarankan | Rasio aspek |
|---|---|---|---|
| 300×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 atau 1:1 | |
| Twitter/X | 280×150 px | 1200×628 px | 2:1 (summary_large_image) |
| Slack | 500×300 px | 1200×630 px | 1,91:1 |
WhatsApp akan menampilkan gambar hingga sekitar 300×200 piksel, tetapi apa pun yang lebih kecil cenderung dirender sebagai thumbnail mungil alih-alih gambar menonjol, dan gambar yang sangat kecil bisa dilewati sepenuhnya. Gambar di bawah ambang minimum atau dengan rasio aspek ekstrem (misalnya potret yang sangat tinggi) kadang ditolak.
Format file yang didukung
- JPEG (.jpg, .jpeg) — pilihan terbaik untuk foto dan gambar bergradasi. Didukung luas oleh semua perayap sosial.
- PNG (.png) — pilihan terbaik untuk grafik, logo, dan gambar dengan transparansi. Juga didukung secara universal.
- WebP — dukungan perayap tidak konsisten. Hindari WebP untuk og:image meski situs Anda memakai gambar WebP di tempat lain.
- GIF — didukung luas tetapi hanya frame pertama yang ditampilkan (tanpa animasi). Jarang ideal untuk gambar pratinjau.
- SVG — tidak didukung sebagian besar perayap sosial termasuk WhatsApp. Gunakan PNG atau JPEG yang dirasterkan sebagai gantinya.
Pertimbangan ukuran file
Jaga file og:image Anda di bawah 300 KB. Perayap WhatsApp berjalan di server Meta dan dioptimalkan untuk kecepatan — gambar yang sangat besar lebih lama diambil dan meningkatkan peluang timeout, sehingga pratinjau tampil tanpa gambar. JPEG 1200×630 px yang teroptimasi baik seharusnya nyaman berada di bawah 200 KB.
Tips
Penyebab umum pratinjau gagal
Bahkan dengan tag OG yang benar, pratinjau tautan WhatsApp kadang gagal dirender. Berikut penyebab yang paling sering.
URL og:image relatif
Sudah dibahas di atas, tetapi layak diulang karena ini kesalahan paling umum. Selalu gunakan https://domainanda.com/jalur/ke/gambar.jpg, jangan pernah /jalur/ke/gambar.jpg. Gunakan Validator tag OG untuk menangkapnya sebelum membagikan.
Tag OG dirender JavaScript (bukan di HTML dari server)
Perayap WhatsApp tidak menjalankan JavaScript. Jika tag meta Anda disuntikkan framework sisi klien setelah halaman dimuat — hal umum pada aplikasi satu halaman yang dibangun dengan React, Vue, atau Angular tanpa render sisi server — perayap akan melihat <head> kosong dan tidak menghasilkan pratinjau. Tag OG harus ada pada respons HTML awal dari server. Gunakan render sisi server (SSR) atau pembuatan situs statis (SSG) agar tag ada di HTML mentah.
Server memblokir perayap WhatsApp
Alat keamanan seperti Bot Fight Mode Cloudflare, aturan WAF khusus, atau konfigurasi robots.txt yang agresif kadang memblokir perayap WhatsApp. Periksa robots.txt Anda untuk memastikan tidak memblokir semua perayap dengan `User-agent: * Disallow: /`. Cek juga log keamanan server saat menguji — mungkin Anda menemukan perayap diblokir dengan status 403 atau 429.
og:image mengembalikan status selain 200
Jika URL gambar mengembalikan 404, 403, pengalihan 301, atau respons apa pun selain 200, WhatsApp diam-diam membuang gambar dari pratinjau. Pastikan URL gambar Anda dapat diakses langsung (tanpa pengalihan, tanpa autentikasi) dengan membukanya di jendela penjelajahan privat dan memeriksa statusnya. Gunakan Pemeriksa header HTTP untuk memeriksa header respons dari URL gambar mana pun.
og:image dihosting di HTTP (bukan HTTPS)
Perayap sosial biasanya mewajibkan HTTPS demi keamanan. Gambar yang disajikan lewat HTTP biasa sering dilewati meski bagian lain halaman Anda memakai HTTPS. Selalu pastikan URL og:image Anda diawali https://.
og:image melebihi batas ukuran atau formatnya tidak valid
Gambar yang sangat besar (di atas 5 MB) atau format yang tidak didukung (SVG, WebP di sebagian perayap) dilewati tanpa peringatan. Pilih JPEG atau PNG di bawah 300 KB pada 1200×630 px.
Peringatan
Menembus cache pratinjau WhatsApp
WhatsApp menyimpan pratinjau tautan per URL. Setelah sebuah URL dirayap, pratinjau yang sama disajikan ke semua penerima tautan itu — terlepas dari apakah Anda sudah memperbarui tag OG sejak itu. Masa hidup cache tidak didokumentasikan publik, tetapi dalam praktiknya bisa bertahan beberapa hari hingga sepekan.
Metode query string
Cara paling andal adalah menambahkan query string pada URL saat membagikannya. WhatsApp memperlakukan https://domainanda.com/halaman?v=2 sebagai URL berbeda dari https://domainanda.com/halaman, sehingga ia akan merayap ulang halaman itu dari awal dan menghasilkan pratinjau baru. Query string bisa apa saja (?v=2, ?ref=wa, ?share=1) selama berbeda dari yang dibagikan sebelumnya.
Tips
Memakai Sharing Debugger Facebook untuk menyiapkan cache
Sharing Debugger Facebook (developers.facebook.com/tools/debug) adalah alat yang sekaligus memvalidasi tag OG Anda dan memaksa perayapan ulang URL di infrastruktur Meta. Karena WhatsApp dan Facebook berbagi infrastruktur Open Graph yang sama di bawah Meta, perayapan lewat Sharing Debugger kadang bisa menyiapkan (atau membersihkan) cache pratinjau WhatsApp untuk URL yang sama. Ada baiknya menjalankannya setelah setiap perubahan tag, bersamaan dengan metode query string.
Ringkasan: alur menembus cache
- Perbarui tag OG Anda di server dan pastikan respons HTML mentah memuat nilai baru.
- Lewatkan URL Anda ke Validator tag OG untuk memastikan tag sudah benar.
- Kirimkan URL ke Sharing Debugger Facebook untuk memaksa perayapan ulang.
- Saat membagikan di WhatsApp, tambahkan query string baru (misalnya ?v=2) untuk memastikan perayapan segar.
Pola tag OG tingkat lanjut
Setelah dasar-dasarnya berjalan, beberapa pola lanjutan memberi Anda kendali lebih besar atas tampilan konten Anda di WhatsApp dan platform sosial lain.
Beberapa tag og:image
Spesifikasi Open Graph mengizinkan beberapa tag og:image pada satu halaman. Setiap tag gambar tambahan diperlakukan sebagai alternatif — perayap biasanya memakai gambar valid pertama yang ditemukannya. Ini berguna untuk menyediakan cadangan:
<!-- Primary: large landscape (WhatsApp, Facebook, LinkedIn) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Fallback: square (some LinkedIn contexts, Instagram) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x1200.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />Memakai og:image terpisah dari twitter:image
Twitter/X membaca twitter:image lebih dulu dan hanya memakai og:image bila tidak ada tag Twitter Card. Artinya Anda bisa menentukan gambar berbeda untuk Twitter tanpa memengaruhi WhatsApp. Ukuran gambar yang disarankan Twitter untuk kartu summary_large_image adalah 1200×628 px (rasio 2:1), bukan 1200×630 px. Selisihnya kecil, tetapi jika ingin rendering sempurna di kedua platform, tentukan keduanya:
<!-- Used by WhatsApp, Facebook, LinkedIn, Slack -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<!-- Used by Twitter/X specifically -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/share-1200x628.jpg" />Gambar OG dinamis
Banyak situs modern menghasilkan gambar OG secara dinamis — untuk pos blog, halaman produk, atau profil pengguna — memakai layanan atau render sisi server. Jika Anda menghasilkan gambar secara programatik, ingat bahwa URL-nya tetap harus absolut dan dapat diakses publik. URL gambar OG dinamis biasanya terlihat seperti: https://domainanda.com/api/og?title=Judul+Pos+Saya — ini sepenuhnya valid selama endpoint mengembalikan gambar sungguhan dengan header Content-Type yang benar (image/jpeg atau image/png), bukan halaman HTML.
Memvalidasi data terstruktur bersama tag OG
Tag Open Graph bekerja bersama (bukan menggantikan) data terstruktur JSON-LD. Untuk artikel, produk, dan bisnis lokal, data terstruktur mengaktifkan hasil kaya Google sementara tag OG menangani pratinjau berbagi sosial. Kedua sistem saling melengkapi — Anda butuh keduanya. Gunakan Validator data terstruktur untuk memeriksa skema JSON-LD Anda sementara Validator tag OG menangani implementasi Open Graph. Pembuat tag meta dapat menghasilkan bagian <head> lengkap dengan tag OG dan Twitter Card dalam satu keluaran.
Bagian head lengkap yang disarankan
Sebagai referensi, berikut bagian <head> lengkap dan siap produksi yang mencakup Open Graph (WhatsApp, Facebook, LinkedIn), Twitter Card, dan tag meta SEO standar:
<head>
<!-- Standard SEO -->
<title>Your Page Title | Site Name</title>
<meta name="description" content="A concise 150-160 character page description." />
<link rel="canonical" href="https://yourdomain.com/your-page" />
<!-- Open Graph (WhatsApp, Facebook, LinkedIn, Slack) -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise summary for social sharing." />
<meta property="og:image" content="https://yourdomain.com/images/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for the preview image." />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card (Twitter/X) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A concise summary for Twitter." />
<meta name="twitter:image" content="https://yourdomain.com/images/share-1200x628.jpg" />
</head>Pembuat tag meta
Hasilkan sekumpulan lengkap tag meta Open Graph, Twitter Card, dan SEO dalam sekali jalan — tanpa penulisan manual.
Poin penting
- WhatsApp membaca empat tag Open Graph untuk menyusun pratinjau tautan: og:title, og:description, og:image, dan og:url.
- og:image harus berupa URL HTTPS absolut lengkap — jalur relatif gagal tanpa peringatan di WhatsApp dan semua perayap sosial lain.
- Gunakan JPEG atau PNG 1200×630 px di bawah 300 KB sebagai og:image untuk rendering lintas platform terbaik.
- Sertakan tag og:image:width dan og:image:height agar perayap dapat menyusun tata letak pratinjau sebelum gambar dimuat.
- Tag OG harus ada di HTML hasil render server — tag meta yang disuntikkan JavaScript tidak dibaca WhatsApp.
- WhatsApp menyimpan cache pratinjau per URL selama berhari-hari. Tambahkan query string (?v=2) saat membagikan tautan yang diperbarui.
- Gunakan Validator tag OG untuk memeriksa semua tag sebelum membagikan, dan Sharing Debugger Facebook untuk memaksa perayapan ulang setelah perubahan.