16 April 2019

Tips Agar Gambar di Postingan Blog Valid AMP

source: alinuxblog.com
Cara Agar 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 maka 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.

Itulah sedikit tutorial singkat agar gambar postingan blog valid amp. Semoga bermanfaat, ya.

2 comments

  1. Kepoin web abe. Sukak sama gambar gambarnya... Suka sama tampilan nya nyaman bgt

    ReplyDelete
    Replies
    1. Wah.. makasih banyak apresiasinya, mbak Ummu. Saya belum lama ngeblog, masih pemula banget. Semoga ke depannya bisa lebih baik lagi konten-konten dan tampilannya :)

      Delete


EmoticonEmoticon