Cara Menulis Alt Text yang Benar untuk SEO dan Aksesibilitas

Coba buka website kamu. Klik kanan salah satu gambar. Inspect. Lihat tag <img>-nya.

Ada alt-nya ga?

Kalo ada, isinya apa? alt="image1.jpg"? alt="foto"? Atau lebih parah, alt="" di gambar yang justru paling penting di halaman itu?

Aku udah audit ratusan website Indonesia. Dari UMKM sampai korporat. Pola yang aku temuin hampir seragam: alt text-nya kosong, isinya nama file, atau diisi keyword spam yang ga ada hubungannya sama gambar.

Ini bukan masalah kecil. Alt text itu tiga hal sekaligus: kebutuhan aksesibilitas untuk pengguna screen reader, sinyal SEO untuk Google Images dan Google Lens, dan deskripsi entitas yang dipakai AI untuk memahami konteks halamanmu.

Tiga fungsi. Satu atribut HTML. Dan kebanyakan orang skip.

Apa Itu Alt Text, Sebenarnya

Alt text (alternative text) adalah atribut HTML yang mendeskripsikan isi dan fungsi sebuah gambar. Bentuknya sederhana:

<img src="pompa-sentrifugal.webp" alt="Pompa sentrifugal single-stage dipasang di jalur pipa air bersih pabrik tekstil Cikupa">

Kapan alt text muncul:

• Ketika gambar gagal dimuat (koneksi lambat, URL rusak)
• Ketika pengguna memakai screen reader (tunanetra, low vision)
• Ketika Google mengindeks gambar untuk Google Images dan visual search
• Ketika AI model membaca halaman untuk memahami konteks

Alt text itu bukan caption. Bukan title. Bukan tooltip. Ini teks yang menggantikan gambar ketika gambar ga bisa dilihat. Makanya namanya "alternative".

Kenapa Ini Penting Banget di 2026

Dulu, alt text cuma soal aksesibilitas. Penting, tapi banyak yang anggap opsional. Sekarang beda.

Tiga alasan kenapa alt text jadi kritikal:

1. Google Images masih jadi sumber traffic yang diremehkan

Menurut data Google, Google Images adalah mesin pencari terbesar kedua di dunia. Lebih besar dari YouTube search, lebih besar dari Bing. Ketika gambarmu punya alt text yang deskriptif, peluang muncul di Google Images naik signifikan. Ini traffic gratis yang kebanyakan orang ga kejar.

2. AI butuh konteks teks untuk memahami gambar

ChatGPT, Gemini, Perplexity, mereka semua baca halaman webmu. Tapi ketika mereka ketemu tag <img> tanpa alt text, mereka ga tau gambar itu apa. Konteks hilang. Kalau kamu mau halamanmu dibaca dan dipahami AI, alt text itu bukan opsional.

3. Aksesibilitas bukan charity, ini compliance

WCAG 2.1 (Web Content Accessibility Guidelines) mensyaratkan semua gambar informatif punya alt text. Di banyak negara, ini bukan rekomendasi, ini regulasi. Indonesia belum seketat itu. Tapi kalau kamu bikin website untuk klien internasional atau enterprise, ini mandatory.

Sebelum dan Sesudah: Contoh Alt Text yang Benar

Teori ga cukup. Aku kasih contoh langsung.

Contoh 1: Foto produk

Buruk:

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

Alt kosong. Google ga tau ini gambar apa. Screen reader skip. AI bingung.

Masih buruk:

<img src="pompa.jpg" alt="pompa pompa sentrifugal pompa air murah jual pompa">

Keyword stuffing. Google bisa anggap ini spam. User experience screen reader juga hancur.

Bagus:

<img src="pompa-sentrifugal.webp" alt="Pompa sentrifugal single-stage Ebara 50x40 terpasang di sistem distribusi air bersih">

Deskriptif, spesifik, ada konteks penggunaan. Google paham. Screen reader paham. AI paham.

Contoh 2: Foto orang / headshot

Buruk:

<img src="team.jpg" alt="foto">

Bagus:

<img src="team.jpg" alt="Ibrahim Anwar presentasi di workshop Entity Infrastructure, Jakarta 2025">

Ada siapa, ngapain, di mana, kapan. Ini juga jadi sinyal entitas. Google bisa mengasosiasikan nama dengan wajah dan konteks.

Contoh 3: Infografis atau diagram

Buruk:

<img src="diagram.png" alt="diagram">

Bagus:

