Selasa, Desember 04, 2018

Meta Tag Menampilkan Gambar Thumbnail di WhatsApp Saat Share Postingan

Disini saya akan membahas cara mudah menampilkan gambar thumbnail di WhatsApp saat share postingan.

WhatsApp merupakan anak perusahaan facebook setelah resmi diakuisis dengan nilai 223 Triliun. Dengan pengguna yang terus tumbuh yang saat ini mencapai 1,5 lebih dan bisa jadi terus bertambah sampai akhir 2018 ini.

WhastApp sebagai aplikasi messenger dia mampu mengalahkan semua aplikasi sejenisnya, dan telah mampu membantu banyak orang.

Tidak terkecuali para blogger. Sebagai blogger tentu tulisan yang kita tulis ingin dibaca banyak orang.

Nah biasanya untuk meningkatkan pengunjug di blog atau website kita dapat melakukan beberapa optimasi diantaranya membuat hasil share postingan ke WhatsApp menampilkan gambar thumbnail seperti gambar dibawah ini.


Dan dibawah ini share posting tanpa thumbnail gambar.


Mana yang enak dilihat dan mengundang klik, pasti jawabanya sobat tentu gambar yang pertama bukan.

Seperti yang telah kita bahas diatas, karna WhatsApp ini adalah anak perusahaan Facebook, maka sobat cukup menggunakan meta tag open graph Facebook saja ya. Selama sobat meletakan kode dibawah ini dengan benar saya pastikan hasilkan akan sesuai.

1. Buka dashboard Blogger
2. Masuk kemenu Tempate > Edit HTML
3. Copy dan pastekan kode dibawah ini diatas </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://4.bp.blogspot.com/-CxGFWGtjEHQ/XAY-tiEhRcI/AAAAAAAAGzY/LU7Wze9JewoRU07g6x7ZtbodQ0eElil0wCKgBGAs/s1600/mtkdeveloper.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/xxxxxxxxxxxxxxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxxxxxxxxxxxxxx' property='article:publisher'/>
<meta content='xxxxxxxxxxxxxxxx' 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'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='twittersobat' name='twitter:site'/>
<meta content='twittersobat' name='twitter:creator'/>


Selanjutnya:

4. "https://3.bp.blogspot.com/-clHnqr8cFf8/XAY014QwowI/AAAAAAAAGzM/6PGIXgiEuasgHpG3_J9-flRxENuKnKm3gCKgBGAs/s1600/mtkdeveloper.png". Ganti url berikut dengan url icon blog sobat.
5. "xxxxxxxxxxxxxxxx". Ganti dengan ID Facebook sobat.

Sekian tutorial cara membuat meta tag yang menampilkan gambar thumbnail di WhatsApp Ssat share postingan. Semoga bermanfaat buat sobat semua.

Source

Artikel Terkait


EmoticonEmoticon