Selasa, September 26, 2017

Cara Menambahkan Gambar Pada Postingan Blog Yang Menggunakan Template AMP

Cara menambahkan gambar pada postingan blog yang menggunakan template AMP - Sejak Google merekomendasikan kepada para webmaster untuk meningkatkan kecepatan loading template khusus untuk pengguna seluler yaitu dengan menggunakan template AMP (Accelerate Mobile Page), maka mulai bermunculan situs-situs yang menggunakan template AMP.

Namun sayangnya masih banyak para pengguna terutama yang masih pemula, yang belum menguasai sepenuhnya tentang bagaimana struktur HTML dari template AMP tersebut, sudah terlanjur tertarik dan terburu-buru menggunakannya, sehingga sering kali saya temukan ketika melakukan blog walking, banyak situs/blog yang menggunakan template AMP tapi tidak valid AMP.

Dari sekian banyak stus/blog yang menggunakan template AMP yang saya kunjungi dan belum valid AMP nya alias masih banyak error, setelah saya amati ternyata kebanyakan yang menyebabkan tidak validnya AMP di situs-situs tersebut, karena kesalahan saat memasukan gambar kedalam postingan blog atau kedalam artikel blog.

Nah oleh sebab itu, berbekal sedikit pengalaman dan kebetulan saya juga mengelola 2 buah situs blog yang menggunakan template AMP dan alhamdulillah sudah valid, saya ingin berbagi informasi bagaimana cara yang benar dalam memasukan atau menambahkan gambar pada postingan blog yang menggunakan template AMP agar tidak terjadi error yang menyebabkan tidak valid AMP.

Cara menambahkan gambar pada postingan blog yang menggunakan template AMP

Setiap kali kita membuat artikel, tentu paling tidak kita akan menambahkan 1 buah gambar thumbnail sebagai pemanis, pelengkap dan juga sebagai salah satu upaya teknis SEO onpage, apalagi kalau artikel yang dibuat tersebut membahas tentang tutorial, sudah pasti akan membutuhkan beberapa gambar untuk memperjelas dari tutorial tersebut.

Untuk blog yang templatenya non AMP, tentu tidak jadi soal, paling hanya perlu mengkompres gambar-gambar yang akan di upload supaya tidak terlalu besar, tapi beda halnya dengan template AMP, untuk ukuran gambar tidak jadi soal, tapi setelah gambar tersebut dimasukan kedalam artikel, akan jadi persoalan kalau tidak di atur dengan benar.

Baik langsung saya ke pembahasa pokok yaitu bagaimana cara yang benar memasukan atau menambahkan gambar pada artikel untuk situs blog yang menggunakan template AMP.

Disini saya akan memberikan 2 contoh cara memasukan gambar pada postingan, yang diantaranya:

  1. Gambar untuk thumbnail
  2. Gambar untuk tutorial

1. Cara memasukan gambar untuk thumbnail di template AMP


Seperti biasa ketika kita mau menambahkan gambar yaitu dengan cara mengklik menu Insert Image yang ada di menu postingan blogger. Setelah gambar tersebut masuk kedalam artikel, silahkan klik HTML postingan yang ada di pojok kiri atas lalu perhatikan HTML dari gambar yang masuk tersebut.

Contohnya seperti HTML gambar pada artikel saya ini, kalau dilihat dibagian HTML maka bentuknya seperti ini.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-dz5KpUBtqT0/WclDWvVmhyI/AAAAAAAANrQ/kvEt-HrmOIoy4Pakx8olDpe_NxQvEot9gCLcBGAs/s1600/Cara-menambahkan-gambar-pada-postingan-di-template-amp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara menambahkan gambar pada postingan blog yang menggunakan template AMP" border="0" data-original-height="336" data-original-width="448" height="240" src="https://2.bp.blogspot.com/-dz5KpUBtqT0/WclDWvVmhyI/AAAAAAAANrQ/kvEt-HrmOIoy4Pakx8olDpe_NxQvEot9gCLcBGAs/s320/Cara-menambahkan-gambar-pada-postingan-di-template-amp.png" title="Cara menambahkan gambar pada postingan blog yang menggunakan template AMP" width="320" /></a></div>

