Gambar Thumbnail Post Tidak Muncul Di Blog, Inilah Cara Mengatasinya

Beberapa hari ini banyak yang dihebohkan dengan satu permasalahan yang sama. Yaitu soal gambar thumbnail post yang biasa muncul di beranda blog, sekarang malah tidak muncul untuk setiap postingan yang baru diterbitkan. Saya baru sadar kalau ternyata masalah ini juga dirasakan oleh – lain, karna kemarin saya ada lihat postingan di salah satu group facebook.

Sejak kapan mulainya saya gak tahu pasti. Yang jelas postingan saya yang terbit pada tanggal 11 November 2014 kemarin, sudah gak kelihatan lagi thumbnail-nya. Besoknya saya coba posting artikel baru ternyata memang benar, lagi-lagi thumbnail post di beranda gak muncul. Wah, saya rasa pun jelek juga kan kalau dibiarin gini aja. 😀

Daan.. diagnosis pertama yang muncul di benak Sahabat pasti adalah..

Iyaa kaan??

Soalnya saya kemarin juga sempat mikir gitu. hehehe.. ^_^
Akhirnya kita pun mulai nyoba-nyoba ganti template yang lain. Siapa tahu ada yang salah dengan template blog yang sekarang kita gunakan. Dan saya pun nyoba pakek template bawaan di salah satu blog dummy saya. Hasilnya? Sama aja. Gambar thumbnail postingan yang terbaru gak muncul.

Apa Penyebab Gambar Thumbnail Post Blogger Tidak Muncul?

Hari ini tanggal 13 November 2014, saya baru nemu jawabannya. Kalau mau, coba aja Sahabat lihat dulu halaman beranda blog saya ini. Pasti sekarang thumbnail post-nya udah ada. 😀

Dari berbagai macam test yang barusan saya lakukan, akhirnya sampai saat ini saya baru ketemu dua macam penyebab utama kenapa gambar thumbnail post  bisa sampai hilang dari beranda. Alasannya adalah :

• Alamat gambar secara default sudah menggunakan HTTPS
• Struktur data sitemap tidak menggunakan media:thumbnail

Jadi, masalah utamanya adalah dikarenakan saat ini Google lebih suka dengan penggunaan HTTPS pada alamat URL situs-situsnya. Sebelumnya gambar-gambar yang kita upload lewat postingan di blog alamat gambarnya masih menggunakan HTTP biasa. Tapi sekarang sudah tidak lagi. Tampaknya Google sekarang ini memang sedang lagi serius pengen meningkatkan kenyamanan tiap pengunjung di dunia maya. 🙂

Seperti yang dibahas pada salah satu artikel berjudul HTTPS as a Rangking Signal oleh situs Google Webmaster Central. Jadi iyaa kalau bisa pun kita sebagai pemilik blog, nantinya juga harus ngikuti aturan main ini. Setidaknya Sahabat harus terima kalau HTTP itu gak lebih baik dari layanan HTTPS. Iyaa jelas lah. Untuk dapatinnya aja kita harus bayar sertifikat dulu. 😀

Jadi, dikarenakan penyebab pertama inilah maka muncul penyebab kedua yang saya sebutkan diatas tadi. Untuk melihatnya coba Sahabat buka halaman sitemap blog sahabat masing-masing. Secara default umumnya sitemap bawaan adalah dengan alamat seperti ini :

http://www.chaidir.web.id/feeds/posts/default?orderby=UPDATED

Dari situ bisa dilihat di dua postingan saya yang gak muncul thumbnail-nya ternyata memang dari bagian entry postingan tersebut gak ada kelihatan tag media:thumbnail. Entah gimana ceritanya mungkin sistem belum ngebaca gambar di postingan yang berawalan HTTPS tadi sebagai thumbnail. Padahal kalau kita share artikel ke media sosial, gambar yang ada di dalam postingan itu tetap bisa kebaca kok sebagai thumbnail. 😀

Cara Mengatasi Gambar Thumbnail Hilang Dari Beranda

Dari sedikit analisis diatas, maka sekarang kita sudah bisa coba cari penyelesaiannya gimana. Supaya gambar thumbnail post di blog kita bisa muncul seperti normal kembali. Biar tulisan-tulisan kita tetap kelihatan keren dan menarik untuk dilihat oleh pengunjung. 😀

Ada dua solusi yang bisa Sahabat gunakan. Kan penyebabnya ada dua tadi, jadi iyaa obatnya pun bisa dua juga. Tergantung Sahabat mau pilih cara yang mana. Atau mungkin besok-besok sudah ada lagi obat yang lebih mujarab. Untuk saat ini berikut cara mengatasinya :

1. Mengubah alamat gambar kembali menjadi HTTP
2. Gunakan fungsi firstImageUrl sebagai pengganti thumbnailUrl

Untuk cara yang pertama, saya pikir agak merepotkan. Karna alamat gambar sekarang sudah secara otomatis menggunakan HTTPS, jadi setiap kali kita ingin membuat postingan terbaru kita juga harus mengubah alamat gambarnya. Caranya kalau biasa Sahabat ngetik artikel pada mode Compose, untuk mengubah alamat gambar menjadi HTTP Sahabat harus pindah ke mode HTML.

Cari kira-kira yang kodenya seperti ini :

