Cara Memunculkan Thumbnail dan Gambar valid AMP

Salah satu hal yang berbeda antara kode html dan kode amp adalah image atau gambar. Jika kode html biasanya menggunakan img, maka kode amp menggunakan amp-img. Oleh karenanya jangan pernah salah dalam memasang kode image saat memposting. Salah dalam menggunakan kode image menyebabkan eror dan tidak valid AMP. Inilah kode dasar image valid AMP:

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

Perlu diketahui juga postingan gambar itu terbagi menjadi dua jenis, yaitu gambar yang nantinya digunakan untuk thumbnail dan gambar tambahan atau selain thumbnail. Kedua jenis gambar di atas berbeda kodenya dalam template berbasiskan AMP. Oleh karenanya, sahabat harus memperhatikan dengan saksama dan juga teliti.

1. Gambar Thumbnail

Gambar thumbnail adalah gambar yang muncul pada thumbnail. Gambar ini biasanya berada paling depan/atas. Gambar ini akan muncul di halaman utama/homepage. Untuk memunculkan thumbnail pada template berbasiskan AMP, maka gunakanlah kode berikut ini di template, bukan compose saat memposting:

<noscript><img width="1080" height="610" alt='gambar' src='url-gambar-anda'/></noscript>

2. Gambar selain Thumbnail

Gambar selain thumbnail adalah gambar tambahan. Gambar ini tidak muncul di halaman utama/homepage. Untuk kodenya adalah sebagai berikut: [tulis di template, bukan compose]:

<amp-img src="url-image-disini"
    width="1080"
    height="610"
    layout="responsive"
    alt="AMP HTML"></amp-img>

Silahkan sahabat atur sendiri ukuran width dan heightnya sesuai selera, baik pada gambar thumbnail ataupun selain thumbnail. INGAT, yang membedakan antara thumbnail dan bukan hanya tambahan kode 'noscript' saja. Selamat berkarya...