Yang merah adalah URL dari gambar itu sendiri, yang biru adalah Alt image dan title image.

Nah gambar tersebut tidak akan valid AMP karena terdapat kode style, sementara untuk template AMP tidak boleh menggunakan kode style.

Agar valid AMP, kita harus menggunakan kode yang memang khusus untuk gambar di template AMP.

Kode nya seperti ini

<noscript>
<img src="URL GAMBAR DISINI" width="650" height="350" alt="ALT IMAGE DISINI"/>
</noscript>

Jadi kita tinggal copy URL gambar lalu ganti tulisan URL GAMBAR DISINI dengan URL dari gambar, dan copy Alt image lalu ganti tulisan ALT IMAGE DISINI dengan alt image yang di ambil dari alt image.

Jadi hasilnya akan seperti ini

<noscript>
<img src="https://2.bp.blogspot.com/-dz5KpUBtqT0/WclDWvVmhyI/AAAAAAAANrQ/kvEt-HrmOIoy4Pakx8olDpe_NxQvEot9gCLcBGAs/s1600/Cara-menambahkan-gambar-pada-postingan-di-template-amp.png" width="650" height="350" alt="Cara menambahkan gambar pada postingan blog yang menggunakan template AMP"/>
</noscript>

Untuk width dan height silahkan sesuaikan dengan ukuran template masing-masing.

2. Cara memasukan gambar untuk tutorial atau lainnya di template AMP

Untuk menambahkan gambar tutoeial atau gambar lainnya, gunakan kode berikut:

<amp-img
      alt="ALT IMAGE DISINI"
      height="350"
      layout="responsive"
      on="tap:lightbox1"
      role="button"
      src="URL GAMBAR DISINI"
      tabindex="0"
      width="650"></amp-img>

Hasilnya akan seperti ini

<amp-img
      alt="Cara menambahkan gambar pada postingan blog yang menggunakan template AMP"
      height="350"
      layout="responsive"
      on="tap:lightbox1"
      role="button"
      src="https://2.bp.blogspot.com/-dz5KpUBtqT0/WclDWvVmhyI/AAAAAAAANrQ/kvEt-HrmOIoy4Pakx8olDpe_NxQvEot9gCLcBGAs/s1600/Cara-menambahkan-gambar-pada-postingan-di-template-amp.png"
      tabindex="0"
      width="650"></amp-img>

Kalau anda memiliki situs/blog yang menggunakan template AMP dan masih banyak yang error di bagian gambar, silahkan edit semua postingan gambar dengan kode yang saya terangkan diatas.

Mungkin itu saja pembahasan singkat mengenai cara yang benar dalam menambahkan atau memasukan gambar pada postingan/artikel khusus situs/blog yang menggunakan template AMP. Kurang lebihnya saya mohon maaf dan semoga bermanfaat.

2 comments

Wah keren mas udah main pake template AMP. Ane baru nyobain banyak banget yang mesti dibenahin. Selain gambar yang paling banyak kena di bagian Java. Mana template baru beli lagi. Apa benar AMP harus blog yang baru mas? Ga bisakah template blog yang digunain saat ini bisa di modif jadi AMP?

Tidak selalu harus blog baru, blog lama saja bisa asal sabar edit semua postingan, ada alat yang namanya AMP Validator untuk mengecek valid dan tidaknya, dan memudahkan kita untuk mengetahui bagian mana yang masing error. Terima kasih sudah berkunjung mas bos

Silahkan berkomentar dengan sopan dan tidak meninggalkan link aktip.

Terima Kasih.

EmoticonEmoticon