 |
| source: alinuxblog.com |
Perubahan kode sendiri berguna untuk membuat gambar tidak memiliki eror sama sekali saat melakukan validasi maupun di Google Search Console. Jika postingan tidak valid AMP maka blog tersebut tidak akan menampilkan simbol petir (Simbol AMP) di halaman mesin pencari Google.
Cara Supaya Gambar di Postingan Blog Valid AMP
Gambar yang diupload secara default akan terlihat di HTML seperti ini:
<div class="separator" style="clear: both; text-align: center;">
<img alt="alt gambar" border="0" src="https://3.bp.blogspot.com/-v1-eNxBF5W4/WDwrdRGK3JI/AAAAAAAAARA/sAIx0LyRTU4kZ5OJjP0NdYamnCia5jl0ACLcB/s1600/valid-amp.jpg" title="title gambar" /></div>Selanjutnya silahkan teman-teman ganti seperti ini:
<noscript>
<img alt="alt gambar" width="650" height="350" src="LINK-GAMBAR" title="title gambar" />
</noscript>
Cara ini berguna supaya gambar disisipkan di luar postingan, atau bisa juga digunakan sebagai Thumbnail pada sebuah artikel.
Lalu, bagaimana menyisipkan gambar sebagai pendukung di dalam artikel? Seperti yang saya sebutkan di atas, gambar yang disisipkan secara defaul akan terlihat seperti kode paling atas dibagian HTML.
Kemudian, silahkan kalian ganti kodenya seperti di bawah ini:
<amp-img data-original-height="278" data-original-width="476" height="186" src="LINK-GAMBAR" width="320" layout="responsive"></amp-img>Catatan:
layout="responsive" ditambahkan agar lebar serta tinggi gambar dapat menyesuaikan dengan layar gadget yang digunakan oleh pengunjung.
Itulah sedikit tutorial singkat agar gambar postingan blog valid amp. Semoga bermanfaat, ya.
2 comments