Selain itu gambar postingan yang disertai dengan atribut "title" dan "Alt" akan sanggup menambah nilai SEO sebuah blog meningkat, sehingga dengan semakin meningkatnya nilai SEO sebuah blog dibutuhkan Blog akan lebih gampang ditemukan oleh mesin telusur.
Keberadaan gambar juga sanggup merupakan sesuatu yang penting untuk sebagian blog, terutama posting blog yang membahas ihwal tutorial, sutu daerah atau suatu kejadian, gambar tersebut sanggup membantu menjelaskan apa yang sedang dibahas dalam postingan tersebut.
Cara menyisipkan gambar kedalam posting blog sangat gampang sekali, saya yakin kita semua sudah sanggup dan sudah terbiasa melakukannya, akan tetapi kalau cara menyerupai biasa itu kita lakukan di blog AMP maka postingan blog tersebut akan menjadi invalid amp.
Untuk menyisipkan gambar didalam postingan blog amp supaya valid bergotong-royong mudah, caranya cukup merubah sedikit instruksi HTML gambar tersebut. misalnya menyerupai gambar dipostingan ini instruksi HTML standar adalah:
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFamFYW_1S31rFeX7jyqTdgUBOr46noZeljTs8qvZZ4voV8m_al-nKUhepCKPjzNYss3AqYG6v4MX3P4WXj4ZjyVVKhOfxmFHiXMum3iDD1WKpd4EGuBgdyVRvDB348zL8BD4hzniA5It/s1600/memasang-gambar-di-blog-amp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Keberadaan gambar didalam sebuah postingan blog merupakan sesuatu yang perlu untuk memper Cara Menyisipkan Gambar Untuk Postingan Blog AMP" border="0" data-original-height="768" data-original-width="1366" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFamFYW_1S31rFeX7jyqTdgUBOr46noZeljTs8qvZZ4voV8m_al-nKUhepCKPjzNYss3AqYG6v4MX3P4WXj4ZjyVVKhOfxmFHiXMum3iDD1WKpd4EGuBgdyVRvDB348zL8BD4hzniA5It/s400/memasang-gambar-di-blog-amp.png" title="Cara Menyisipkan Gambar Untuk Postingan Blog AMP" width="400" /></a></div> Kode HTML diatas yaitu instruksi HTML gambar untuk diterapkan didalam blog non AMP, supaya tidak terjadi invalid amp dikala diterapkan didalam blog AMP maka instruksi tersebut harus dirubah menjadi menyerupai instruksi 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/AVvXsEhEFamFYW_1S31rFeX7jyqTdgUBOr46noZeljTs8qvZZ4voV8m_al-nKUhepCKPjzNYss3AqYG6v4MX3P4WXj4ZjyVVKhOfxmFHiXMum3iDD1WKpd4EGuBgdyVRvDB348zL8BD4hzniA5It/s1600/memasang-gambar-di-blog-amp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><amp-img alt=" Keberadaan gambar didalam sebuah postingan blog merupakan sesuatu yang perlu untuk memper Cara Menyisipkan Gambar Untuk Postingan Blog AMP" border="0" data-original-height="768" data-original-width="1366" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFamFYW_1S31rFeX7jyqTdgUBOr46noZeljTs8qvZZ4voV8m_al-nKUhepCKPjzNYss3AqYG6v4MX3P4WXj4ZjyVVKhOfxmFHiXMum3iDD1WKpd4EGuBgdyVRvDB348zL8BD4hzniA5It/s400/memasang-gambar-di-blog-amp.png" title="Cara Menyisipkan Gambar Untuk Postingan Blog AMP" width="400" /></a></div>
<div class="img-center"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFamFYW_1S31rFeX7jyqTdgUBOr46noZeljTs8qvZZ4voV8m_al-nKUhepCKPjzNYss3AqYG6v4MX3P4WXj4ZjyVVKhOfxmFHiXMum3iDD1WKpd4EGuBgdyVRvDB348zL8BD4hzniA5It/s1600/memasang-gambar-di-blog-amp.png"><amp-img alt=" Keberadaan gambar didalam sebuah postingan blog merupakan sesuatu yang perlu untuk memper Cara Menyisipkan Gambar Untuk Postingan Blog AMP" data-original-height="768" data-original-width="1366" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFamFYW_1S31rFeX7jyqTdgUBOr46noZeljTs8qvZZ4voV8m_al-nKUhepCKPjzNYss3AqYG6v4MX3P4WXj4ZjyVVKhOfxmFHiXMum3iDD1WKpd4EGuBgdyVRvDB348zL8BD4hzniA5It/s400/memasang-gambar-di-blog-amp.png" title="Cara Menyisipkan Gambar Untuk Postingan Blog AMP" width="400" /></a></div> Supaya gambar tersebut menjadi responsive atau mengikuti media daerah gambar tersebut dibuka maka perlu ditambahkan attribute layout yaitu layout="responsive" ditengah script tersebut sehingga scriptnya menjadi menyerupai ini
<div class="img-center"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFamFYW_1S31rFeX7jyqTdgUBOr46noZeljTs8qvZZ4voV8m_al-nKUhepCKPjzNYss3AqYG6v4MX3P4WXj4ZjyVVKhOfxmFHiXMum3iDD1WKpd4EGuBgdyVRvDB348zL8BD4hzniA5It/s1600/memasang-gambar-di-blog-amp.png"><amp-img alt=" Keberadaan gambar didalam sebuah postingan blog merupakan sesuatu yang perlu untuk memper Cara Menyisipkan Gambar Untuk Postingan Blog AMP" layout="responsive" data-original-height="768" data-original-width="1366" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFamFYW_1S31rFeX7jyqTdgUBOr46noZeljTs8qvZZ4voV8m_al-nKUhepCKPjzNYss3AqYG6v4MX3P4WXj4ZjyVVKhOfxmFHiXMum3iDD1WKpd4EGuBgdyVRvDB348zL8BD4hzniA5It/s400/memasang-gambar-di-blog-amp.png" title="Cara Menyisipkan Gambar Untuk Postingan Blog AMP" width="400" /></a></div>
<div class="img-center"> <a href="Alamat-gambar.png"> <amp-img alt=" Keberadaan gambar didalam sebuah postingan blog merupakan sesuatu yang perlu untuk memper Cara Menyisipkan Gambar Untuk Postingan Blog AMP"background-color: yellow;">x" layout="responsive" data-original-height="768" data-original-width="1366" height="222" src="Alamat-gambar.png" title="Cara Menyisipkan Gambar Untuk Postingan Blog AMP"background-color: yellow;">x" width="400" /></a></div> Supaya kode
<div class="img-center">berfungsi sebaiknya tambahkan dulu instruksi 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 klarifikasi cara menyisipkan gambar didalam postingan Blog AMP, semoga sanggup dimengerti dan bermanfaat. terimakasih