<div class="separator" style="clear: both; text-align: center;">
 <a href="http://www.chaidir.web.id/wp-content/uploads/blogger/-V9XnlflMpvc/VGS5NOM3KeI/AAAAAAAAF9k/mBRjbTMzn2k/s1600/https-for-security.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
  <img border="0" height="258" src="http://www.chaidir.web.id/wp-content/uploads/blogger/-V9XnlflMpvc/VGS5NOM3KeI/AAAAAAAAF9k/mBRjbTMzn2k/s400/https-for-security.png" width="400" />
 </a>
</div>

Kemudian tinggal hapus aja huruf S yang ada dibagian src=”https://blablabla

Kalau misalkan di postingan tersebut ada banyak gambar, minimal ada satu yang diubah. Biar yang satu itu bisa kebaca sebagai gambar thumbnail. 🙂

Solusi Jitu Supaya Gambar Thumbnail Blog Muncul Kembali

Alternatif cara yang kedua, ini jauh lebih mudah dan gak merepotkan. Jadi untuk menampilkan gambar thumbnail di beranda blog itu, pada template umumnya pasti menggunakan kode HTML berikut ini :

<a expr:href='data:post.url'>
 <img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/>
</a>

Singkatnya atribut expr:scr=’data:post.thumbnailURL’ ini lah yang akan memanggil gambar dari struktur data , untuk ditampilkan sebagai thumbnail post di homepage kita. Sementara seperti yang saya jelaskan diawal tadi tag media:thumbnail tidak ada. Jadi iyaa atribut HTML ini gak akan nemukan apa-apa untuk ditampilkan.

Solusi jitu untuk mengatasinya adalah dengan memakai teknik conditional tag . Saya gak akan jelaskan panjang lebar, takutnya Anda malah bosan baca tulisan ini. Iyaah pokoknya begitulah.

Untuk menggunakan cara yang kedua ini, pertama Anda masuk dulu ke Dashboard, kemudian buka Template – Edit HTML. Setelah itu gunakan ctrl + F untuk mencari kode <b:if cond=’data:post.thumbnailUrl’>. Baru kemudian copy paste kode HTML berikut ini :

<b:if cond='data:post.thumbnailUrl'>
  <a expr:href='data:post.url'>
    <img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/>
  </a>
<b:else/>
  <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'>
      <img alt='thumbnail' class='post-thumbnail' expr:src='data:post.firstImageUrl'/>
    </a>
  <b:else/>
    <a expr:href='data:post.url'>
      <img alt='no image' class='noimage post-thumbnail' src='//3.bp.blogspot.com/--AgxEozGEH8/VGI-cBpR0QI/AAAAAAAAF70/SbizNIS3Vq8/s320/no-image-chaidir-web-id.png'/>
   </a>
 </b:if>
</b:if>

Sebelum mengotak-atik, silahkan diperhatikan dulu kode HTML yang ada di template Sahabat. Apakah beda dengan yang saya berikan diatas? Atau sama aja? Kalau template saya sih agak beda, tapi iyaa intinya sama lah. Mungkin sebagian template ada yang gak menggunakan firstImageUrl. Jadi tinggal ditambahkan itu saja. 😀

Saya jelaskan sedikit, maksud dari penggunaan kode HTML diatas adalah ada tiga macam kondisi yang digunakan untuk memunculkan gambar thumbnail di beranda blog kita.

1. Tampilkan gambar dari alamat HTTP, jika tidak ada..
2. Tampilkan gambar yang paling pertama (HTTPS juga bisa dibaca), jika tidak ada..
3. Tampilkan gambar default no-image (bisa atur sendiri dengan alamat gambar yang kita mau)

Jadi, dengan cara yang kedua ini cara pertama tetap bisa digunakan (kalau rajin). Tapi kalau cuman ngandalin cara pertama aja, sewaktu-waktu kita lupa ubah alamat gambar ke HTTP iyaa thumbnail post tetap gak akan muncul. 😀

Catatan :
Alamat gambar yang dipanggil oleh fungsi tag data:post.thumbnailUrl dengan fungsi tag data:post.firstImageUrl jelas berbeda. Jadi, kalau Anda ada menggunakan javascript resizeThumb maka untuk gambar yang ditampilkan firstImageUrl juga harus disesuaikan ukurannya.

[ UPDATE ]
Berhubung ada Sahabat yang nanya, jadi baiknya saya update saja lah tulisan ini. Untuk beberapa template terkadang ukuran thumbnail bisa saja perlu diatur lagi dengan menggunakan javascript. Seperti catatan yang diatas, karna gambar yang muncul beda maka kita juga perlu menambahkan javascript khusus untuk kondisi firstImageUrl.

Silahkan gunakan script berikut ini, tambahkan saja tepat dibawah kode HTML <b:if cond=’data:post.firstImageUrl’>.

<script type='text/javascript'>
 //<![CDATA[
  function resizeThumbo(el, from, to) {$(el).each(function() {$(this).attr({'src': $(this).attr('src').replace('/s'+from+'/', '/s'+to+'-c/'),'width': to, 'height': to});});}
  $(function() {resizeThumbo('.thumbx img', '1600', '250');});
  $(function() {resizeThumbo('.thumbx img', '640', '250');});
  $(function() {resizeThumbo('.thumbx img', '320', '250');});
 //]]>
</script>

Sekian dulu ulasan tentang masalah thumbnail post gambar yang hilang dari beranda ini. Mudah-mudahan bisa sedikit membantu sahabat yang masih bingung. Sekiranya ada yang perlu didiskusikan, silahkan tinggalkan komentar. 😀

Sampai Jumpa!! Semoga Berhasil..