Cara Mudah Memunculkan Thumbnail di Blog AMP

Salah satu kendala yang sering dihadapi para blogger ketika pertama kali beralih ke templat blogger AMP adalah gambar thumbnail yang hanya muncul pada halaman artikel atau posting tetapi tidak muncul di halaman utama atau homepage. Untuk templat blogger AMP, salah satu perubahan mendasar yang harus dilakukan adalah mengubah penulisan kode gambar yang ada di artikel dari sebelumnya <img> menjadi <amp-img>.

Penulisan kode gambar di artikel dalam templat blogger non-AMP sebelumnya adalah

<img alt='gambar' src='url-gambar.jpg'/>

Apabila penulisan tersebut tetap dipertahankan pada templat blogger AMP, hal ini akan mengakibatkan kegagalan dalam validasi AMP HTML.

Penulisan kode gambar yang benar untuk templat blogger AMP adalah sebagai berikut :

<amp-img src="url-gambar.jpg" width="1080" height="610" layout="responsive" alt="nama gambar">
</amp-img>

Namun seperti disebutkan di awal artikel ini, kendala yang terjadi adalah gambar muncul pada halaman artikel tetapi tidak muncul sebagai thumbnail pada halaman utama atau homepage. Untuk mengatasi kendala ini, caranya sebenarnya sangat mudah dan sederhana, cukup dengan menambahkan kode tag noscript sehingga kodenya menjadi:

<noscript><img alt='nama gambar' src='url-gambar.jpg'/></noscript> 

Dengan demikian, tampilan keseluruhan penulisan kode gambar di halaman penulisan artikel untuk templat blogger AMP adalah :

<amp-img src="url-gambar.jpg" width="1080" height="610" layout="responsive" alt="nama gambar">
</amp-img>
 <noscript><img alt='nama gambar' src='url-gambar.jpg'/></noscript> 

Selamat mencoba, semoga artikel ini bisa mengatasi kendala memunculkan gambar thumbnail di halaman utama atau homepage blog AMP.