Cara Menyelipkan Gambar Postingan Blog AMP dan Non AMP

Menyelipkan gambar pendukung pada sebuah postingan merupakan teknik yang bagus agar penjabaran atau penjelasan lebih mudah dipahami oleh pengunjung blog dengan adanya gambar pendukung.

Pada umumnya ketika membuat sebuah postingan dengan menyelipkan atau menambahkan gambar rata-rata menggunakan metode compos. Namun tahukah Anda bahwa membuat postingan dengan gambra pendukung melalui metode compos itu kurang tepat dan SEO. Karena akan banyak kode html gambar yang perlu diload ketika postingan tersebut diakses oleh pengunjung. Metode tersebut juga tidak cocok untuk pengguna template AMP karena secara otomatis postingan akan bermasalah adanya error dan tidak valid AMP. Karena AMP sendiri pada dasarnya mengutamakan kecepatan fastloading halaman blog ketika diakses oleh pengunjung, jadi jika berat dan slow bukan AMP namanya.

Disini Admin akan berbagi tips cara memasang gambar pada postingan agar postingan tersebut tetap ringan dan fastloading ketika diakses oleh pengunjung, dan metode ini sebenarnya lebih tepat diterapkan pada template AMP namun bagi Anda pengguna Non AMP yang ingin menerapkannya juga tidak masalah justru baik dan bagus agar kualitas SEO konten postingan Anda lebih baik.

Pertama-tama buatlah postingan pada mode Compos seperti biasanya hingga selesai termasuk Add gambar yang diselipkan pada postingan.

Setelah itu beralihlah ke mode HTML dan perhatikan code yang Admin beri tanda kotak merah adalah tempat untuk Add kode Gambar yang akan kita hapus dan ganti dengan source kode pamasangan gambar Blog AMP.

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

Ganti dengan cara replace (timpah) kode tersebut di atas dengan kode berikut ini:

 
<div class="img-width-500 img-center">
<amp-img src="---------------------"
      width="1000"
      height="600"
      layout="responsive"
      alt="an image"></amp-img>
</div>

Angka 500 adalah besar ukuran gambar, semakin kecil angka maka ukuran gambar akan menjadi kecil dan sebaliknya. Sementara width dan height adalah ukuran panjang dan lebar gambar bisa disesuaikan dengan selera Anda menyesuaikan ukuran lebar dan panjang gambar sebenarnya sehingga hasilnya seperti gambar berikut ini:
Copy link gambar lalu pastekan pada area penempatan link "---------" kemudian hapus kode yang source gambar asli yang Admin beri tanda kotak warna hijau sehingga hasilnya seperti gambar berikut ini:
Klick Publikasikan atau anda bisa kembali ke mode Compos dan hasilnya seperti gambar berikut ini, tampak ada beberapa spasi kosong yang sebenarnya adalah area gambar namun karena sudah dirubah kodenya gambar tidak tampil dalam mode compos, Klick publikasikan jika sudah dirasa lengkap penyusunan postingannya.
Hasilnya seperti gambar berikut ini, gambar sudah muncul dalam postinga namun dalam mode settingan AMP sehingga lebih ringan ketika diakses, efeknya blog menjadi lebih fast loading dan score SEO pun meningkat lebih baik

Apabila setelah Anda publikasikan jarak antar gambar atau teks lebih dari satu spasi sehingga terlihat kurang enak dipandang anda bisa melakukan edit ulang postingan dengan mode HTML kemudian perhatikan posisi dimana letak area yang kelebihan sepasi. Cari kode </br> kode ini adalah pengganti spasi pada mode compose, apabila ditemukan dua kode tersebut berdekatan sejajar hapus salah satu seperti pada gambar berikut ini:


Kesimpulan: Untuk mengurangi beban load gambar pada postingan agar blog menjadi fast respon dan loading salah satunya adalah dengan mengurangi pemakaian kode HTML gambar yang dipublikasikan dalam mode compos menggunakan source kode khusus publikasi gambar AMP dalam mode HTML. Sehingga blog akan menjadi lebih ringan diakses efeknya score SEO Blog dimata google pun meningkat.