Cara Memunculkan Thumbnail Pada Blog AMP - Petrus Siahaan

Tutorial Cara Memunculkan Thumbnail Pada AMP HTML Blogger Template

Saya menggunakan template AMP blogger dan mengubah semua artikel termasuk kode <img> jadi <amp-img>, tapi kok thumbnailnya tidak muncul? Kenapa ya?


Ternyata memang template blogger tidak akan membaca thumbnail jika semua image pada sebuah artikel diubah menjadi kode <amp-img>.



Sebagaimana kita ketahui, bahwa tag img pada AMP HTML berubah menjadi amp-img. Apabila kita menuliskan pada postingan seperti ini :

Baca Juga: Memperbaiki "Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web" pada Google Page Speed Insight

<img alt='gambar' src='url-image'/>

maka akan mengakibatkan error validasi AMP HTML. Penulisan yang benar seperti disini yaitu :

<amp-img src="url-image-disini.png"

    width="1080"

Baca Juga: AMP Perkenalkan amp-script untuk input JavaScript di Web AMP

    height="610"

    layout="responsive"

    alt="AMP HTML"></amp-img>

Image akan muncul dengan baik pada postingan. Akan tetapi tidak akan muncul pada thumbnail di halaman utama / homepage. Untuk mengakalinya, agar image muncul pada Homepage tambahkan tag noscript sehingga kode menjadi seperti ini :

Baca Juga: Cara Memunculkan Thumbnail Pada Blog AMP

<noscript><img alt='gambar' src='url-gambar-anda'/></noscript>

Selamat mencoba...