Cara Membuat Gambar Postingan Blog Valid Template AMP Platform Blogger

Mencantumkan gambar di postingan blog platform Blogger agar valid dengan template AMP harus melakukan sedikit perubahan kode gambar secara manual. Perubahan kode digunakan untuk menjadikan gambar tidak mendapat pesan error saat melakukan validator maupun di menu Console inspect element. Karena jika ada pesan error, itu artinya blog tidak akan menampilkan simbol petir di halaman mesin pencari Google alias tidak valid AMP.


Cara merubah kode gambar supaya valid

Ketika awal upload gambar dan memasukkannya ke postingan, maka kode gambar adalah seperti ini:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR0evo_lwFyJ13OrAFVLLvPCEGfKDnz6wbZMZ01iu3kL6YbWTpRgzocN7bcuMCPMye0Ns4hDZMDkQcxHuDxSlCY_jE8sRohC-vzfbEOjdljf5PE48LrJnGeu8oHiluRDxgjPwxQhiTX6Q/s1600/gambar+valim+template+amp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="278" data-original-width="476" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR0evo_lwFyJ13OrAFVLLvPCEGfKDnz6wbZMZ01iu3kL6YbWTpRgzocN7bcuMCPMye0Ns4hDZMDkQcxHuDxSlCY_jE8sRohC-vzfbEOjdljf5PE48LrJnGeu8oHiluRDxgjPwxQhiTX6Q/s320/gambar+valim+template+amp.jpg" width="320" /></a></div>
Nah, supaya valid AMP rubahlah kodenya menjadi seperti ini:
<amp-img data-original-height="278" data-original-width="476" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR0evo_lwFyJ13OrAFVLLvPCEGfKDnz6wbZMZ01iu3kL6YbWTpRgzocN7bcuMCPMye0Ns4hDZMDkQcxHuDxSlCY_jE8sRohC-vzfbEOjdljf5PE48LrJnGeu8oHiluRDxgjPwxQhiTX6Q/s320/gambar+valim+template+amp.jpg" width="320" layout="responsive"></amp-img>
Keterangan:
layout="responsive" ditambahkan agar lebar dan tinggi gambar dapat secara otomatis menyesuaikan dengan layar gadget pengunjung.

Baca juga:

Itulah tutorial singkat yang dapat saya sampaikan dalam melakukan pemvalidan gambar untuk template AMP.

Semoga bermanfaat, Amin!

Related Posts →


Open Disqus Close Disqus



This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Blogger Cookies