Menampilkan Gambar Thumbnail Blog di WhatsApp Saat Membagikan Link

Bagaimana cara memunculkan gambar artikel blog di preview link WA. Solusi ketika thumbnail tidak muncul saat share link di WhatsApp.
Memunculkan Gambar Blog di WhatsApp Ketika Membagikan URL

Saat ini WhatsApp menjadi aplikasi perpesanan (messaging) terpopuler di dunia. Banyak sekali info yang dibagikan melalui anak perusahaan Facebook tersebut. Tidak terkecuali untuk urusan blog sekalipun bisa dipromosikan di sana. Karena penggunanya yang sangat banyak, WhatsApp menjadi ladang empuk untuk menyebar link agar blog bisa mandapatkan tambahan pengunjung.

Ada satu hal penting yang harus diperhatikan ketika mengirim link blog di WhatsApp, yaitu tampilan dari rich link previewnya harus bagus. Rich link preview adalah tampilan pratinjau dari isi blog, seperti judul, gambar, dan deskripsi.

Masalah yang sering terjadi yaitu gambar thumbnail tidak keluar sehingga tampilan preview kurang cantik. Umumnya pengunjung akan lebih tertarik pada hal yang berbau visual. Maka keberadaan gambar sedikit banyak akan membantu memunculkan rasa penasaran.

Coba bandingkan kedua gambar ini. Mana yang menurut kamu lebih menarik dan mengundang klik?

Menampilkan Gambar Blog Pada Link WhatsApp
Menampilkan Gambar Blog Pada Link WhatsApp

Tentu saja yang ada gambarnya, kan! Kalau blog kamu memiliki masalah dengan gambar yang tidak muncul, maka tutorial menampilkan gambar thumbnail pada preview link WhatsApp berikut akan sangat membantu.

Cara Agar Gambar Blog Muncul di Preview Link WhatsApp

Karena WhatsApp sudah menjadi anak perusahaan Facebook, maka kamu cukup menggunakan meta tag open graph Facebook saja. Selama pemasangannya benar, maka hasilnya akan sesuai.

  1. Buka dashboard Blogger.
  2. Masuk ke menu Template » Edit HTML.
  3. Masukkan kode berikut DI ATAS </head>

<!-- Facebook and WhatsApp Meta Tag Open Graph by igniel.com -->
<b:if cond='data:view.isHomepage'>
<b:if cond='data:view.isPost'>
<b:if cond='data:view.isPage'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta content='blog' property='og:type'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPML970cQVCOw28_IFpFF-uoIpIg9h6S19VyE6VY-0IFWL3ly5hg_EpjvJ5Fwcdr5Ze9beDdrRsQIBCUUaaggFi7bOSlXKPVKbDvWh7Bhu8jqg_KhEkQP6SnTzB2vzE5_bF5L9ODCb5HtA/s1600/ignielcom.png' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/106660612706164' property='article:author'/>
<meta content='https://www.facebook.com/106660612706164' property='article:publisher'/>
<meta content='106660612706164' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

Kodenya kok banyak? Iya, karena sekaligus untuk tampilan preview ketika membagikan link di Facebook juga. Lakukan beberapa pengaturan berikut:

  1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPML970cQVCOw28_IFpFF-uoIpIg9h6S19VyE6VY-0IFWL3ly5hg_EpjvJ5Fwcdr5Ze9beDdrRsQIBCUUaaggFi7bOSlXKPVKbDvWh7Bhu8jqg_KhEkQP6SnTzB2vzE5_bF5L9ODCb5HtA/s1600/ignielcom.png: ganti dengan URL gambar dari ikon atau banner blog. Gambar ini akan muncul ketika membagikan link homepage. Sedangkan jika membagikan link artikel maka thumbnail yang muncul adalah gambar dalam isi artikel tersebut.
  2. 106660612706164: ID akun Facebook atau Fanspage

Simpan template dan lakukan test dengan membagikan link di WhatsApp. Cek apakah gambar thumbnailnya sudah muncul atau belum.

Mengatasi Gambar Blog Tidak Muncul di WhatsApp

