Alt Text Adalah? Manfaat, Fungsi dan Contoh Implementasi | Roofel

Alt text, atau teks alternatif, adalah deskripsi singkat yang ditambahkan ke atribut gambar dalam kode HTML. Teks ini berfungsi untuk memberikan informasi tentang isi gambar ketika gambar tersebut tidak dapat ditampilkan atau diakses oleh pengguna. Dalam kode HTML, alt text ditulis seperti berikut:

    <img src="gambar.jpg" alt="Deskripsi gambar">

Manfaat dan Fungsi Alt Text

Aksesibilitas:

• Untuk Pengguna dengan Disabilitas Visual: Alt text membantu pengguna yang menggunakan screen reader, yaitu perangkat lunak yang membacakan teks di layar, untuk memahami konten gambar. Dengan adanya alt text, informasi visual dapat diakses oleh semua pengguna, termasuk mereka yang tidak bisa melihat gambar tersebut.
• Saat Gambar Tidak Dimuat: Jika gambar tidak dimuat karena koneksi internet yang lambat atau masalah lainnya, alt text akan muncul sebagai pengganti gambar, memberikan konteks tentang apa yang seharusnya terlihat.

SEO (Search Engine Optimization):

• Meningkatkan Peringkat di Mesin Pencari: Mesin pencari seperti Google tidak dapat melihat gambar seperti manusia, tetapi mereka dapat membaca alt text. Dengan menambahkan alt text yang relevan dan deskriptif, gambar pada halaman web Anda lebih mudah ditemukan dan diindeks oleh mesin pencari, meningkatkan visibilitas situs Anda.
• Optimasi Kata Kunci: Alt text memberikan peluang untuk memasukkan kata kunci yang relevan, membantu meningkatkan relevansi halaman web terhadap kata kunci tertentu.

Baca Artikel tentang Indikator keberhasilan dalam SEO

Pengalaman Pengguna yang Lebih Baik:

• Konten yang Lebih Informatif: Alt text memberikan informasi tambahan yang dapat memperkaya konten dan memberikan pemahaman yang lebih baik bagi semua pengguna.
• Interaksi yang Lebih Baik dengan Mesin Pencari: Gambar dengan alt text yang baik dapat muncul di hasil pencarian gambar, meningkatkan peluang interaksi pengguna dengan konten Anda.

Bagaimana Menulis Alt Text yang Efektif

• Jelas dan Deskriptif: Tulis alt text yang menjelaskan apa yang terjadi dalam gambar. Contohnya, untuk gambar seorang anak bermain bola di taman, alt text bisa berupa "Seorang anak laki-laki bermain bola di taman pada hari yang cerah".
• Relevan dengan Konten: Pastikan alt text sesuai dengan konteks halaman web tempat gambar tersebut berada. Jangan memasukkan alt text yang tidak relevan hanya untuk memasukkan kata kunci.
• Hindari Pengulangan: Jangan menulis "gambar dari" atau "foto dari" dalam alt text, karena ini sudah jelas dari konteks penggunaan atribut alt. Langsung deskripsikan isi gambarnya.
• Kata Kunci yang Tepat: Gunakan kata kunci yang relevan dengan gambar dan konten halaman, tetapi hindari "keyword stuffing" (memasukkan terlalu banyak kata kunci).

Contoh Implementasi Alt Text

Gambar Produk di Situs E-commerce:

    <img src="sepatu-lari.jpg" alt="Sepatu lari Nike Air Zoom warna biru ukuran 42">

Contoh Implementasi Alt Text

• Alt text ini memberikan informasi yang cukup tentang jasa SEO Jakarta sehingga pengguna dan mesin pencari memahami apa yang ditawarkan.

Gambar Informasi Grafis (Infografis):

    <img src="/jasa-seo-jakarta.webp" alt="jasa seo terbaik di jakarta dengan portofolio terpercaya">

• Deskripsi ini membantu pengguna memahami isi grafik tanpa perlu melihatnya.

Dengan memahami dan mengimplementasikan alt text dengan benar, Anda tidak hanya meningkatkan aksesibilitas situs web Anda tetapi juga meningkatkan peluang untuk lebih baik dalam peringkat mesin pencari dan memberikan pengalaman pengguna yang lebih baik.