Cara Menyisipkan Gambar di Artikel Blog AMP

Cara menyisipkan gambar di artikel blog AMP pastinya berbeda dengan menambahkan gambar pada blog non AMP. Hal tersebut karena pada blog AMP tidak mengenal tag html img. Untuk teman-teman pemula yang masih bingung dengan hal ini, bisa menerapkan cara di bawah ini agar artikel yang diterbitkan tetap valid AMP.

Pentingkah keberadaan sebuah gambar pada suatu artikel blog?

Jawabannya adalah sangat penting. Selain bisa untuk mendukung tujuan yang ingin disampaikan kepada pembaca, juga dapat mempercantik tampilan artikel itu sendiri. Silahkan baca juga cara membuat sitemap valid AMP.

Keberadaan gambar juga dapat mencegah kebosanan pengunjung saat membaca artikel. Atau jika artikel tersebut sifatnya tutorial, dengan adanya gambar pastinya akan sangat membantu pembaca dalam memahami maksud yang disampaikan oleh penulis.

Selain itu jika dilihat dari sisi SEO (Search Engine Optimization), keberadaan sebuah gambar menjadi nilai lebih tersendiri, terutama jika pada gambar tersebut disertakan juga atribut "title" dan "Alt". Jika sebuah blog mempunyai nilai SEO yang bagus maka akan berpeluang besar bertengger pada halaman pertama pencarian.

Jadi sebaiknya jika menerbitkan sebuah artikel di blog, setidaknya artikel tersebut mempunyai minimal satu gambar.

Cara Menyisipkan Gambar di Artikel Blog AMP

Pada dasarnya mengunggah gambar di artikel sangatlah mudah, dan Saya yakin teman-teman semua tidak menemukan kesulitan pada hal ini. Karena memang di blogger ada fitur untuk melakukan unggah gambar.

Namun jika hal tersebut dilakukan begitu saja pada blog AMP maka yang akan terjadi saat artikel tersebut diterbitkan adalah invalid AMP.

Mari kita lihat, pada saat kita upload gambar di blogger maka akan kita dapati kode html standar seperti dibawah ini :

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwEqc701UcC9oFT6eXusVjpb58KIYGvYPUwrIBkHuAvb-_EcPxe-2Vif-XjxBC80zjjMm4S14Di_ItsbQoeG0cpYiBy4CdrL4Dp8OtnRRoSQ7OvPWcpWNv6X8W1oPBsBqiPT7xE2X_zst8/s1600/kontak.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

<img border="0" data-original-height="250" data-original-width="400" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwEqc701UcC9oFT6eXusVjpb58KIYGvYPUwrIBkHuAvb-_EcPxe-2Vif-XjxBC80zjjMm4S14Di_ItsbQoeG0cpYiBy4CdrL4Dp8OtnRRoSQ7OvPWcpWNv6X8W1oPBsBqiPT7xE2X_zst8/s320/kontak.png" width="320" />

</a></div>

Nah jika artikel yang kita buat tersebut di publish atau diterbitkan maka akan terjadi invalid AMP, karena terdapat gambar yang tidak sesuai dengan ketentuan AMP.

Bagaimana cara mengatasinya?

Solusinya agar artikel yang kita publish tersebut valid AMP adalah dengan merubah kode html pada gambar tersebut menjadi seperti di bawah ini :

<div class="img-center">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8gnTnMBrAISlUFVFUT2iWAGr6p9IqypKIVMMi_y_hg76Zx1kl0h3giY0KiQf6iC186rV9JFqAYnp8a_xhRSIe9jn97AGsNn3KkTXSgDv3PVR43DXN7Yqes3ncYroj4etZHUP_WHuk8s5u/s1600/kontak.png">

<amp-img alt="gambar amp" data-original-height="768" data-original-width="1366" height="222"

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8gnTnMBrAISlUFVFUT2iWAGr6p9IqypKIVMMi_y_hg76Zx1kl0h3giY0KiQf6iC186rV9JFqAYnp8a_xhRSIe9jn97AGsNn3KkTXSgDv3PVR43DXN7Yqes3ncYroj4etZHUP_WHuk8s5u/s1600/kontak.png" title="gambar amp" width="400">

</amp-img></a></div>

Atau agar lebih sederhana bisa kita buat seperti rumusan dalam mengunggah gambar di artikel blogger sebagai berikut :

<div class="img-center">

<a href="url">

<amp-img alt="deskripsi" data-original-height="768" data-original-width="1366" height="222" src="url" title="deskripsi" width="400">

</amp-img></a></div>

Nah dengan demikian penanganan pada gambar selesai dan artikel yang diterbitkan bisa valid AMP. Namun jika ternyata thumbnail artikel tidak muncul, kamu bisa menambahkan kode berikut ini :

<noscript><img alt='gambar' src='url'/></noscript>

Dan selengkapnya adalah sebagai berikut :

<div class="img-center">

<a href="url">

<amp-img alt="gambar" data-original-height="768" data-original-width="1366"

height="222" src="url" title="gambar" width="400">

</amp-img></a></div>

<noscript><img alt='gambar' src='url'/></noscript>

Kode di atas bisa kamu simpan di post template di bagian pengaturan dashboard. Tujuannya adalah untuk memudahkan kamu di setiap membuat artikel baru di blog.

Demikianlah uraian singkat cara menyisipkan gambar di artikel blog AMP agar postingan yang diterbitkan bisa valid AMP. Semoga bermanfaat.

Berbagi :