Pratinjau Tautan WhatsApp Tidak Muncul? Perbaiki og:image

Pratinjau tautan WhatsApp yang tidak muncul hampir selalu disebabkan oleh salah satu dari lima hal: halaman tidak memiliki tag og:image, URL gambar tidak dapat diakses publik, bentuk gambar salah sehingga WhatsApp memotongnya, hasil potongan sudah benar tetapi pratinjau basi, atau plugin SEO toko mencetak tag yang bersaing. Panduan ini membahas setiap penyebab, mengapa Anda tidak dapat memaksa WhatsApp untuk memuat ulang, dan apa yang perlu diubah pada toko WooCommerce.

Jawaban singkat

WhatsApp membuat pratinjau tautan (link preview) dari tag Open Graph pada halaman. Jika og:image tidak ada, tidak dapat diakses, atau tidak berbentuk kartu 1200×630, tautan yang dibagikan akan tampil sebagai tautan kosong, kotak abu-abu, atau foto produk yang terpotong dengan buruk. Sebagian besar toko WooCommerce tidak pernah menyetel og:image untuk halaman produk sama sekali — plugin SEO akan kembali ke gambar unggulan statis, dan foto produk berbentuk persegi atau tinggi akan terpotong bagian samping atau atasnya.

1. Tidak ada tag og:image di halaman

Ini adalah penyebab paling umum pada sebuah toko. WordPress dan WooCommerce tidak mengeluarkan og:image untuk halaman produk, kategori, atau toko secara default, dan tema yang tidak menangani Open Graph akan menghilangkan tag tersebut sepenuhnya.

Perbaikan: lihat sumber halaman dan pastikan tag og:image ada, absolut (URL https://… lengkap, bukan jalur relatif), dan dirender di server — bukan disuntikkan oleh JavaScript setelah dimuat. WhatsApp tidak menjalankan JavaScript Anda.

curl -s https://your-store.com/product/example | grep -i 'og:image'

Hasil kosong adalah jawabannya: WhatsApp tidak memiliki gambar untuk ditampilkan.

2. URL gambar tidak dapat diakses publik

Perayap WhatsApp mengambil gambar dengan cara yang sama seperti klien anonim lainnya. URL yang berada di balik login, di localhost, pada alamat IP mentah, atau pada jalur yang diblokir oleh robots.txt akan gagal.

Perbaikan: pastikan URL mengembalikan gambar tanpa kredensial.

curl -I https://your-store.com/wp-content/uploads/product.jpg

Anda menginginkan 200 OK dan Content-Type sebesar image/png atau image/jpeg.

Jebakan robots.txt. Perayap sosial menghormati robots.txt, sehingga aturan yang memblokir jalur yang menyimpan gambar Anda akan merusak pratinjau — dan kerusakannya terjadi dengan cara yang mudah salah didiagnosis. Debugger Meta kemudian melaporkan "could not be processed as an image. It may be corrupted or may have an invalid format", yang terbaca persis seperti render yang rusak. curl tidak pernah mereproduksinya, karena curl mengabaikan robots.txt. Jika gambar Anda dilayani dari jalur yang tercakup oleh aturan Disallow:, pratinjau akan gagal tidak peduli seberapa valid file tersebut. Kami mengalaminya sendiri pada jalur render FastOG dan memperbaikinya dengan override Allow: pencocokan-terpanjang.

3. WhatsApp memotong gambar produk Anda — dan mengedit foto tidak akan memperbaikinya

Ini adalah gejala yang digambarkan oleh para merchant sebagai "gambar produk saya terpotong di WhatsApp", dan ini adalah hal yang perlu dipahami dengan benar.

Platform tersebut memotong gambar apa pun yang diberikan menjadi bingkai 1200×630. Foto produk yang berbentuk persegi atau tinggi akan terpotong bagian samping atau atasnya; tile logo akan meregang. Memotong foto sumber secara manual di Photoshop adalah permainan yang sia-sia, karena WhatsApp menentukan potongan berdasarkan rasio aspek kartu, bukan dari komposisi yang Anda pilih — dan foto produk berikutnya memiliki bentuk yang berbeda lagi.

Solusinya adalah mengubah gambar yang Anda sajikan, bukan foto yang Anda miliki. Kirim kartu yang sudah dikomposisikan pada ukuran 1200×630, dengan foto produk yang muat di dalamnya. Dengan begitu, platform tidak memiliki apa pun untuk dipotong.

4. Ukuran gambar pratinjau tautan WhatsApp yang tepat

Ukuran standar gambar Open Graph adalah 1200×630 piksel — rasio 1,91:1 — dan ini adalah bentuk yang diharapkan oleh setiap platform besar, termasuk WhatsApp. Jika Anda menyajikan gambar 1200×630, pratinjau akan ditampilkan sesuai yang diinginkan; jika Anda menyajikan gambar persegi 1000×1000, WhatsApp akan memotongnya agar memenuhi bingkai.

Pastikan ukuran file di bawah 5 MB. Kartu teks-dan-produk berukuran 1200×630 biasanya berada di kisaran 200 KB hingga 500 KB dalam format PNG.

Lihat Ukuran Gambar OG: 1200×630 Dijelaskan untuk memahami mengapa rasio tersebut menjadi standar.

5. Pratinjau basi — dan Anda tidak dapat memaksa WhatsApp untuk menyegarkannya

Jika tag, URL, dan bentuknya sudah benar tetapi pratinjau masih salah, yang Anda hadapi adalah cache.

WhatsApp menyimpan pratinjau dalam cache. Cache tersebut tersimpan di aplikasi penerima, yang berarti tidak ada alat yang dapat meminta WhatsApp untuk menyegarkannya — bukan debugger, bukan API, bukan kami. WhatsApp tidak menyediakan penyegaran terprogram dalam bentuk apa pun, jadi tidak ada tombol yang bisa ditekan. Siapa pun yang mengklaim sebaliknya sedang menjelaskan perilaku Facebook, bukan WhatsApp.

Yang dapat Anda lakukan adalah memastikan gambar yang benar sudah siap menunggu saat WhatsApp membaca halaman berikutnya. Itulah sebabnya URL sampul FastOG bersifat content-addressed: ubah judul, harga, atau gambar produk dan URL ikut berubah, sehingga pembacaan berikutnya tidak mungkin mengambil kartu lama. Kapan pembacaan itu terjadi sepenuhnya terserah WhatsApp.

Dua platform terkait berperilaku sama — LinkedIn dan X juga tidak menyediakan API invalidasi, dan biasanya membaca ulang dalam waktu sekitar satu minggu. Inspektor mereka sendiri dapat mendorong pembacaan ulang jika Anda sedang terburu-buru:

Menggunakan debugger Facebook untuk masalah WhatsApp. Meskipun tidak dapat menyegarkan WhatsApp, tetap layak menempelkan URL ke Sharing Debugger karena alat tersebut mengambil halaman dengan cara yang sama seperti WhatsApp dan melaporkan apa yang sebenarnya ditemukan — tag yang hilang, gambar yang tidak dapat diakses, format yang buruk. Perlakukan alat tersebut sebagai validator untuk tag, bukan sebagai perbaikan untuk cache WhatsApp.

6. Memperbaiki ini di toko WooCommerce

Pada WooCommerce, alur kerjanya perlu dijelaskan secara tepat, karena mode kegagalannya biasanya berasal dari plugin SEO, bukan tema:

• Tag tersebut tidak ada secara default. WooCommerce tidak menyertakan og:image untuk product, product_cat, atau halaman toko.
• Plugin SEO Anda mengisi celah tersebut dengan cara yang buruk. Yoast, Rank Math, All in One SEO, dan SEOPress akan mencetak og:image — tetapi untuk produk, mereka menggunakan gambar fitur statis. Itu adalah foto persegi atau potret, yang justru menjadi gambar yang kemudian dipotong oleh WhatsApp.
• Perhatikan tag duplikat. Jika dua plugin sama-sama mencetak og:image, platform akan memilih salah satu, dan mungkin bukan yang Anda harapkan. Lihat sumber halaman dan hitung berapa banyak tag og:image yang dikeluarkan halaman tersebut.

FastOG untuk WooCommerce mengambil jalur berbeda: ia merender kartu 1200×630 dari data katalog langsung (judul, harga, lencana obral, rating, foto produk) di layanan render miliknya sendiri, lalu menyerahkan sampul tersebut ke plugin SEO mana pun yang sudah Anda jalankan, alih-alih mencetak tag yang bersaing. Jadi Anda tetap memiliki satu og:image di halaman, dan itu adalah kartu yang disusun untuk bingkai 1,91:1, bukan foto produk mentah.

Karena sampul digambar dari data katalog langsung, harga pada kartu sesuai dengan harga di halaman, dan produk yang didiskon mendapatkan lencana obral. Saat Anda menyimpan produk, plugin juga meminta Facebook untuk membaca ulang halaman tersebut — Facebook adalah satu-satunya platform yang menawarkan penyegaran terprogram. WhatsApp, LinkedIn, dan X mengikuti jadwal mereka sendiri, dan plugin menyatakannya dengan jelas alih-alih menjanjikan penyegaran yang tidak dapat dipenuhinya.

• Instalasi: FastOG untuk WooCommerce di WordPress.org
• Detail dan FAQ: Halaman integrasi WooCommerce

Periksa apa yang sebenarnya akan dilihat WhatsApp

Sebelum mengubah apa pun, lihat halaman seperti yang dilakukan crawler. Tempel URL produk apa pun ke Lihat Tautan Anda Seperti yang Dilihat Pembeli — alat ini mengambil halaman, membaca tag Open Graph yang ada, dan menampilkan pratinjau yang dihasilkan sebagaimana WhatsApp, X, dan Messenger merendernya, di samping sampul FastOG yang dibuat dari data produk yang sama. Tidak perlu pendaftaran.

Lebih suka memeriksa tag mentah? Gunakan Generator Tag Meta Open Graph untuk melihat markup, atau periksa referensi di og:image Tidak Muncul? Cara Memperbaikinya.

FAQ

Mengapa gambar produk saya terpotong di WhatsApp?

WhatsApp memotong gambar apa pun yang diberikan kepadanya ke bingkai 1200×630. Foto produk berbentuk persegi atau potret akan kehilangan sisi atau bagian atasnya. Menyajikan kartu yang sudah disusun pada ukuran 1200×630 — dengan foto produk yang dimuat di dalam kartu — membuat platform tidak memiliki apa pun untuk dipotong.

Bisakah saya memaksa WhatsApp untuk menyegarkan pratinjau tautan?

Tidak. WhatsApp tidak menyediakan API penyegaran atau debugger, dan pratinjau yang di-cache tersimpan di aplikasi penerima. Anda hanya dapat memastikan bahwa gambar yang benar sudah tersedia untuk pembacaan berikutnya. Facebook adalah pengecualian dan menawarkan pengikisan ulang secara terprogram.

Mengapa Facebook Sharing Debugger menampilkan gambar saya, tetapi WhatsApp tidak menampilkan apa pun?

Karena keduanya adalah cache terpisah, dan debugger melaporkan tag halaman, yang dibaca oleh kedua platform. Jika debugger menampilkan gambar yang benar tetapi WhatsApp tidak menampilkan apa pun, tag sudah benar dan Anda sedang melihat cache WhatsApp yang belum disegarkan. Jika debugger juga tidak menampilkan apa pun, tag hilang atau gambar tidak dapat diakses — periksa penyebab 1 dan 2.

Apakah WhatsApp menggunakan og:image atau twitter:image?

og:image. Atur tag Open Graph. twitter:image digunakan untuk X.

Apakah saya perlu plugin, atau bisakah saya menambahkan tag sendiri?

Anda dapat menambahkan tag og:image statis ke tema Anda sendiri — itu berfungsi, dan jauh lebih baik daripada tidak sama sekali. Yang tidak dapat dilakukannya adalah menghasilkan kartu yang berbeda untuk setiap produk tanpa membuat satu gambar secara manual untuk setiap produk, dan gambar tersebut akan menjadi usang setiap kali harga berubah. Pada titik itulah sampul dinamis layak digunakan.

Situs saya tidak menggunakan FastOG. Apakah ini tetap membantu?

Ya — kelima penyebab tersebut adalah perilaku platform, bukan perilaku FastOG. Periksa semuanya secara berurutan dengan curl, sumber halaman, dan debugger.

Terkait

• Gambar og:image Tidak Muncul? Cara Memperbaikinya
• Pembaruan Gambar WhatsApp Instan untuk WooCommerce
• Sinkronisasi Harga WooCommerce di Pratinjau WhatsApp
• Paksa Penyegaran Cache Open Graph Facebook
• Ukuran Gambar OG: 1200×630 Dijelaskan
• Cara Menyimpan Cache Gambar OG
• URL Gambar OG yang Ditandatangani
• Generator Tag Meta Open Graph