Cara Membuat Gambar Valid AMP di Blogger

AMP singkatan dari Accelerated Mobile Pages atau yang bahasa indonesianya "laman seluler yang dipercepat", artinya situs web yang di optimalkan dengan AMP akan dimuat dengan cepat bahkan dengan internet berkecepatan lambat. Setidaknya ada dua kelebihan yang mencolok dari penggunaan template AMP dibandingkan dengan template biasa, yaitu: Thrilling Speed and Lower Bounce Rates.

Teknologi membuat kita terbiasa dengan kecepatan. Saya bahkan siapapun diluar sana tidak akan sabar menunggu hingga beberapa detik untuk memuat halaman web. Menurut statisik Kissmetrics, bahwa pengunjung akan meninggalkan halaman web jika butuh lebih dari 3 detik untuk memuat. Jika demikian adanya, Bounce Rates akan membengkak yang berakibat buruk pada peringkat blog.

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.

Baca juga: Cara agar blog di index oleh google dalam 5 menit

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.

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.