Apa itu Alt Text? Fungsi dan Cara Penulisannya

Pertama kali mendengar website sendiri dibacakan screen reader, saya malu sebagai orang SEO. Halaman produk terbuka, dan yang terdengar hanya "gambar, gambar, gambar".

Lebih dari lima tahun saya mengelola SEO bisnis ritel online-offline, sibuk mengejar algoritma. Ironisnya, foto produk yang dibayar mahal tidak bisa "dilihat" Google maupun pembeli tunanetra.

Tulisan ini membahas temuan audit itu dan kenapa SEO serta aksesibilitas ternyata satu pekerjaan. Ada juga cara menulis alt text yang jujur, lengkap dengan contoh dari katalog sendiri.

Apa itu Alt Text?

Alt text adalah teks deskripsi yang ditempelkan pada gambar lewat atribut alt di HTML. Teks ini menjelaskan isi gambar bagi siapa pun yang tidak bisa melihatnya.

Dalam kode, bentuknya seperti <img src="sepatu.jpg" alt="Sneakers kanvas putih sol karet">. Atribut alt gambar inilah yang dibaca Google dan screen reader.

Banyak orang mengira pengertian alt text sebatas urusan SEO. Padahal fungsi aslinya lahir dari kebutuhan aksesibilitas.

Fungsi Alt Text

Secara teknis, alt text menjalankan tiga peran saat halaman dimuat.

• Pertama, screen reader membacakan alt text kepada pengguna tunanetra. Tanpa itu, yang terdengar hanya kata "gambar" atau nama file.
• Kedua, alt text tampil sebagai pengganti saat gambar gagal dimuat. Koneksi lambat atau file rusak tidak membuat informasinya hilang.
• Ketiga, crawler Google memakai alt text untuk memahami isi gambar. Teks ini jadi salah satu sinyal penting di Google Images.

Mengapa Alt Text Penting?

Manfaatnya lebih luas dari sekadar ranking, dan menyentuh bisnis secara langsung.

1. Meningkatkan Aksesibilitas

Pengguna tunanetra berbelanja online lewat screen reader seperti NVDA, JAWS, atau VoiceOver. Mereka bergantung penuh pada teks untuk tahu isi halaman.

Foto produk tanpa alt text membuat mereka buta informasi. Calon pembeli pergi bukan karena tidak mau, tapi karena tidak tahu.

2. Search Engine Optimization (SEO)

Google bisa menganalisis gambar, tapi tetap butuh teks untuk memahami konteksnya. Alt text untuk SEO membantu menghubungkan gambar dengan topik halaman.

Panduan Google menyebut alt text dipakai bersama computer vision dan isi halaman. Artinya, teks ini ikut menentukan apakah gambar relevan dengan pencarian.

3. Meningkatkan User Experience

Gambar tidak selalu muncul sempurna, terutama di jaringan seluler yang lemah. Saat gagal dimuat, alt text tetap memberi tahu isi gambar itu.

Pengunjung tidak dibiarkan menatap kotak kosong tanpa petunjuk. Detail kecil seperti ini menentukan apakah mereka bertahan atau menutup tab.

4. Meningkatkan Traffic dari Pencarian Gambar

Banyak orang mencari produk lewat Google Images sebelum memutuskan membeli. Gambar dengan alt text relevan punya peluang lebih besar tampil di sana.

SEO Google Images sering diremehkan karena traffic-nya terlihat kecil. Padahal untuk toko ritel, satu klik dari foto produk bisa langsung jadi transaksi.

5. Membantu Memberikan Konteks dalam Konten

Gambar di artikel atau halaman produk jarang berdiri sendiri. Alt text menjelaskan hubungan gambar dengan teks di sekitarnya.

Grafik penjualan tanpa alt text hanya jadi hiasan bagi pengguna screen reader. Dengan alt text, poin utamanya tetap tersampaikan.

6. Meningkatkan Reputasi Merek

Website yang ramah semua pengguna menunjukkan merek yang peduli. Pembeli disabilitas mengingat toko yang membuat mereka bisa berbelanja mandiri.

Reputasi ini tidak dibangun lewat iklan. Ia tumbuh dari detail kecil yang dikerjakan dengan serius.

Ketika Foto Mahal Hanya Terdengar sebagai "Gambar, Gambar, Gambar"

Semua teori di atas baru terasa nyata saat saya mengaudit toko online sendiri.

1. Audit yang Membuka Mata

Audit dimulai dari crawl halaman produk dengan Screaming Frog. Setelah itu, setiap gambar dicek manual di media library WordPress.

Hasilnya bikin diam. Ratusan foto produk punya alt text kosong atau hanya bertuliskan "IMG_2034.jpg".

2. Mendengar Website Lewat Telinga Orang Lain

