Kosakata
Alt Text
Alt text adalah teks deskripsi gambar — penting untuk accessibility, SEO, dan fallback saat gambar gagal load.
Definisi
Alt text (alternative text / alt attribute) adalah teks deskriptif gambar di HTML <img alt="...">.
Fungsi utama:
- Screen reader baca untuk user tunanetra (accessibility)
- Google Images SEO — bantu Google paham gambar
- Fallback kalau gambar gagal load
- Context untuk AI / bot / crawler
Contoh
❌ Buruk (tidak deskriptif):
<img src="hero.jpg" alt="image" />
<img src="hero.jpg" alt="" /> <!-- kecuali decorative -->
❌ Keyword stuffing:
<img alt="seo seo seo digital marketing seo indonesia seo murah" />
✅ Bagus (deskriptif, natural):
<img alt="Dashboard Google Search Console menunjukkan 300% growth traffic dalam 6 bulan" />
Best Practices
1. Deskriptif, tapi ringkas
- Target: 1 kalimat (~125 karakter)
- Cukup untuk screen reader paham, tidak lebih
2. Include keyword kalau natural
- Untuk gambar produk / tutorial — wajar include keyword relevan
- Jangan force — Google lebih pintar dari dulu
3. Deskripsikan fungsi, bukan visual
- ❌ "Panah biru ke kanan"
- ✅ "Tombol Next untuk ke langkah berikutnya"
4. Decorative image → alt kosong
Gambar yang cuma hiasan (misal border, separator) pakai alt="". Jangan hilangkan atributnya — harus ada.
5. Image with text in it
Kalau gambar punya teks (poster, infographic), alt text harus repeat teks itu — untuk screen reader.
Di Next.js (Image Component)
import Image from "next/image";
<Image
src="/hero.jpg"
alt="Dashboard analytics atmo.co.id menunjukkan growth bulanan"
width={1200}
height={600}
/>
Alt wajib untuk component <Image> — TypeScript akan error kalau tidak ada.
Audit Alt Text di Website
Tools gratis
- WAVE Browser Extension — highlight missing/bad alt
- Axe DevTools — lighthouse accessibility audit
- Screaming Frog (free for < 500 URLs) — bulk audit
Manual check
- Chrome DevTools → Lighthouse → Accessibility
Kenapa Penting untuk SEO
- Google Images traffic — bisa jadi 10-30% dari total organic traffic untuk bisnis visual
- Ranking factor (minor, tapi ada)
- Core Web Vitals — alt-text improve "accessibility score"
- Voice search — Google bisa serve gambar dengan alt yang match query
Hukum & Compliance
Di banyak negara (US — ADA, EU — EN 301 549), alt text wajib untuk website bisnis. Di Indonesia belum strict tapi tren menuju sana.