<img src="diagram.png" alt="Diagram alur proses verifikasi entitas: dari website ke schema markup ke Knowledge Graph ke AI citation">

Deskripsikan apa yang ditunjukkan diagram itu. Bukan cuma bilang "ini diagram".

Contoh 4: Screenshot UI

Buruk:

<img src="screenshot.png" alt="screenshot">

Bagus:

<img src="screenshot.png" alt="Google Search Console menampilkan peningkatan klik dari Google Images sebesar 340% setelah optimasi alt text">

Deskripsikan apa yang penting dari screenshot itu, bukan cuma fakta bahwa itu screenshot.

Pola Alt Text untuk Berbagai Jenis Gambar

Ini tabel yang bisa kamu bookmark. Setiap jenis gambar punya pola penulisan yang beda.

Satu aturan penting: gambar dekoratif harus punya alt="" (kosong, bukan tanpa atribut). Tanpa atribut alt sama sekali itu error aksesibilitas. Alt kosong string artinya "gambar ini sengaja diabaikan oleh screen reader". Beda banget.

Alt Text Sebagai Deskripsi Entitas

Ini bagian yang jarang dibahas. Dan menurut aku, ini yang paling powerful.

Ketika kamu menulis alt text yang menyebut nama orang, nama organisasi, nama produk, atau nama tempat, kamu sedang memberikan sinyal entitas ke Google. Ini terhubung langsung dengan cara schema markup bekerja sebagai strategi, bukan sekadar teknis.

Contoh. Kamu punya foto di halaman About:

<img src="ibrahim-anwar-speaking.webp" alt="Ibrahim Anwar, Director PT Arsindo Satria Engineering, presentasi tentang entity infrastructure di Jakarta">

Apa yang terjadi:

• Google mengasosiasikan nama "Ibrahim Anwar" dengan wajah, perusahaan, dan topik
• AI model membaca alt text ini sebagai konteks: orang ini bicara tentang entity infrastructure
• Screen reader menyampaikan informasi lengkap ke pengguna tunanetra
• Google Images bisa menampilkan foto ini untuk pencarian "Ibrahim Anwar"

Satu alt text. Empat fungsi. Kamu ga butuh tools mahal atau plugin premium. Cuma butuh menulis dengan benar.

Dan ini nyambung juga dengan cara Open Graph tags bekerja untuk AI. Ketika og:image punya alt text yang konsisten dengan OG title dan description, sinyal ke mesin pencari dan AI jadi lebih kuat. Semuanya saling memperkuat.

Kesalahan Umum yang Aku Temuin di Website Indonesia

Ini bukan teori. Ini dari pengalaman audit langsung.

1. Alt text diisi nama file

alt="DSC_0847.jpg" atau alt="WhatsApp Image 2025-03-15". Ini ga ada gunanya. Bahkan lebih buruk dari kosong, karena screen reader bakal bacain nama file itu keras-keras ke pengguna tunanetra. Bayangin.

2. Semua gambar alt-nya sama

alt="produk kami" di 47 gambar berbeda. Google ga bisa bedain satu gambar dari yang lain. Zero value.

3. Alt text terlalu panjang

Sebagai aturan praktis, usahakan di bawah 125 karakter. Screen reader akan memotong teks yang terlalu panjang, dan pengalaman pengguna jadi buruk. Kalo gambar butuh deskripsi panjang (seperti infografis kompleks), pakai atribut longdesc atau deskripsikan di teks sekitar gambar.

4. Keyword stuffing

alt="jual pompa murah pompa sentrifugal pompa air pompa industri harga pompa". Google secara eksplisit bilang ini bisa bikin sitemu dianggap spam ^[1]. Jangan.

5. Gambar dekoratif dikasih alt deskriptif

Ikon pembatas, ornamen visual, background pattern. Ini harus alt="". Kasih deskripsi justru mengganggu pengguna screen reader karena mereka harus dengerin deskripsi yang ga relevan.

6. Ga ada atribut alt sama sekali

Beda sama alt="". Kalau tag <img> ga punya atribut alt, itu violasi WCAG. Browser dan screen reader akan coba bacain nama file sebagai fallback. Ini pengalaman terburuk.

Cara Praktis: Workflow Menulis Alt Text

Aku ga mau cuma kasih teori. Ini workflow yang aku pakai sendiri.

Step 1: Klasifikasikan gambar

Sebelum nulis alt text, tentukan dulu kategori gambar:

