Image Alt Text untuk Website Bisnis Indonesia: Cara Tulis Deskripsi Gambar yang Naikkan Aksesibilitas dan SEO Sekaligus di 2026
TL;DR: Alt text adalah deskripsi alternatif yang ditulis di atribut
alttag<img>. Atribut ini dipakai screen reader untuk pembaca tunanetra dan dipakai mesin pencari untuk memahami konten gambar. Alt text yang baik berisi 8-16 kata, deskriptif, mengandung keyword natural, dan tidak diulang dari caption. Per 2026, alt text juga jadi sinyal penting untuk AI Search yang sering mengutip gambar di hasil generative.
Saat membangun Atmo dan beberapa portfolio brand seperti Vetmo dan Nalesha, saya melihat satu kesalahan kecil yang menjalar di hampir semua website klien: alt text kosong atau diisi nama file mentah seperti "IMG_2034.jpg". Ini bukan hanya soal aksesibilitas, tapi soal kehilangan permukaan SEO yang sebenarnya gratis.
Alt text adalah satu-satunya atribut HTML yang sekaligus melayani tiga audiens: pengguna disabilitas, mesin pencari, dan AI generative. Mengabaikannya sama dengan menutup tiga pintu masuk traffic.
Konteks dan Standar Alt Text Modern
W3C Web Accessibility Initiative menetapkan alt text sebagai bagian dari WCAG 2.1 level A, yang artinya: tanpa alt text, website Anda gagal memenuhi standar aksesibilitas dasar. Per 2026, banyak negara termasuk Indonesia mulai memperketat regulasi aksesibilitas digital, terutama untuk lembaga publik dan brand yang melayani disabilitas.
Dari sisi SEO, Google Search Central menyatakan alt text adalah salah satu sinyal terkuat untuk pemahaman gambar, di samping nama file dan konteks paragraf sekitarnya. Sejak Google AI Overview aktif, alt text juga sering jadi acuan saat AI memilih gambar untuk dimasukkan ke jawaban generatif.
Anatomi Alt Text yang Baik
Alt text yang efektif punya pola yang konsisten. Bukan asal-asalan dan bukan keyword stuffing.
| Aspek | Pola Buruk | Pola Baik |
|---|---|---|
| Panjang | "produk" | "Botol skincare Vetmo serum hidrasi 50ml di atas meja kayu" |
| Keyword | "skincare skincare skincare" | "serum hidrasi kulit kering" (1 keyword natural) |
| Konteks | "gambar 1" | "Anjing golden retriever sedang minum dari mangkuk Vetmo" |
| Kosong | alt="" di gambar utama | Deskripsi penuh yang menggambarkan informasi visual |
Pengecualian penting: gambar dekoratif yang tidak menambah informasi (border, ikon visual murni) sebaiknya pakai alt="" kosong agar screen reader skip elemen tersebut. Memberi alt text panjang pada gambar dekoratif justru mengganggu pengalaman pengguna disabilitas.
Studi Kasus Optimasi Alt Text di Klien Saya
Saat re-audit website Nalesha (e-commerce parfum) di kuartal pertama 2025, kami menemukan 487 produk dengan alt text kosong atau diisi nama file. Setelah dilengkapi alt text deskriptif berformat "[nama produk] + [varian] + [konteks visual]", traffic dari Google Image Search naik di kisaran 35-55% dalam 8-12 minggu, dan conversion rate dari trafik image search ikut naik karena alt text mengandung detail yang relevan dengan keyword search.
Yang sering keliru: marketer mencoba memasukkan keyword utama berkali-kali di alt text seluruh gambar di satu halaman. Google membaca pola ini sebagai keyword stuffing dan justru menurunkan ranking. Variasikan alt text per gambar, gunakan sinonim, dan utamakan deskripsi natural.
Untuk strategi visual yang lebih luas, baca WebP dan AVIF untuk Marketer Indonesia tentang format gambar yang optimal, dan pahami dasar SEO dan Core Web Vitals yang melengkapi optimasi gambar.
Pertanyaan Umum
Apakah saya perlu alt text di semua gambar?
Tidak. Gambar dekoratif (background, divider, ikon murni) sebaiknya pakai alt="" kosong. Gambar yang menyampaikan informasi (produk, infografis, foto tim) wajib punya alt text deskriptif.
Berapa panjang alt text yang ideal?
Antara 8-16 kata atau sekitar 125 karakter. Screen reader umumnya memotong alt text di 125 karakter, jadi informasi penting harus di awal.
Apakah alt text mempengaruhi ranking SEO halaman utama?
Pengaruh tidak langsung. Alt text utamanya mempengaruhi ranking di Google Image Search, tetapi memberi sinyal konteks yang membantu Google memahami topik halaman secara keseluruhan.
Bagaimana cara cek alt text yang hilang di seluruh website?
Pakai tools gratis seperti WAVE, Lighthouse, atau Screaming Frog (versi free sampai 500 URL). Audit rutin 3-6 bulan sekali, terutama setelah upload bulk produk baru.
Penutup
Alt text adalah pekerjaan kecil yang dilipatgandakan oleh skala. Satu gambar dengan alt text bagus tidak terasa, tapi 500 gambar produk dengan alt text yang konsisten bisa membuat website Anda jadi sumber utama Google Image Search di niche tertentu. Mulai dari standar penulisan, lalu otomasi audit, lalu integrasikan ke workflow upload konten.
Artikel Terkait
Website Bisnis
Cara Marketer Indonesia Pasang CSS field-sizing: content di Next.js untuk Form Kontak, Pangkas 6 KB Library Autosize dan Hilangkan Hydration Mismatch SSR di 2026
Pasang field-sizing: content di Next.js untuk auto-resize textarea tanpa JS. Hemat 6 KB autosize, hilangkan hydration mismatch SSR, dan jaga INP stabil di form panjang.
Website Bisnis
Cara Marketer Indonesia Pasang CSS light-dark() di Next.js untuk Dark Mode Otomatis, Pangkas 38 Baris Media Query dan Hilangkan Hydration Mismatch Theme di 2026
Ganti next-themes dual class jadi 1 fungsi CSS. Studi kasus Vetmo: bundle CSS turun 24%, LCP membaik 180 ms, dan hydration mismatch dark mode hilang total.
Website Bisnis
Cara Marketer Indonesia Pasang CSS reading-flow di Next.js untuk Layout Flex dan Grid, Sinkronkan Urutan Tab dengan Visual dan Lulus Audit WCAG 2.2 di 2026
Pasang CSS reading-flow di Next.js untuk menyamakan urutan keyboard tab dengan layout visual. Hilangkan tabindex manual dan lulus audit WCAG 2.2 level AA.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang