🧠 Cara Menampilkan Gambar (Thumbnail) Saat Artikel WordPress Dibagikan ke WhatsApp dan Media Sosial

byAdmin Redaksi Published:

Pernah membagikan link artikel ke WhatsApp atau media sosial tapi gambarnya tidak muncul? 🤔
Padahal di dalam artikel sudah ada gambar yang jelas, namun saat dibagikan hanya tampil judul dan link saja.

Masalah ini sering terjadi di WordPress, terutama jika kita menggunakan gambar dengan URL eksternal (seperti dari Cloudflare R2, Imgur, atau CDN lainnya).
Pada artikel ini kita akan membahas penyebab dan solusi lengkapnya, termasuk kode yang bisa kamu pasang langsung di functions.php agar gambar muncul di WhatsApp, Facebook, Telegram, dan platform lainnya.

🧩 Penyebab Thumbnail Tidak Muncul Saat Dibagikan

Ada beberapa penyebab umum:

1.      Meta tag Open Graph (OG) tidak tersedia di <head> halaman.
Ini adalah tag HTML yang dibaca oleh WhatsApp dan Facebook untuk menentukan gambar preview.

2.      URL artikel salah atau 404 Not Found — bot WhatsApp tidak bisa mengambil datanya.

3.      Gambar disimpan di CDN atau server eksternal (misalnya Cloudflare R2) tanpa izin publik.

4.      Plugin cache atau minify HTML kadang menghapus tag meta tertentu tanpa sengaja.

 

✅ Solusi Lengkap: Menambahkan Open Graph Meta Tag di WordPress

Kita akan menambahkan kode khusus ke functions.php agar setiap artikel memiliki tag OG secara otomatis.

📋 Langkah-langkah:

  1. Buka file:

    /wp-content/themes/namatema/functions.php

  2. Tambahkan kode berikut di bagian paling bawah:

    // ===============================
// Open Graph Tag untuk WhatsApp & Sosial Media
// ===============================
function wpnews_add_open_graph_tags() {
    if (is_single()) {
        global $post;

        // Ambil featured image (jika ada)
        if (has_post_thumbnail($post->ID)) {
            $thumbnail = get_the_post_thumbnail_url($post->ID, 'full');
        } else {
            // Ambil gambar pertama dari konten
            $content = $post->post_content;
            preg_match('/<img[^>]+src="([^">]+)"/', $content, $matches);
            $thumbnail = $matches[1] ?? 'https://cdns.wartanetwork.com/default.jpg'; // fallback
        }

        echo "\n<!-- Open Graph Meta Tags -->\n";
        echo '<meta property="og:title" content="' . esc_attr(get_the_title($post->ID)) . '">' . "\n";
        echo '<meta property="og:description" content="' . esc_attr(wp_strip_all_tags(get_the_excerpt($post->ID))) . '">' . "\n";
        echo '<meta property="og:image" content="' . esc_url($thumbnail) . '">' . "\n";
        echo '<meta property="og:image:type" content="image/jpeg">' . "\n";
        echo '<meta property="og:image:width" content="1200">' . "\n";
        echo '<meta property="og:image:height" content="630">' . "\n";
        echo '<meta property="og:url" content="' . esc_url(get_permalink($post->ID)) . '">' . "\n";
        echo '<meta property="og:type" content="article">' . "\n";
        echo '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '">' . "\n";
    }
}
add_action('wp_head', 'wpnews_add_open_graph_tags', 5);

  3. Simpan file dan clear cache website (jika pakai plugin caching seperti LiteSpeed atau WP Rocket).

🔍 Cara Menguji Hasilnya

Untuk memastikan tag OG sudah aktif dan terbaca:

Jika muncul gambar dan deskripsi artikel, berarti sukses! 🎉

Kamu juga bisa mengetes dengan membagikan link ke WhatsApp atau Telegram — seharusnya sekarang thumbnail artikel tampil otomatis.

⚡ Tips Tambahan

  • Pastikan gambar kamu di Cloudflare R2 bisa diakses publik (status public-read).

  • Gunakan ukuran minimal 1200×630 piksel agar tidak terpotong di WhatsApp/Facebook.

  • Jika kamu menggunakan plugin SEO seperti Yoast SEO atau Rank Math, fitur OG biasanya sudah otomatis aktif — jadi cukup pastikan gambar unggulan sudah terpasang.

💡 Kesimpulan

Menampilkan gambar thumbnail saat membagikan artikel WordPress sangat penting untuk menarik perhatian pembaca dan meningkatkan klik di media sosial.
Dengan menambahkan kode Open Graph di atas, kamu bisa memastikan setiap artikel memiliki tampilan yang profesional saat dibagikan ke WhatsApp, Facebook, Telegram, X (Twitter), dan lainnya.

📌 Penulis: Tim Kreator Warta Network
📅 Diperbarui: Oktober 2025
🔗 Referensi: Dokumentasi WordPress & Open Graph Protocol

Apakah kamu ingin saya bantu ubah artikel ini jadi versi HTML siap upload ke WordPress (dengan heading, paragraf, dan code block rapi)?
Bisa langsung kamu tempel di Gutenberg atau editor HTML WordPress.

You might like

View all
Previous Post Next Post
Share to other apps
Copy Post Link