• Informatif: gambar yang menyampaikan informasi (foto produk, diagram, chart). Butuh alt text deskriptif.
• Dekoratif: gambar yang cuma visual (ikon, ornamen, pattern). Pakai alt="".
• Fungsional: gambar yang jadi link atau tombol (logo yang link ke homepage). Alt text = fungsinya, bukan deskripsi visualnya.

Step 2: Tulis seperti kamu menjelaskan ke teman di telepon

Serius. Bayangin kamu lagi teleponan sama teman, dia tanya "gambar apa itu?". Jawaban naturalmu biasanya sudah jadi alt text yang bagus.

"Foto tim kita lagi pasang pompa di pabrik Cikupa minggu lalu" itu jauh lebih baik dari "foto" atau "tim-instalasi-pompa-cikupa-2025.jpg".

Step 3: Sisipkan konteks entitas kalau relevan

Kalau di gambar ada nama orang, perusahaan, produk, atau tempat yang penting untuk SEO, sebutin. Tapi natural. Jangan dipaksain.

Step 4: Cek panjangnya

Target: 50-125 karakter. Cukup deskriptif, ga terlalu panjang. Kalau lebih dari 125 karakter, coba ringkas. Kalau memang ga bisa diringkas (misalnya infografis kompleks), pertimbangkan untuk mendeskripsikan di caption atau paragraf di sekitarnya.

Step 5: Audit berkala

Pakai tools gratis seperti WAVE (wave.webaim.org) atau Lighthouse di Chrome DevTools. Jalankan audit aksesibilitas. Setiap gambar tanpa alt text akan ditandai. Ini bisa jadi checklist rutinmu tiap bulan.

Alt Text dan AI: Hubungan yang Makin Penting

Ini yang bikin topik ini relevan banget di 2026.

Ketika ChatGPT atau Perplexity mengambil informasi dari webmu, mereka membaca HTML. Alt text jadi bagian dari konteks yang mereka proses. Kalau kamu punya halaman tentang "pompa sentrifugal untuk industri tekstil" dan semua gambar alt-nya kosong, AI kehilangan konteks visual.

Tapi kalau alt text-mu deskriptif, AI punya sinyal tambahan:

• "Oh, halaman ini bukan cuma ngomong soal pompa. Ada foto instalasi nyata di pabrik."
• "Ada diagram alur proses yang menunjukkan workflow."
• "Ada foto orang tertentu yang terkait topik ini."

Alt text jadi bridge antara konten visual dan pemahaman mesin. Dan di era AI search, pemahaman mesin itu menentukan apakah kontenmu dikutip atau diabaikan.

Ini prinsip yang sama dengan kenapa website statis lebih baik untuk visibilitas AI. Clean HTML, structured data, deskripsi yang jelas. AI suka konten yang ga ambigu.

Tools untuk Audit Alt Text

Kamu ga perlu bayar mahal. Ini tools gratis yang langsung bisa dipakai:

• Chrome DevTools Lighthouse: buka halaman, tekan F12, tab Lighthouse, jalankan audit Accessibility. Setiap gambar tanpa alt text muncul sebagai error.
• WAVE (wave.webaim.org): masukkan URL, langsung lihat mana gambar yang bermasalah. Gratis, ga perlu install.
• axe DevTools (extension): audit aksesibilitas yang lebih detail, termasuk konteks dan saran perbaikan.
• Screaming Frog (free tier): crawl sampai 500 URL, export daftar semua gambar dengan alt text-nya. Bagus untuk audit situs besar.

Satu tips: jangan pakai AI auto-generator untuk alt text tanpa review manual. AI bisa generate alt text, tapi hasilnya sering generik. "A person standing in front of a building" itu secara teknis benar tapi ga punya nilai SEO atau konteks entitas ^[2]. Selalu review dan edit.

Checklist Alt Text untuk Setiap Halaman

Sebelum publish halaman baru, jalankan checklist ini:

• Semua gambar informatif punya alt text deskriptif (50-125 karakter)
• Semua gambar dekoratif punya alt="" (kosong, bukan tanpa atribut)
• Ga ada alt text yang isinya nama file
• Ga ada keyword stuffing di alt text
• Nama entitas (orang, organisasi, produk) disebut kalau relevan
• Alt text konsisten dengan konteks halaman
• Gambar fungsional (link/button) alt-nya mendeskripsikan fungsi, bukan visual
• Lighthouse accessibility score minimal 90

Ini bukan rocket science. Tapi disiplinnya yang susah. Karena alt text ga keliatan oleh pengunjung biasa, gampang banget dilupain.