Cara Mudah Memasang Gambar di Blog Valid AMP
Genyo.id, Gambar di Blog Valid AMP – Salah satu hal yang berbeda antara kode html blog biasa dan kode AMP HTML adalah pada bagian image atau gambar jika biasanya kode html menggunakan img, berbeda dengan versi AMP. yaitu kode Image AMP menggunakan amp-img.
Untuk menambahkan atau memasukan gambar pada Blog non AMP biasanya kita langsung bisa menggunakan serta dapat langsung mengatur lebar dan tingginya sesuai keinginan pada saat pertama kali diunggah.
Namun, ini akan sangat berbeda jika pada blog AMP. untuk blog AMP sendiri kita tidak bisa langsung menggunakan gambar yang diunggah tersebut. Dikarenakan gambar yang diunggah tersebut mengandung CSS yang tidak boleh di campur adukan didalam HTML.
Jadi intinya yaitu pada saat kita mengunggah gambar, kita hanya memerlukan URL gambar tersebut dan untuk semua CSS yang ada pada gambar tidak dibutuhkan lagi, melainkan akan diganti dengan kode css Image yang Valid AMP HTML.
Maka dari itu, jangan sampai anda salah dalam memasang kode image pada saat memposting sebuah artikel, karena jika salah dalam menggunakan kode image nantinya akan menyebabkan eror dan postingan tidak akan Valid AMP.
Sebagai contoh untuk kode dasar image yang diunggah pertama kali di blogger pada umumnya adalah seperti ini:
<a href="url-image-jpg" imageanchor="1" ><img border="0" src="gambar-jpg" width="320" height="320" data-original-width="480" data-original-height="480" /></a>
Nah, kode gambar seperti diatas tidak Valid AMP HTML dan jikalau tidak valid AMP, maka otomatis artikel yang anda posting juga akan valid AMP. dan pastinya postingan yang terindeks di google juga tidak akan ada Logo AMP saat dipencarian google.
Dan kode dasar image yang valid AMP adalah seperti dibawah ini yang nantinya menggantikan kode dasar yang asli dari blogger saat pertama diunggah.
<img alt='Title-Image' src='url-image-jpg'/>
Memasang Gambar di Blog Valid AMP
Perlu diketahui, postingan gambar pada blogger dibagi menjadi 2 jenis, yaitu gambar Thumbnail Firstimage (Gambar utama) dan Gambar tambahan (Gambar pelangkap artikel) Kedua jenis gambar diatas mempunyai kode yang berbeda dalam template berbasiskan AMP.
Oleh karena itu anda harus memperhatikan hal tersebut. Untuk lebih jelasnya kode gambar Valid AMP Anda bisa simak dibawah ini.
Gambar Thumbnail (First image)
Gambar thumbnail adalah gambar yang menjadi gambar utama pada sebuah postingan. Gambar ini akan berada paling depan atau diatas artikel serta gambar ini akan menjadi gambar utama yang akan muncul dihalaman utama atau homepage pada sebuah blog.
Untuk dapat memunculkan thumbnail postingan pada template berbasis AMP, maka gunakan kode berikut ini di mode HTML postingan bukan Compose
<noscript><img src="https-gambar-jpg" width="650" height="350" alt="Title-gambar"/></noscript>
Keterangan :
Ganti https-gambar-jpg dengan URL gambar yang ingin Anda jadikan sebagai gambar utama. Title-gambar ganti dengan title sesuai pembahasan artikel yang Anda buat. width 650 lebar gambar dan height tinggi gambar.
Gambar Pelengkap Post
Gambar ini merupakan sebuah gambar pelengkap artikel. yang mana gambar ini hanya untuk pelengkap artikel agar pengunjung atau si pembaca lebih mudah memahami isi dari konten anda, gambar ini tidak muncul di halaman utama atau Homepage. Berikut kode Image pelengkap artikel Valid AMP.
Image Responsif
<amp-img alt="Tutorial Komputer" height="250" layout="responsive" src="https-url-jpg" tabindex="0" width="450"></amp-img>
Image Fixed
<center> <amp-img alt="Tutorial Android" height="780" layout="fixed" src="https-url-jpg" tabindex="0" width="340"></amp-img> </center>
Keterangan:
Silahkan anda sesuaikan ukuran tinggi dan lebar sesuai ukuran gambar yang anda unggah agar gambar lebih rapi dan sesuai, khususnya untuk image fixed dikarenakan image fixed sifatnya mengikuti ukuran yang anda tentukan. Untuk image responsif lebar tidak dapat diubah hanya tinggi saja yang dapat diubah.
Nah itulah Cara Memunculkan atau Menampilkan Thumbnail Gambar Valid AMP HTML. semoga bermanfaat dan selamat ber-validasi ria.
