Mengganti Script Image Dengan Div Dan Javascript

Untuk membangun sebuah blog yang dinamis sepertinya kita tidak bisa lepas dari image atau gambar, baik gambar untuk background ataupun gambar untuk menunjang isi konten blog. Dengan image atau gambar akan membuat tampilan blog menjadi lebih menarik dan lebih hidup sehingga tidak membuat bosan pengunjung. 

Namun jangan lupa juga untuk betul-betul mengoptimasi gambar-gambar yang kita pasang di blog agar tujuan kita untuk mempercantik tampilan blog malah akhirnya menjadi bumerang karena membebani loading blog. Untuk menampilkan gambar di blog biasanya kita menggunakan script HTML yang tentunya kita semua sudah mengetahuinya seperti di bawah ini.

<img src='URL IMAGE'/>

Agar gambarnya menjadi lebih SEO maka script imagenya perlu ditambahkan alt dan title tag begitu juga dengan dimensinya sehingga akan tampak seperti di bawah ini

<img alt='ALT IMAGE' height='TINGGI IMAGE' src='URL IMAGE' title='TITLE IMAGE' width='LEBAR IMAGE'/>

Terlepas dari situ, kadang kita memerlukan sebuah gambar di dalam blog namun tidak menggunakan script image yang biasa dipakai seperti script image di atas tadi dengan alasan-alasan tertentu. Untuk itu kini saya share cara mengganti script image dengan div dan pemanggilnya javascript.

Trik ini digunakan untuk memanipulasi robot peramban agar image tidak terbaca sebagai gambar. Lho kok agar tidak terbaca sebagai gambar? Untuk jelasnya silahkan lihat gambar di bawah ini

Perhatikan gambar di atas, terdapat dua buah gambar di dalamnya, satu gambar profil yang di atas dan satu lagi gambar postingan di bawahnya. Jika kita menggunakan script image yang biasa <img maka biasanya ketika kita menshare postingan ke sosmed maka yang akan terbaca sebagai thumbnail sharing adalah gambar atau image yang pertama terbaca yaitu image profil yang ditempatkan di sebelah kiri judul postingan bukan gambar di postingannya.

Untuk itu agar gambar profil tidak terbaca sebagai image di postingan, kita perlu memanggilnya dengan div dan javascript seperti di bawah ini.

Ganti script image <img dengan div di bawah ini

<div id="imageDiv"></div>

Dan pakai javascript di bawah ini, bisa disimpan di atas </head> atau </body>

<script type='text/javascript'>

//<![CDATA[

$(window).load(function(){

document.getElementById('imageDiv')

.innerHTML = '<img alt='ALT IMAGE' height='TINGGI IMAGE' src='URL IMAGE' title='TITLE IMAGE' width='LEBAR IMAGE'/>';

});//]]> 

  </script>

Sebagai demonya seperti di bawah ini

Namun terlepas dari itu, kita bisa coba juga gunakan imagenya sebagai background div pembangunnya.