Cara Membuat Postingan Gambar Atau Thumbnail valid AMP HTML

Baca Juga

Tutorial Membuat postingan valid amp dengan mudah Bagi yang menggunakan template AMP HTML pada blog baru tentunya tidak ada masalah dengan postingan blog karena kita membuat postingan baru yang tentunya langsung valid HTML. Namun akan menjadi masalah bagi yang menggunakan AMP HTML pada blog yang sudah memiliki banyak postingan.

dengan menggunakan AMP HTML maka otomatis postingan-postingannya akan memiliki error AMP pada blog dan postingan lama.

satu-satunya cara agar semua halaman posingan blog AMP menjadi valid maka semua postingannya harus diedit, satu per satu.

Kenapa semua postingan dengan blog AMP harus valid AMP?
Baca Juga : Cara Mudah memasang Kode Iklan Pada Blog Template AMP

Google mengatakan bahwa blog yang valid AMP akan memiliki ikon AMP "petir" di hasil pencarian mobile, namun sementara ini fitur Amp masih bersifat percobaan. Dan kini Google sudah merubah prioritas index pencarian menjadi "mobile index first", artinya index pencarian mobile lebih diutamakan dari pencarian desktop.

Gunakan kode yang diperlukan agar valid amp seperti <noscript> untuk image thumbnail, amp-img, amp-iframe, amp-youtube dan lainnya yang diperlukan di dalam postingan.

Cara Setting/Mengatur untuk memunculkan Thumbnail atau Gambar valid AMP html - 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
Baca Juga : Cara Terbaik Membuat Template Blogger Amp

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 Tambahan

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 (Lebar) dan height (Tingginya) sesuai selera, baik pada gambar thumbnail ataupun selain thumbnail. INGAT, yang membedakan antara thumbnail dan bukan hanya tambahan kode 'noscript' saja