Cara Menampilkan Thumbnail Pada Preview Link Whatsapp

13
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. Disarankan ukuran gambar berbentuk square atau persegi dan ukuran gambar thumbnail maksimum kisaran 150kb
  6. 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 :
1. Email : m3.97265003@gmail.com
2. Twitter : @eksplore
3. Facebook : Ahmad Alimuddin
4. Instagram : Ahmad Alimuddin
4. Komentar di bawah ini :)
Tags:
Ahmad Alimuddin

Pegiat IT, pencinta startup. Pemrograman, Jaringan, Edukasi IT, makananku sehari-hari. Saat ini fokus kepada Pengembangan produk, product Management dan User Experience Research. Bapak dari 4 orang anak dari 1 istri :)

13 Komentar

  1. Antonio Velázquez16 Juni 2016 pukul 16.58

    Hi, I tried this HTML code in blogger body (blogspot) but didn't let me use it. The problem is:

    Attribute name "itemscope" associated with an element type "span" must be followed by the ' = ' character.

    Do you know how to fix it?

    BalasHapus
  2. Ahmad Alimuddin25 Mei 2018 pukul 06.42

    give itemscope attribute blank value, like this itemscope=''

    BalasHapus
  3. ahmad3 Januari 2019 pukul 07.05

    kalo untuk wordpress gak work cara seperti itu. tapi kita bisa dengan mengubah atau me resize ukuran gambar yang dijadikan feature image ke ukuran yg lebih kecil contoh(320x240) dan seterusnya..

    BalasHapus
  4. MediaManfaat15 Februari 2019 pukul 02.14

    Sangat bermanfaat gan, terimakasih.
    Salam...
    Tips Trik Android

    BalasHapus
  5. Priyatama1 Juli 2019 pukul 17.20

    Tinggal di bangka berape bang?

    BalasHapus
  6. Bisnis Online18 Januari 2020 pukul 11.50

    Url_gambar ya gak bisa sebab setiap post di WP featured image url nya beda2 tak iya?

    BalasHapus
    Balasan
    1. Ahmad Alimuddin22 Agustus 2021 pukul 07.56

      Tentu url gambar setiap post di blog kita berbeda, untuk itu kita bisa membuatnya menjadi dinamis.

      untuk wordpress lebih mudah seharusnya karena setiap url gambar di setiap post tersimpan dalam database. wordpress sendiri sudah menyediakan fungsinya.

      get_the_post_thumbnail_url( int|WP_Post $post = null, string|int[] $size = 'post-thumbnail' ) -> https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/

      Hapus
  7. Heryadi25 Agustus 2020 pukul 12.26

    Untuk di wordpress bisa gunakan plugin opengraph metabox
    bisa dikasi gambar thumbnail di setiap posting .. kalo kosong akan tampil thumbnail default webnya

    BalasHapus
  8. Shareef926 Mei 2021 pukul 00.06

    Klo yang keluar malah logo website gmn ya gan? sy pengguna wordpress

    BalasHapus
    Balasan
    1. Ahmad Alimuddin2 Juni 2022 pukul 19.22

      memang kita harus memberikan gambar yang spesifik di setiap pos kita, kalau gak ada gambar spesifik maja thumbnailnya akan muncul logo biasanya.

      bisa dishare webnya nnti saya bantu lihat

      Hapus
  9. Bromin6 Mei 2023 pukul 18.20

    Tag html naruhnya dimana?

    BalasHapus
Lebih baru Lebih lama