Cara Mengatasi Thumbnail yang Tidak Muncul di Template AMP

masnasih.com - Ketika saya mengganti template blog, dari template valid HTML5 ke AMP, saya menemui kendala yaitu setelah semua tag img saya ganti dengan tag amp-img, gambar thumbnail menjadi hilang, yang tampil hanyalah gambar default dari templatenya.

Saya sempat bingung mencari panduan searching di google belum menemukan solusinya, di blog mbak Arlina hanya di jelaskan bahwa agar template amp menjadi valid, maka semua tag img diganti dengan tag amp-img dan buang juga elemen style jika ada. Atau alternatif lainnya adalah letakkan img di antara tag noscript. (Contoh : <noscript><img src=''/></noscript>

Hehe bingung nggak?

Nggak usah bingung intinya kita bisa menggunakan noscript dan amp-img dan ternyata dua tag tersebut mempunyai fungsi yang berbeda dan berlawanan.

Cara Mengatasi Gambar Thumbnail yang Tidak Muncul di Template AMP

Setiap kesulitan pasti ada kemudahan, setiap masalah pasti ada jalan keluar, setiap kesakitan pasti ada obatnya. So, nggak usah bingung.

Fungsi Tag amp-img

amp-img adalah hanya menampilkan gambar di postingan blog yang menggunakan template amp. Tag amp-img ini menyembunyikan foto kecil atau yang sering disebut dengan thumbnail. Jadi thumbnail blog template amp tidak akan muncul jika kita menggunakan amp-img karena memang fungsinya untuk menampilkan gambar hanya di laman post.

Fungsi Tag noscript

Sebaliknya, noscript adalah tag untuk membungkus tag img agar valid amp. Tag ini berfungsi menampilkan gambar thumbnail sekaligus menyembunyikan gambar di postingan blog. Jadi kebalikannya dari tag amp-img yaitu menyembunyikan gambar di postingan dan menampilkan gambar thumbnail (gambar kecil)

Kesimpulan dan Solusi

Jadi jangan heran ketika Anda menggunakan tag amp-img, gambar thumbnailnya tidak muncul dan ketika menggunakan noscript gambarnya tidak muncul di postingan, karena dua tag tersebut mempunyai fungsi yang berbeda.

Solusi untuk mengatasi masalah tersebut adalah menyediakan gambar yang ingin dimunculkan sebagai thumbnail dan sediakan juga gambar yang ingin ditampilkan di postingan. Gambar thumbnail menggunakan tag nosript sedangkan Gambar postingan menggunakan tag img-amp.

Demikianlah Cara Mengatasi Thumbnail yang Tidak Muncul di Template AMP. Semoga Bermanfaat.

Jika masih bingung silakan tanyakan melalui kolom komentar dibawah. Saya akan senang untuk menjawab pertanyaan Anda. Terima Kasih :)