Open Graph tag adalah potongan meta HTML yang memberi tahu platform sosial cara menampilkan preview saat URL dibagikan. Facebook, WhatsApp, Instagram, LinkedIn, dan Telegram membaca tag ini untuk menarik judul, gambar, dan deskripsi yang muncul di kartu link sebelum pengguna mengetuk.
Admin toko online di Semarang pernah panik. Link promo Ramadan sudah disebar ke 12 grup WhatsApp, tapi preview cuma menampilkan logo kecil dan teks acak. Pelanggan ragu klik karena tampilannya seperti spam. Setelah og:image dan og:description diperbaiki, CTR broadcast naik tanpa mengubah copy iklan sama sekali.
Tag Open Graph Mana yang Wajib Ada?
Empat tag inti paling sering dipakai crawler sosial media. og:title untuk judul kartu, og:description untuk ringkasan singkat, og:image untuk thumbnail, og:url untuk canonical halaman. Tanpa og:image, banyak platform fallback ke favicon atau gambar random dari halaman.
Spesifikasi resmi protokol Open Graph dijelaskan di ogp.me. Untuk WhatsApp khususnya, gambar disarankan minimal 300×200 piksel, ideal 1200×630 agar tidak blur saat diperbesar di chat.
Kenapa Preview Link WhatsApp Sering Gagal?
WhatsApp mem-cache preview agresif. Ubah og:image hari ini, grup lama bisa masih tampil versi kemarin. Itu beda masalah dengan tag yang memang salah sejak awal. Baca panduan lengkap preview link WhatsApp tidak muncul jika masalah spesifik di chat.
Penyebab teknis umum: gambar terlalu berat sehingga crawler timeout, URL og:image pakai http bukan https, robots.txt memblokir bot facebookexternalhit, atau halaman redirect berlapis sebelum crawler sampai ke meta tag.
Cek Tag OG Tanpa Jadi Developer
WordPress dengan Yoast SEO atau Rank Math biasanya otomatis generate Open Graph dari judul artikel dan featured image. Cukup pastikan featured image sudah di-set dan meta description terisi. Preview bisa dicek lewat Facebook Sharing Debugger sebelum link disebar masal.
Untuk landing page custom atau toko di subdomain, tag OG perlu ditulis manual di head HTML. Contoh minimal:
<meta property="og:title" content="Nama Produk Anda" /><meta property="og:description" content="Deskripsi singkat promo" /><meta property="og:image" content="https://domain.com/gambar-promo.webp" /><meta property="og:url" content="https://domain.com/halaman-promo" />
Pastikan og:url sama dengan canonical. Duplikat www dan non-www bisa membingungkan cache preview di beberapa platform.
Hubungan OG Tag dengan Short Link dan UTM
Short link tidak menghapus Open Graph. Crawler mengikuti redirect sampai halaman tujuan, lalu membaca meta tag di sana. Artinya og:image harus ada di landing page akhir, bukan di domain penyingkat.
Kombinasi dengan UTM parameter tetap aman selama parameter ditambahkan setelah path tanpa memutus redirect. Tim marketing bisa lacak sumber klik lewat utm_source sambil preview tetap cantik dari OG tag landing page.
Short link gratis dengan custom alias membantu link rapi di caption. Preview tetap ditentukan oleh halaman tujuan, bukan alias pendeknya.
Ukuran Gambar og:image yang Aman
Rasio 1.91:1 (1200×630 px) paling universal untuk Facebook dan LinkedIn. WhatsApp menerima variasi asalkan file di bawah 300 KB dan format JPG atau PNG. WebP kadang belum konsisten di semua crawler, jadi siapkan fallback JPG untuk og:image jika preview macet.
Jangan pakai teks kecil di dalam gambar preview. Di layar HP, thumbnail chat selebar ibu jari. Headline produk harus terbaca meski gambar di-crop.
og:image pakai URL relatif bisa?
Tidak. Wajib absolute URL dengan https. Path relatif seperti /uploads/foto.jpg sering gagal di crawler eksternal.
Perlu tag twitter:card juga?
Twitter/X punya skema sendiri, tapi banyak platform fallback ke OG. Pasang keduanya jika audiens aktif di X. Card summary_large_image setara og:image untuk sebagian besar kasus.
Berapa lama cache preview berubah?
WhatsApp bisa hold cache berhari-hari. Facebook Debugger punya tombol Scrape Again untuk refresh paksa. Setelah update tag, tes di chat pribadi dulu sebelum broadcast ke grup besar.
Yang Sering Dilupakan Tim Kecil
Featured image beda dengan og:image custom
Plugin SEO mengambil featured image otomatis. Kalau thumbnail artikel portrait tapi og:image butuh landscape, override manual lewat panel SEO per halaman.
Halaman login atau paywall
Crawler sosial tidak bisa login. og:tag harus ada di HTML publik, bukan di balik autentikasi member.
Lupa tes dari aplikasi asli
Debugger Facebook hijau belum jamin WhatsApp sama. Selalu kirim ke nomor pribadi dan lihat kartu preview sebelum campaign live.
Gambar og:image hotlink ke CDN orang lain
Jika CDN asing block bot Meta, preview kosong. Host gambar OG di domain sendiri atau CDN yang allow facebookexternalhit.
Admin Semarang sekarang rutin checklist tiga titik sebelum blast WhatsApp: og:image HTTPS, deskripsi under 160 karakter, tes kirim ke diri sendiri. Lima menit itu menghemat ratusan chat “link aman nggak?” dari pelanggan. Open Graph tag terdengar teknis, padahal intinya memastikan link Anda terlihat meyakinkan di mata manusia sebelum diklik.
