Cara Menyisipkan Gambar Untuk Postingan Blog AMP

Keberadaan gambar didalam sebuah postingan blog merupakan sesuatu yang perlu untuk mempercantik tampilan postingan, sehingga postingan blog lebih menarik dan enak dilihat atau good looking.

Selain itu gambar postingan yang disertai dengan atribut "title" dan "Alt" akan dapat menambah nilai SEO sebuah blog meningkat, sehingga dengan semakin meningkatnya nilai SEO sebuah blog diharapkan Blog akan lebih mudah ditemukan oleh mesin telusur.

Keberadaan gambar juga bisa merupakan sesuatu yang penting untuk sebagian blog, terutama posting blog yang membahas tentang tutorial, sutu tempat atau suatu kejadian, gambar tersebut bisa membantu menjelaskan apa yang sedang dibahas dalam postingan tersebut.

Cara menyisipkan gambar kedalam posting blog sangat mudah sekali, saya yakin kita semua sudah bisa dan sudah terbiasa melakukannya, akan tetapi jika cara seperti biasa itu kita lakukan di blog AMP maka postingan blog tersebut akan menjadi invalid amp.

Untuk menyisipkan gambar didalam postingan blog amp agar valid sebenarnya mudah, caranya cukup merubah sedikit kode HTML gambar tersebut. contohnya seperti gambar dipostingan ini kode HTML standar adalah:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFFoUiV-McoUoqrD_waAp8El92vp6Lk-nEUUCfQZTAOa4e97XzceQ7VTaJ86op61EQUrBScRirpGS5cpzn_fHMy9k2fINyCJSIfxib3UQ9gWol7rv_SoLEH4ADjv2wzTUVoIcdswSxmOg/s1600/memasang-gambar-di-blog-amp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="menyisipkan gambar diblog amp" border="0" data-original-height="768" data-original-width="1366" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFFoUiV-McoUoqrD_waAp8El92vp6Lk-nEUUCfQZTAOa4e97XzceQ7VTaJ86op61EQUrBScRirpGS5cpzn_fHMy9k2fINyCJSIfxib3UQ9gWol7rv_SoLEH4ADjv2wzTUVoIcdswSxmOg/s400/memasang-gambar-di-blog-amp.png" title="menyisipkan gambar diblog amp" width="400" /></a></div>

Kode HTML diatas adalah kode HTML gambar untuk diterapkan didalam blog non AMP, supaya tidak terjadi invalid amp ketika diterapkan didalam blog AMP maka kode tersebut harus dirubah menjadi seperti kode dibawah ini:

<div class="separator" style="clear: both; text-align: center;"> GANTI DENGAN <div class="img-center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFFoUiV-McoUoqrD_waAp8El92vp6Lk-nEUUCfQZTAOa4e97XzceQ7VTaJ86op61EQUrBScRirpGS5cpzn_fHMy9k2fINyCJSIfxib3UQ9gWol7rv_SoLEH4ADjv2wzTUVoIcdswSxmOg/s1600/memasang-gambar-di-blog-amp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><amp-img alt="menyisipkan gambar diblog amp" border="0" data-original-height="768" data-original-width="1366" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFFoUiV-McoUoqrD_waAp8El92vp6Lk-nEUUCfQZTAOa4e97XzceQ7VTaJ86op61EQUrBScRirpGS5cpzn_fHMy9k2fINyCJSIfxib3UQ9gWol7rv_SoLEH4ADjv2wzTUVoIcdswSxmOg/s400/memasang-gambar-di-blog-amp.png" title="menyisipkan gambar diblog amp" width="400" /></a></div>

Dan hasil akhirnya akan menjadi seperti ini:

<div class="img-center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFFoUiV-McoUoqrD_waAp8El92vp6Lk-nEUUCfQZTAOa4e97XzceQ7VTaJ86op61EQUrBScRirpGS5cpzn_fHMy9k2fINyCJSIfxib3UQ9gWol7rv_SoLEH4ADjv2wzTUVoIcdswSxmOg/s1600/memasang-gambar-di-blog-amp.png"><amp-img alt="menyisipkan gambar diblog amp" data-original-height="768" data-original-width="1366" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFFoUiV-McoUoqrD_waAp8El92vp6Lk-nEUUCfQZTAOa4e97XzceQ7VTaJ86op61EQUrBScRirpGS5cpzn_fHMy9k2fINyCJSIfxib3UQ9gWol7rv_SoLEH4ADjv2wzTUVoIcdswSxmOg/s400/memasang-gambar-di-blog-amp.png" title="menyisipkan gambar diblog amp" width="400" /></a></div>

Supaya gambar tersebut menjadi responsive atau mengikuti media tempat gambar tersebut dibuka maka perlu ditambahkan attribute layout yaitu layout="responsive" ditengah script tersebut sehingga  scriptnya menjadi seperti ini

<div class="img-center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFFoUiV-McoUoqrD_waAp8El92vp6Lk-nEUUCfQZTAOa4e97XzceQ7VTaJ86op61EQUrBScRirpGS5cpzn_fHMy9k2fINyCJSIfxib3UQ9gWol7rv_SoLEH4ADjv2wzTUVoIcdswSxmOg/s1600/memasang-gambar-di-blog-amp.png"><amp-img alt="menyisipkan gambar diblog amp" layout="responsive" data-original-height="768" data-original-width="1366" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFFoUiV-McoUoqrD_waAp8El92vp6Lk-nEUUCfQZTAOa4e97XzceQ7VTaJ86op61EQUrBScRirpGS5cpzn_fHMy9k2fINyCJSIfxib3UQ9gWol7rv_SoLEH4ADjv2wzTUVoIcdswSxmOg/s400/memasang-gambar-di-blog-amp.png" title="menyisipkan gambar diblog amp" width="400" /></a></div>




Atau jika dirumuskan maka kodenya akan menjadi seperti ini:

<div class="img-center">
<a href="Alamat-gambar.png">
<amp-img alt="x" layout="responsive" data-original-height="768" data-original-width="1366" height="222"
src="Alamat-gambar.png" title="x" width="400" /></a></div>

Supaya kode<div class="img-center">berfungsi sebaiknya tambahkan dulu kode CSS berikut ini di Edit HTML blog Agan

.img-center{text-align:center;margin:0 auto;}
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-width:600px;}
@media screen and (max-width:640px){
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}

Itulah sekilas penjelasan cara menyisipkan gambar didalam postingan Blog AMP, semoga dapat dimengerti dan bermanfaat. terimakasih