16 April 2019

Tips Agar Gambar di Postingan Blog Valid AMP


Cara Supaya Gambar di Postingan Blog Valid AMP (Accelerated Mobile Pages) -Teman-teman, mengunggah sebuah gambar di postingan blog supaya valid AMP memerlukan perubahan kode secara manual, lho.

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 makan blog tersebut tidak akan menampilkan simbol petir (Simbol AMP) di halaman mesin pencari Google.

Cara agar supaya gambar yang di upload kedalam artikel blog valid amp.

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.

0 komentar

Post a Comment