Cara Menampilkan thumbnail preview saat share link di Whatsapp - Pernah mengalamai kendala yang cukup bikin puyeng terkait saat share link blog atau website ke aplikasi Whatsapp tapi preview thumbnailnya gak tampil?
Sejak whatsapp melakukan update baru-baru ini, beberapa blog saya ketika di sharing oleh siswa atau kawan-kawan melalui Whatsapp hanya bisa menampilkan link tanpa preview (gambar kecil / thumbnail). Ada sebagian yang japri menanyakan kendala ini, tapi saya menjawab "biasanya nanti tampil kok kak!" atau "tunggu sebentar nanti tampil sendiri..."
Sebenarnya gak ada kendala yang berarti sih, karena link website masih berfungsi normal, share via facebook, twitter, telegram atau pinterest juga masih normal-normal saja. Cuma di Whatsapp doang yang belakangan ini gak mau menampilkan thumbnail preview saat share link. Kerasa kurang aestetik aja...
Beberapa kali baca tutorial, tapi gak ada yang berhasil mengatasi masalah menampilkan thumbnail preview blog di Whatsapp. Lalu gimana solusinya supaya thumbnail preview blog dapat tampil saat di share di Whatsapp?
Cara menampilkan gambar thumbnail preview link blog atau website di Whatsapp
1. Update script template blogger bagian Open Graph
Jika anda menggunakan blogger.com sebagai platform blogging, dan menggunakan custom template dari https://www.jettheme.com/, silahkan disamakan script berikut ini
- Klik menu theme
- Klik tombol dropdown customize
- Klik edit HTML
- Terus perhatikan script terutama bagian open graph
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --------------------------- | |
| # JetTheme v2.9 Setting # | |
| --------------------------- | |
| ============================================================================== | |
| Settingan ini udah aman belum? Untuk template selain jettheme, bisa diabaikan | |
| ============================================================================== | |
| <Variable name="tagline" description="Tagline" type="string" value="Bloggku keren banget"/> | |
| [!] Homepage tagline, ex: BlogName - Tagline | |
| <Variable name="separator" description="Separator" type="string" value=" - "/> | |
| [!] Title separator ( – ), ( | ), ( • ) | |
| <Variable name="description" description="Description" type="string" | |
| value="Blog keren buat kamu kawula muda keren. Berisi tutorial cara memasak air | |
| sampai mateng hingga cara cukur kumis biar klimis"/> | |
| [!] Default meta description, recommended 155–160 characters | |
| <Variable name="cover" description="Cover" type="string" | |
| value="https://1.bp.blogspot.com/-KgAB2GjdyBI/YUFP1jEla1I/AAAAAAAATL4/-Y9UXRNytUYQKLT6gCzAIPX5BdKhvFZswCLcBGAsYHQ/ | |
| s848/gambarkukeren.png"/> | |
| [!] Default meta image, size recommended 1600x700 px | |
| <Variable name="logo" description="Logo" type="string" | |
| value="https://1.bp.blogspot.com/-Hu4dqQxajEY/YUE-O7_Jn0I/AAAAAAAATLw/uihmMFBm56oqLc_O9ncn08MdB2HM9em9wCLcBGAsYHQ/ | |
| w175-h40/LOGODARK.png"/> | |
| [!] Schema logo, size recommended 175x55 px | |
| <Variable name="favicon" description="Favicon" type="string" | |
| value="https://1.bp.blogspot.com/-KgAB2GjdyBI/YUFP1jEla1I/AAAAAAAATL4/-Y9UXRNytUYQKLT6gCzAIPX5BdKhvFZswCLcBGAsYHQ/ | |
| s200/rudysetiawan.png"/> | |
| [!] Favicon high resolution, required format (.png), min size 200x200 px | |
| ======================================================================= | |
| Langsung saja cari di template dengan cara CTRL+F keyword "open graph" | |
| ======================================================================= | |
| <title><data:meta_title/></title> | |
| <meta expr:content='data:meta_title' name='title'/> | |
| <meta expr:content='data:meta_title' property='og:title'/> | |
| <meta expr:content='data:meta_title' name='twitter:title'/> | |
| </b:with> | |
| =========================================== | |
| FOKUS ke BAGIAN IMAGE ini ya guyss... | |
| =========================================== | |
| <!-- Image Open graph--> | |
| <b:with value='data:view.featuredImage ?: data:skin.vars.cover' var='meta_image'> | |
| <meta expr:content='data:meta_image' property='og:image'/> | |
| <!--ini ukuran image biar thumbnailnya gede--> | |
| <meta content='1280' property='og:image:width'/> | |
| <meta content='720' property='og:image:height'/> | |
| <meta expr:content='data:meta_image' name='twitter:image'/> | |
| </b:with> | |
| <!-- Description --> | |
| <b:with value='data:view.description ?: data:skin.vars.description' var='meta_desc'> | |
| <meta expr:content='data:meta_desc' name='description'/> | |
| <meta expr:content='data:meta_desc' property='og:description'/> | |
| <meta expr:content='data:meta_desc' name='twitter:description'/> | |
| </b:with> | |
| <!-- Open Graph / Facebook --> | |
| <meta content='xxxxxxxxxxx kalau ada waktu bikin dulu di developer fb, kalau gak ada ya kosongin' property='fb:app_id'/> | |
| <meta content='https://www.facebook.com/groups/halamanfanspagelu' property='article:author'/> | |
| <meta content='https://www.facebook.com/namaprofillu' property='fb:admins'/> | |
| <meta content='website' property='og:type'/> | |
| <meta expr:content='data:blog.locale' property='og:locale'/> | |
| <meta expr:content='data:blog.title' property='og:site_name'/> | |
| <meta expr:content='data:view.url.canonical' property='og:url'/> | |
| <meta expr:content='data:view.title' property='og:image:alt'/> | |
| <!-- Twitter Open graph--> | |
| <meta content='namabloglu.com' name='twitter:site'/> | |
| <meta content='https://twitter.com/namaprofilelu' name='twitter:creator'/> | |
| <meta content='summary_large_image' name='twitter:card'/> | |
| <meta expr:content='data:view.url.canonical' name='twitter:url'/> | |
| <meta expr:content='data:view.title' name='twitter:image:alt'/> | |
| =================================================================================== | |
| Kalau sudah mirip, save aja templatenya. Terus kita focus ke solusi berikutnya ya... | |
| lanjut... | |
| =================================================================================== |
<!-- Image Open graph-->
<b:with value='data:view.featuredImage ?: data:skin.vars.cover' var='meta_image'>
<meta expr:content='data:meta_image' property='og:image'/>
<!--ini ukuran image biar thumbnailnya gede-->
<meta content='1280' property='og:image:width'/>
<meta content='720' property='og:image:height'/>
<meta expr:content='data:meta_image' name='twitter:image'/>
</b:with>
2. Download Whatsapp Android
Update Whatsapp, tapi jangan dari playstore. Caranya:
- Buka di browser lalu googling dengan keyword "android whatsapp", atau link ini https://www.whatsapp.com/android/
- Klik pada hasil pencarian Android - Whatsapp
- Klik tombol Unduh sekarang
- Setelah selesai, install Whatsapp Android dari APK hasil download tadi. Buka Whatsapp anda, lalu coba share link ke Group atau kontak, apakah sudah berhasil?
3. Download Whatsapp Windows
Jika anda menggunakan Whatsapp di komputer / Laptop, biasa berinteraksi dengan whatsapp web, sekarang coba download Whatsapp Windows.
- Buka di browser di PC lalu klik https://www.whatsapp.com/download
- Download Whatsapp Untuk Windows
- Setelah berhasil di Unduh, Install Whatsapp untuk Windows seperti aplikasi biasa
4. Share Link di Whatsapp. apakah sudah tampil thumbnail previewnya?
- Setelah terinstall, coba buka Whatsapp Windows dengan cara klik kanan Run As Administrator.
- Tautkan device anda ke Whatsapp Windows seperti saat memakai web.whatsapp
- Lalu coba share link apakah sekarang thumbnail preview sudah muncul di Whatsapp?
Solusi ini hanya berlaku untuk anda yang memiliki blog dan aktif melakukan share link di group WA. Sedangkan bagi orang lain atau pembaca setia yang ingin share link juga, tapi belum mengupdate Whatsapp seperti cara diatas, maka solusi ini belum tentu berhasil (kecuali mereka peduli dan bertanya kepada siempunya blog kenapa thumbnail preview tidak bekerja)
Semoga bermanfaat...
No comments:
Post a Comment