Dengan menggunakan AMP pada website, kita berarti menambahkan sayap untuk performa. Google sangat menyukai web yang memiliki kecepatan yang baik. Selain itu, kecepatan situs web adalah faktor pertama yang mempengaruhi SEO. Situs web yang dikembangkan dengan AMP akan mempunyai peringkat lebih tinggi dalam hasil pencarian organik halaman mesin pencari seluler. Oleh karena ituhah sangat disarankan untuk menggunakan AMP pada website atau blog.
Struktur blog AMP sangat berbeda dengan blog biasa. Jadi ada perbedaan yang akan kita temui dari AMP dalam blogging, salah satunya adalah memasukkan gambar atau thumbnail pada postingan. Kita harus mengatur supaya gambar benar-benar valid AMP, tidak seperti template blog biasa yang tinggal klik icon gambar yang sudah di sediakan oleh blogger. Nah, jadi pada tulisan ini saya akan membahas bagaimana cara membuat gambar valid AMP pada postingan Blogger
Cara Membuat Thumbnail Valid AMP
Untuk menambahkan gambar pada postingan, pada html biasa menggunakan img, maka AMP menggunakan amp-img. Jadi kita perlu mengedit kembali kode bawaan blogger ketika insert gambar pada postingan.
Perlu diingat juga postingan gambar AMP terbagi menjadi dua jenis, yaitu gambar thumbnail yang digunakan sebagai cover dari postingan dan gambar tambahan atau thumbnail yang ada dalam postingan. Oleh karena itu sobat harus benar-benar memahami perbedaan keduanya agat nantinya gambar pada postingan tidak doble. Maka dari itu, mari kita bahas satu persatu.
Perlu diingat juga postingan gambar AMP terbagi menjadi dua jenis, yaitu gambar thumbnail yang digunakan sebagai cover dari postingan dan gambar tambahan atau thumbnail yang ada dalam postingan. Oleh karena itu sobat harus benar-benar memahami perbedaan keduanya agat nantinya gambar pada postingan tidak doble. Maka dari itu, mari kita bahas satu persatu.
- Baca juga: 6 cara mendapatkan peringkat di google
1. Gambar Thumbnail (Cover)
Pada blog AMP kita bisa mengatur supaya salah satu gambar tidak berada dalam artikel, gambar ini biasanya menjadi cover dari sebuah artikel berada paling atas dan akan muncul di homepage atau halaman utama. Untuk kode yang digunakan sebagai berikut:
<noscript><img width="1020" height="600" alt='gambar' src='url-gambar'/></noscript>
2.Gambar Tambahan
Gambar tambahan pada AMP adalah gambar yang mengisi postingan. Gambar ini tidak akan muncul pada halaman utama blog. Berikut kode yang harus kita gunakan
<amp-img src="url-image-disini" width="1020" height="600" layout="responsive" alt="AMP HTML"></amp-img>Nah, untuk ukuran gambar silahkan di ubah sesuai keinginan. Yang perlu di ketahui perbedaan antara keduanya adalah <noscript> pada gambar utama atau thumbnail cover. Tidak peduli gambar utama di letakkan di bagian mana ketika menulis artikel, apabila gambar tersebut di sisipkan kode <noscript> maka otomatis gambar tersebut tidak akan berada pada tempat semula ketika menulis artikel, melainkan akan berpindah ke bagian atas dan menjadi thumbnail (cover) pada halaman utama blog.