Jika visual dari gambar dapat menarik perhatian pembaca, maka alt text adalah cara kita “mengajari” mesin pencari untuk memahami apa isi gambar tersebut.
Ya! Sepenting itulah penggunaan alt text dalam mengoptimasi blog/artikel kita di mata "Mesin Pencari".
Apa itu Alt Text ?
Lalu apa sebernarnya alt text itu?
Bersumber dari Moz, alt text adalah atribut HTML yang menentukan teks alternatif yang akan ditampilkan untuk menjelaskan maksud dari suatu gambar yang ditampilkan.
Hal ini juga bertujuan untuk menampilkan suatu keterangan, kala browser tidak dapat menampilkan suatu gambar.
Setelah mengetahui bahwa penggunaan alt text pada gambar dalam website. Maka penambahan alt text ini wajib ada sebagai salah satu upaya untuk optimasi SEO.
Lalu bagaimana jika Kita lupa menambahkan alt text karena suatu hal?
Pastinya ada kerugian cukup besar yang akan berdampak pada kualitas website kita. Maka dari itu, ada sebuah trik yang akan saya bagikan menghindari jikalau Kalian lupa menambahkan alt text pada gambar.
Cara Menambahkan Alt text Otomatis
Dengan trik ini sebanyak apapun gamnbar yang Kalian upload pada sebuah artikel akan otomatis ditambahkan atribut alt dan juga title.
Sebelumnya pastikan pada blog Kalian sudah terpasang jQuery. Jika belum silahkan tambahkan kode berikut diatas tag </head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
Script Alt text Otomatis Gambar dari Filename
Berikut ini adalah script yang akan otomatis meng-Generate Alt dan Title pada gambar berdasarkan nama file. Misalnya kucing.jpg, maka atribute pada gambar akan menjadi
<img src='...' alt='kucing' title='kucing'/>.
Untuk mencobanya Kalian hanya perlu menambahkan Script berikut diatas tag </body>.
<script>//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
Script Generate Alt otomatis dari Judul
Berbeda dengan script yang pertama. Kali ini akan menambahkan atribute alt dan title mengikuti judul postingan. Sangat cocok jika Kalian tidak menggunakan terlalu banyak gambar pada artikel.
Untuk mencobanya Kalian hanya perlu menambahkan Script berikut diatas tag </body>.
<script>//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var keyword = $(document).attr('title')
//var filename = $img.attr('src')
$img.attr('title', keyword);
$img.attr('alt', keyword);
});
});
//]]>
</script>
Sekian cara mudah menambahkan alt dan title otomatis pada gambar. Selamat mencoba