Cara Menampilkan Gambar Thumbnail Pada Preview Link Whatsapp

Koding Langka -

Cara Menampilkan Thumbnail Pada Preview Link Whatsapp

Gambar 1. Whatsapp Link preview
Pada update versi 2.12.367 WhatsApp memberi fitur baru bagi hampir 1 milyar penggunanya yaitu star message (bookmark pesan) dan preview link (pratinjau tautan), jika belum tahu lebih detail tentang fitur baru tersebut anda dapat membacanya pada tautan berikut.

Nah sekarang kita fokus membahas preview link (pratinjau tautan). Beberapa situs social media hampir semuanya sudah menggunakan teknologi pratinjau tautan yang memang sangat terasa manfaatnya bagi pengguna, yaitu dengan menampilkan judul, gambar, dan sedikit deskripsi tautan yang dibagikan. Sehingga sebelum membuka link yang dibagikan pengguna melihat pratinjaunya dulu. Contoh preview link yang diterapkan pada kolom komentar facebook, ketika saya membagikan link video youtube pratinjau berupa gambar dan judul ikut tampil :
Gambar 2. Facebook link preview

Nah pada whatsapp pun begitu juga, preview link akan ditampilkan otomatis ketika kita menulis sebuah link.
Baca juga : Cara backup chat whatsapp ke Google Drive


Nah, namun ada link website yang menampilkan thumbnail preview, ada yang tidak. Coba lihat gambar berikut ini, beberapa website ternama ternyata ada yang tidak menampilkan thumbnail :)


Pada gambar di atas dari ke empat situs yang saya coba pada hp istri saya (ups...) menunjukkan dua diantaranya menggunakan thumbnail dan dua lainnya tidak. ponselsedunia.com (ya), blogger.com (tidak), facebook.com (ya), twitter.com (tidak). Lalu bagaimana caranya? Simak langkah-langkah di bawah ini :

Cara Menampilkan Thumbnail - Update 4/3/16
  1. Anda harus memiliki akses ke edit html/template blog anda, bisa lewat file manager/editor pada template blog.
  2. Masuk ke bagian <head></head>, cari adakah tag html <meta property="og:image" content="url_gambar"> jika tidak ada tambahkan.
  3. Bagian url_gambar berwarna merah silahkan diganti dengan url gambar. Url gambar dapat berupa link dari server sendiri atau dari luar.
  4. Tambahkan tag HTML berikut <link itemprop="thumbnailUrl" href="url_gambar"> <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> <link itemprop="url" href="url_gambar"> </span>
  5. Simpan dan langsung dicoba saja. :)
Keuntungan menggunakan thumbnail preview pada link whatsapp adalah membuat sebuah link lebih menarik dan terpercaya sehingga tentu akan menarik untuk dikunjungi. Jika halaman anda dinamis, web anda menjual produk ini akan sangat bermanfaat. Hasilnya seperti ini :

Sebelum dan sesudah dipasang og:image + itemprop


Semoga artikelnya bermanfaat, jika ada pertanyaan mengenai artikel di atas jangan sungkan untuk menghubungi via :
Read More

Comments

3-comments

FOLLOW ME

LATEST

3-latest-65px

Featured Post

© . All rights reserved.

Archive

Latest video-course

1-tag:Videos-800px-video

Campus

4-tag:Campus-500px-mosaic

About

This just a demo text widget, you can use it to create an about text, for example.

Testimonials

3-tag:Testimonials-250px-testimonial

Header Background

Header Background
Header Background Image. Ideal width 1600px with.

Popular Posts

Logo

Logo
Logo Image. Ideal width 300px.

Section Background

Section Background
Background image. Ideal width 1600px with.

Section Background

Section Background
Background image. Ideal width 1600px with.

Sections-BTLabels

Ads block

Banner 728x90px

Courses

6-latest-350px-course

Section Background

Section Background

Search This Blog

Widget HTML Atas

SECCIONS

Widget HTML Produk

Widget HTML Jasa

Advertisement

Main Ad

Categories

10 permasalahan 59 62 63 64 79 Tahun 2014 administrator adobeprimer aktivasi windows 10 android studio aplikasi aplikasi idm aplikasi klinik aplikasi raport K13 ar augmented reality aulogisbootspeed banner basic belajar Belajar Logika Informatika Bingkai PSHT Bingkai bingkai Sertifikat blender blog penjualan blogger jualan bobol wifi C++ Canon IP2770 cara bobol wifi cara buat blog cara buatweb cara install cms cara install wordpress cara membuat blog penjualan cara mengguanakan vpn cek pc cek produk key pc cek serial number pc CI ci4 class cms cms wordpress codeigniter contoh mehtod crack crud CI4 dapodik dapodik terjadi kesalahan dasar data daun sirih desaign desain medali desain sertifkat devc dowload software download download vpn erorr 500 file firewall formulir formulir penilaian p[ertandingan pencak silat formulir pertandingan free freebish function gratis hack wifi hacker wifi hacking handler herbal hms hms kit http 500 huwawei idm idm terbaru instalasi install worpress internet download manager ioncubeloader ip address jam jaringan javascript json kesahatan kodeigniter kodinglangka komputer komputer lemot kotlin Kumpuran Permendikbud No. 61 logo make address manampilkan gambar di wa manfaat daun sirih mars psht marspsht masalah pc medali membuat blog jualan membuat web membuat website mencegah seraangan hacjer mengatasi dapodik bermasalah mengatasi masalah ci mengatasi masalah pc menggunakan vpn menghitung selisih waktu mikrotik motivasi mysql mysql tidak runnig di xampp Native network networking node nodejs obat herbal obyek oop pekerjaan peluang pencak silat pendidikan pengertian cms penjualan pergaulan Permasalahan Komputer pertandingan pesilat.png Photoshop php php native php oop piagam png print printer Printer IP2770 property psht PSHT Cup Bandar Lampung psht jaya raport K13 raport SD K13 Rekam medis rekammedis selisih jam php seo sertifikat sertifikat psht sh cup sharing sharing printer sharingdata sharingfile sirih hijau sirih merah software software bandicam software terbaru software vidio sofware idm source code source code raport K13 sourcecode SQL system telnet turbo vpn tutorial tutorial dasar web tutorial oop tutorial php tutorial sql tutorial web tutorialjaringan ukuran idcard unity update bagan video vpn vuvoria web web dasar web simple website widows10 wifi hack wifi telnet windows windows defender windows8 wordpress worpress xampp

SEARCH

FOLLOW US

Popular

SEARCH