Jika gambar belum muncul, ini karena perlu waktu untuk membaca ulang struktur blog setelah ditambahkan meta tag baru. Kalau tidak sabar dan mau proses scrape menjadi cepat juga bisa kok dengan melakukan langkah ini.

  1. Buka Facebook Sharing Debugger di alamat berikut:
    https://developers.facebook.com/tools/debug/sharing
  2. Masukkan link blog atau artikel.
  3. Klik tombol Debug.
  4. Klik tombol Scrape Again (Kurangi Lagi) beberapa kali sampai gambar thumbnail keluar.
Mengatasi Thumbnail Blog Tidak Muncul di Preview Link WhatsApp
Mengatasi Thumbnail Blog Tidak Muncul di Preview Link WhatsApp

Selesai sudah solusi mengatasi gambar thumbnail tidak muncul di preview link WhatsApp. Jangan terlalu berlebihan dalam menyebar link, nanti diblokir sama Facebook lho!

31
Menampilkan Gambar Thumbnail Blog di WhatsApp Saat Membagikan Link
Menampilkan Gambar Thumbnail Blog di WhatsApp Saat Membagikan Link
Bagaimana cara memunculkan gambar artikel blog di preview link WA. Solusi ketika thumbnail tidak muncul saat share link di WhatsApp.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

