Script Title dan Alt Gambar Blog Otomatis

Script Title dan Alt Gambar Blog Otomatis

Cara anti lupa menambahkan Alt text pada gambar dengan script otomatis.
Script Title dan Alt Gambar Blog Otomatis

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

Baca Juga

Ad

hello world('print')

7 komentar

  1. mantap mas,jadi gak repot repot lagi tambah judul satu satu lagi👍
    1. Siap mas. Harus disesuaikan jg penggunaanya. Semoga bermanfaat
  2. Boleh lah kapan-kapan diterapin di blog saya hehehe, mas bisa request tutorial buat background seperti plus Ui di median Ui kayak di sudutnya ada segitiga gitu 🙏😁
    1. Boleh mas. Yang mana ya? yg 1 buah ga pindah2 itu ya?
    2. Iya mas
  3. Oke. Malam ini upload ya mas. hhe
  4. kek pernah baca di blog lain awkkwwk
Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code

Ad