Meningkatkan Peringkat Google dengan Atribut Alt Gambar Otomatis

Menambahkan Alt Gambar Otomatis dengan JavaScript

Alt gambar adalah elemen penting dalam pengembangan web yang tidak hanya meningkatkan aksesibilitas tetapi juga membantu optimasi SEO. Dengan menyertakan alt text yang deskriptif dan relevan, Anda memastikan bahwa semua pengguna, termasuk mereka yang menggunakan teknologi bantu, dapat memahami konten gambar dengan baik. Selain itu, alt text juga berperan dalam meningkatkan visibilitas situs Anda di mesin pencari, sehingga menjadi praktik yang sangat dianjurkan dalam desain web modern.

Menambahkan Alt Gambar Otomatis untuk SEO

1. Menggunakan Javascript

1. Buka Dashboard Blogger.
2. Pada Dashboard Blogger, klik Tema.
3. Kemudian Klik Edit HTML.
4. Cari Bagian </body> dan tempelkan kode berikut diatasnya

<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/
var titleforalt = document.title;
document.querySelectorAll('#postBody img').forEach(function(imageatr) {
  imageatr.setAttribute('alt', titleforalt);
  imageatr.setAttribute('title', titleforalt);
});
/*]]>*/</script>
</b:if>

Atau anda juga bisa menggunakan kode berikut untuk mengambil alt menggunakan judul postingan:

<b:if cond='data:view.isPost'>
<script>
document.querySelectorAll('#postBody img').forEach(function(imageatr) {
  imageatr.setAttribute('alt', '<data:blog.pageName/>');
  imageatr.setAttribute('title', '<data:blog.pageName/>');
});
</script>
</b:if>

Lalu simpan template.

2. Menggunakan JQuery

Pastikan template Anda sudah terdapat JQuery Library. Contohnya seperti berikut:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'/>

Adapun langkah lanjutannya adalah sebagai berikut:

1. Sama seperti langkah di atas, langkah pertama adalah silakan buka Dashboard Blogger.
2. Pada Dashboard Blogger, klik Tema.
3. Kemudian klik Edit HTML.
4. Cari Bagian </head> lalu tempelkan kode berikut diatasnya

<b:if cond='data:view.isPost'>
  <script>/*<![CDATA[*/
  $(document).ready(function() {
  $('#postBody 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>
</b:if>

Lalu simpan template.

Penutup

Alt gambar merupakan atribut HTML yang menyediakan deskripsi teks alternatif untuk gambar. Manfaatnya meliputi peningkatan aksesibilitas, optimasi SEO, penggantian saat gambar tidak dimuat, dan penjelasan konteks. Pentingnya alt gambar terletak pada kepatuhan terhadap standar web, peningkatan pengalaman pengguna, dan pencegahan hilangnya informasi penting.

Dengan menambahkan Alt otomatis ini diharapkan dapat meningkatkan Optimasi SEO inline pada template Anda, namun Anda tetap disarankan untuk menambahkan atribut alt secara manual pada gambar di postingan.