31 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Yusril Resmahadi
    19 Juni, 2024
    Profil: https://www.blogger.com/profile/17249360869805730654
    Mba Igniel ijin tanya cara agar gambar thumbnail (homepage) blog nggak ke ganti" sama gambar postingan gimana ya?
    Soalnya pas share link homepage blog ke WA, malah ke ganti" terus sama gambar postingan. Terima kasih
  • amri
    27 Oktober, 2023
    Profil: https://www.blogger.com/profile/08752804816043127584
    agar tampilan thumbnail bisa full page gimana ya kak? kalau di contoh itu kan sekitar 1/3 dari ukuran page,..
  • Azari
    09 April, 2023
    Profil: https://www.blogger.com/profile/16040443867958110317
    sudah saya terapkan di blog dan sukses,tapi cuma tampil saat di share di fb saja,di wa gak tampil
  • Pak Indra Abes
    10 Maret, 2023
    Profil: https://www.blogger.com/profile/04874573121196177012
    Izin kak.. Bagaimana cara menampilkan logo/ thumnail blog kita ke WA. Saat kita bagikan link domain (bukan link postingan).. ????
  • Uda richard
    31 Agustus, 2022
    Profil: https://www.blogger.com/profile/14635058004865502157
    Maaf keluar dari topik, kalo buat kolom komentar macam mba igniel ini gimana ya?
  • Unknown
    01 Desember, 2021
    Profil: https://www.blogger.com/profile/16172359870318396401
    kalau di laravel gmn ya?
  • Arry Kurniawan
    11 Oktober, 2021
    Profil: https://www.blogger.com/profile/15945040841028936344
    apa bisa dipakai untuk wordpress..
    • Igniel
      12 Oktober, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tidak bisa karena sebagian kodenya pakai tag khusus Blogger.
  • Djefi Febian
    27 Juni, 2021
    Profil: https://www.blogger.com/profile/01677557629330387247
    Kereeen mba Igniel. Makasih banyak. hampir semua widget blog saya pakai tutorial mba Igniel.
  • Muslim Azizi
    11 April, 2021
    Profil: https://www.blogger.com/profile/17041991317443953619
    kalo Wordpress gimana bang?
  • Syaipullah.HS
    04 Maret, 2021
    Profil: https://www.blogger.com/profile/18024606962931193839
    Harus dicoba ini.. 👍🙏
  • Anonim
    Anonim28 Februari, 2021
    Mbak , sori di luar Topik ..
    Minta Script cara agar "Gambar" tidak bisa di klik & text ga bisa di select ..

    kaya blog mbak igniel
    • Igniel
      03 Maret, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Agar teks tidak bisa diseleksi:
      https://www.igniel.com/2017/12/buat-tulisan-tidak-bisa-seleksi.html
  • 💕Admin💕
    16 Februari, 2021
    Profil: https://www.blogger.com/profile/13398367059540230324
    Kak igniel ada cara gak, semisal tulisan blog bhs indonesia terus di buka orang jerman misalnya dan tulisan blog jadi bahasa jerman?
    apa cuma harus pakai widget translate?
    pernah liat tutornya di youtube tapi kok kurang jelas kak.

    dan Youtubenya dikembangin dong kak,hehehehe.
    terimakasih kak
    suka banget dg isi blog dan konten youtubenya kak igniel
    sukses selalu ya
    • Anonim
      Anonim28 Februari, 2021
      Iya kaya gini ya ,
      www yasir252 dot kom

      saya juga nyari kaya gini , blm ketemu2
    • Igniel
      03 Maret, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Setau saya memang cuma bisa pakai Google Translate saja.

      Iya mudah-mudahan Youtubenya jalan lagi. Ini juga ada rencana tapi masih males memulai hahaha. Doakan saja.
    • Karlina
      05 Mei, 2021
      Profil: https://www.blogger.com/profile/09112368890672057648
      Sudahi mendakinya kakkkkk, ajari kami lagi :)
  • Rifqi Fauzan Sholeh
    28 Oktober, 2020
    Profil: https://www.blogger.com/profile/14768735361681441978
    setiap artikel yang mau dishare kan beda-beda fotonya.. kalo misalkan link foto tersebut diganti, tampilan gambar link yang sebelumnya ikut berubah kah?
    • Igniel
      03 Februari, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Yang diambil sebagai thumbnail di WA adalah foto paling pertama dalam artikel. Kalau foto pertama diubah, lama-lama hasil preview di WA dan Facebook juga akan berubah.

      Kecuali kalau yang diubah foto kedua atau seterusnya, gambar di WA tidak akan ganti.
    • Rifqi Fauzan Sholeh
      06 Februari, 2021
      Profil: https://www.blogger.com/profile/14768735361681441978
      ok teh siap
  • Eka Awaludin
    29 Mei, 2020
    Profil: https://www.blogger.com/profile/03027218065021816904
    Ko thumbnail nya thumbnail postingan ya, padahal yang di share halaman homepage.
  • @Redaksi
    25 Maret, 2020
    Profil: https://www.blogger.com/profile/08195136092435113814
    sudah ku coba mi tapi poto masih nga muncul
  • JEJAK SANTRI
    03 Desember, 2019
    Profil: https://www.blogger.com/profile/09914907632302512615
    kalo gak kada /head apa bisa di taruh di atas /body ?
    • JEJAK SANTRI
      03 Desember, 2019
      Profil: https://www.blogger.com/profile/09914907632302512615
      karena saya coba di atas /body pas di share di fb tampil tapi di wa gak? ada solusi gak?
    • Igniel
      11 Januari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Semua template pasti ada head-nya. Cari lagi.
    • SmartIdea
      29 September, 2020
      Profil: https://www.blogger.com/profile/01103546667682956531
      di FB berhasil, tapi di WA tidak muncul kak? bgaimana solusinya? trimakasih
  • Mitra Jatim
    26 November, 2019
    Profil: https://www.blogger.com/profile/06350708205569374317
    sangat bermanfaat yang tadinya saya share tidak ada gambar, sekarang lebih cantik, terimakasih banyak atas masukan dan sarannya, ijin copas.
  • Anonim
    Anonim26 September, 2019
    Kalau cara mengatasi share whattsapp pada halaman statis yang tidak muncul thumbnailnya meskipun di halaman tersebut ada gambarnya. mohon penjelasannya
  • Admin
    10 Januari, 2019
    Profil: https://www.blogger.com/profile/14481153867761500014
    Mantap mbak tutorialnya, langsung praktek 😊👌
  • Sarofudin
    05 Desember, 2018
    Profil: https://www.blogger.com/profile/10427214401948693996
    Mantap, default blogger terbaru sudah terinegrasikah dengan ini?
    • Igniel
      05 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tema default Blogger belum ada meta open graphnya. Harus pasang sendiri.