Penasaran, saya buka halaman produk dengan NVDA dan VoiceOver. Yang terdengar hanya "gambar, gambar, gambar" diulang tanpa makna.

Calon pembeli tunanetra tidak akan pernah tahu produk apa yang saya jual. Masalahnya ternyata bukan sekadar teknis, tapi soal cara pandang.

SEO dan Aksesibilitas Ternyata Satu Pekerjaan yang Sama

Setelah audit itu, cara saya memandang optimasi gambar SEO berubah total.

1. Google Juga Pembaca yang Tidak Bisa Melihat

Mesin pencari dan pengguna screen reader punya keterbatasan yang mirip. Keduanya bergantung pada teks untuk memahami isi gambar.

Jadi aksesibilitas website dan SEO gambar berangkat dari kebutuhan yang sama. Kontennya harus bisa dipahami tanpa dilihat langsung.

2. Godaan Menumpuk Keyword di Atribut Alt

Jujur, dorongan pertama saat memperbaiki alt text adalah menjejalkan keyword. Contohnya seperti "sepatu murah sepatu wanita sepatu terbaik jual sepatu".

Google menyebut praktik ini keyword stuffing yang bisa membuat situs dianggap spam. Screen reader pun membacanya mentah-mentah, dan hasilnya terdengar konyol.

3. Apa yang Berubah Setelah Diperbaiki

Perbaikan dimulai dari halaman produk dengan traffic tertinggi, lalu merambat ke katalog lain. Setiap alt text ditulis ulang sebagai deskripsi jujur, bukan daftar keyword.

Data diambil dari Google Search Console dengan filter tipe pencarian Image, periode 25 dibanding 28. Impresi bergerak dari 162 ke 215, sedangkan klik dari 0 ke 2.

Cara Menulis Alt Text yang Baik untuk SEO dan Manusia

Alt text adalah deskripsi teks gambar yang ditulis akurat, spesifik, singkat, dan tanpa keyword berlebihan.

1. Pastikan Akurat

Tulis apa yang benar-benar terlihat di gambar, bukan yang ingin dijual. Kalau fotonya tas cokelat, jangan tulis "tas kulit asli premium" tanpa bukti visual.

Alt text yang tidak sesuai gambar menyesatkan pengguna screen reader. Google juga mencocokkan teks dengan isi gambar, jadi akurasi itu penting.

2. Detailkan Penulisan

Contoh alt text yang baik menyebut jenis produk, warna, bahan, dan ciri khasnya. "Kemeja flanel kotak merah lengan panjang" jauh lebih berguna dari sekadar "kemeja".

Di katalog ritel, detail inilah yang membedakan satu varian dengan varian lain. Pembeli tunanetra jadi bisa memilih produk yang tepat tanpa bertanya.

3. Hindari Kata yang Bertele-tele

Tidak perlu menulis "gambar dari" atau "foto yang menunjukkan" di awal alt text. Screen reader sudah mengumumkan bahwa elemen itu gambar.

Kata pembuka seperti itu hanya memperpanjang tanpa menambah informasi. Langsung saja ke isi gambarnya.

4. Hindari Keyword Berlebihan

Keyword boleh masuk, asal memang menggambarkan isi gambar. Satu keyword relevan sudah cukup, sisanya biarkan deskripsi yang bekerja.

Untuk alt text WordPress, kolomnya ada di media library atau panel blok gambar. Isi kolom itu dengan kalimat yang enak didengar manusia.

5. Maksimal 125 Karakter

Banyak praktisi aksesibilitas menyarankan alt text sekitar 125 karakter atau kurang. Teks terlalu panjang melelahkan didengar, jadi taruh informasi penting di depan.

Kalau gambar butuh penjelasan panjang, seperti infografis, tulis detailnya di teks halaman. Alt text cukup merangkum intinya.

Alt Text adalah Jembatan antara Gambar dan Pemahaman

Alt text adalah atribut alt pada gambar yang berisi deskripsi teks tentang isi gambar. Teks ini dibaca screen reader, mesin pencari, dan browser saat gambar gagal tampil.

Tanpa jembatan ini, gambar hanya piksel tanpa makna bagi mesin dan sebagian manusia. Dengan alt text yang jujur, gambar ikut menyampaikan pesan halaman.

Setiap Gambar Sedang Berbicara, Pastikan Ada yang Bisa Mendengarnya

Audit itu mengubah cara saya melihat setiap foto produk yang diunggah. Sekarang alt text ditulis sebelum gambar dipublikasikan, bukan diperbaiki belakangan.

Mulai dari halaman produk terlaris, lalu dengarkan sendiri lewat screen reader. Kalau butuh pendamping untuk audit gambar dan strategi SEO menyeluruh, diskusikan dengan konsultan SEO.

FAQ Seputar Alt Text