Cara Membuat Alt Text untuk Gambar: Panduan Lengkap dengan Contoh Kode

Gambar : Alt Image

Alt text (atau teks alternatif) adalah deskripsi singkat yang ditambahkan ke elemen gambar dalam HTML untuk memberikan informasi kepada pengguna dan mesin pencari tentang konten gambar tersebut. Alt text sangat penting dalam meningkatkan aksesibilitas situs web, membantu pengunjung dengan gangguan penglihatan memahami gambar, serta mendukung SEO (Search Engine Optimization) agar gambar mudah ditemukan di mesin pencari.

Dalam artikel ini, kita akan membahas cara membuat alt text untuk gambar dengan baik, mengapa penting, dan memberikan contoh kode HTML untuk penggunaan alt text.

Mengapa Alt Text Itu Penting?

1. Aksesibilitas
   Alt text memungkinkan pengguna dengan gangguan penglihatan atau pengguna yang menggunakan pembaca layar untuk memahami gambar yang ada di situs web. Ketika pembaca layar mendeteksi gambar, mereka akan membacakan alt text untuk memberikan informasi mengenai gambar tersebut.

2. SEO
   Mesin pencari seperti Google menggunakan alt text untuk mengindeks gambar. Alt text yang relevan dengan isi gambar akan membantu mesin pencari memahami gambar tersebut dan meningkatkan peringkat SEO halaman Anda.

3. Pengalaman Pengguna
   Jika gambar gagal dimuat karena masalah koneksi atau masalah teknis lainnya, alt text akan muncul sebagai pengganti gambar, memberi tahu pengunjung situs web tentang konten gambar tersebut.

Cara Membuat Alt Text yang Baik

Alt text yang baik harus menggambarkan gambar dengan jelas, tepat, dan relevan. Berikut adalah beberapa tips untuk membuat alt text yang efektif:

1. Deskripsikan Gambar Secara Akurat
   Tulis alt text yang menggambarkan gambar dengan jelas dan tepat. Jangan hanya menuliskan kata kunci tanpa konteks. Pastikan teks tersebut menjelaskan gambar secara ringkas dan akurat.

2. Gunakan Kata Kunci yang Relevan
   Jika gambar terkait dengan produk atau artikel, coba untuk memasukkan kata kunci yang relevan, namun hindari penggunaan kata kunci berlebihan (keyword stuffing). Buatlah teks yang alami.

3. Jangan Menambahkan "Gambar" atau "Foto"
   Sebagai contoh, hindari menulis "Gambar dari sepeda" atau "Foto dari kucing". Pembaca layar atau mesin pencari sudah tahu bahwa itu adalah gambar, jadi cukup deskripsikan apa yang ada di dalam gambar.

4. Sesuaikan Panjang Teks
   Alt text sebaiknya singkat, padat, dan informatif. Idealnya, alt text tidak lebih dari 125 karakter, karena pembaca layar biasanya membacakan hingga panjang ini.

5. Gunakan Alt Text untuk Gambar yang Memiliki Fungsi
   Jika gambar berfungsi sebagai tombol atau elemen interaktif, alt text harus menggambarkan fungsi gambar tersebut. Misalnya, jika gambar adalah tombol untuk "beli sekarang", alt text yang tepat bisa berupa "Tombol beli sekarang".

Contoh Penerapan Alt Text dalam Kode HTML

Sekarang mari kita lihat bagaimana menambahkan alt text pada gambar dalam kode HTML.

Contoh 1: Gambar Produk

Misalnya, Anda memiliki gambar produk sepeda yang ingin ditampilkan di situs web dan memberikan deskripsi gambar tersebut.

<img src="sepeda.jpg" alt="Sepeda gunung merah dengan roda besar dan rangka kuat untuk petualangan outdoor">

Penjelasan:

• Gambar yang ditampilkan adalah sepeda gunung berwarna merah.
• Alt text memberikan deskripsi yang jelas tentang gambar sepeda, dengan menyebutkan ciri-ciri utama produk seperti warna dan kegunaan.

Contoh 2: Gambar dengan Fungsi Tertentu (Tombol)

Misalnya, gambar ini digunakan sebagai tombol "Beli Sekarang" di situs e-commerce.

<img src="beli-sekarang.jpg" alt="Tombol beli sekarang untuk produk sepeda">

Penjelasan:

• Gambar ini adalah tombol, jadi alt text menjelaskan fungsinya, yaitu untuk membeli produk sepeda.
• Penggunaan kata "Tombol" membantu pembaca layar untuk mengetahui fungsi gambar tersebut.

Contoh 3: Gambar Konten

Misalnya, gambar yang menampilkan pemandangan alam.

<img src="pemandangan-alam.jpg" alt="Pemandangan alam dengan pegunungan hijau dan danau biru di tengah hutan">

Penjelasan:

• Alt text menggambarkan elemen-elemen utama dalam gambar, seperti pegunungan hijau, danau biru, dan hutan, untuk memberikan gambaran yang lebih lengkap kepada pengguna dan mesin pencari.

Contoh 4: Gambar yang Tidak Penting (Empty Alt Attribute)

Kadang-kadang, gambar tidak memberikan informasi penting dan tidak perlu dijelaskan. Misalnya, gambar dekoratif atau gambar yang hanya berfungsi untuk estetika. Dalam hal ini, alt text bisa dikosongkan (alt="").

<img src="dekorasi.jpg" alt="">

Penjelasan:

• Gambar ini hanya untuk keperluan dekorasi, sehingga tidak perlu memberikan deskripsi yang panjang atau bahkan alt text sama sekali.
• Penggunaan alt="" memberi tahu pembaca layar bahwa gambar ini tidak membawa informasi yang perlu disampaikan.

Best Practices untuk Menulis Alt Text

1. Fokus pada Konteks: Alt text harus relevan dengan konteks gambar di halaman. Gambar yang berfungsi untuk informasi, seperti grafik atau diagram, harus dijelaskan secara rinci.
2. Gunakan Kalimat yang Sederhana dan Jelas: Pastikan alt text mudah dipahami dan tidak terlalu teknis atau rumit.
3. Hindari Kata-Kata yang Tidak Perlu: Jangan tambahkan kata-kata seperti "Gambar" atau "Foto", karena ini sudah jelas.
4. Jangan Lupa Memperbarui Alt Text: Saat gambar diubah, pastikan untuk memperbarui alt text agar tetap relevan dengan gambar yang ditampilkan.

Alt text adalah elemen yang sangat penting untuk membuat situs web Anda lebih inklusif, ramah SEO, dan memberikan pengalaman yang lebih baik bagi pengunjung yang memiliki gangguan penglihatan. Dengan mengikuti panduan dan contoh kode HTML di atas, Anda bisa memastikan gambar di situs web Anda tidak hanya terlihat bagus, tetapi juga berguna bagi semua orang, baik pengguna maupun mesin pencari.

Jadi, jangan lupa untuk selalu menambahkan alt text yang jelas dan deskriptif setiap kali Anda menambahkan gambar di situs web Anda!

Penulis : Yazit

Editor : Hanna