Contoh Alt Text yang Benar untuk Gambar Produk, Artikel, dan Website

Contoh alt text yang benar adalah deskripsi singkat yang menjelaskan informasi penting dari sebuah gambar sesuai konteks halaman, bukan kumpulan keyword yang ingin ditargetkan. Alt text yang baik membuat orang yang tidak melihat gambar tetap memahami perannya dalam pembahasan.

Cara paling mudah menulis alt text adalah menjawab satu pertanyaan: jika gambar ini hilang, informasi apa yang perlu diganti dengan teks agar kalimat di sekitarnya tetap masuk akal?

Contoh Alt Text untuk Foto Produk

Foto produk perlu menjelaskan barang dan pembeda visual yang relevan untuk keputusan calon pembeli. Tidak semua detail harus dimasukkan, tetapi warna, bahan, model, atau penggunaan dapat disebut bila memang terlihat.

Kurang jelas: alt="sepatu"

Lebih baik: alt="Sepatu lari pria warna hitam dengan sol putih"

Contoh kedua memberi gambaran objek yang cukup tanpa berubah menjadi judul katalog panjang.

Kurang tepat: alt="sepatu lari murah terbaik sepatu olahraga pria diskon"

Lebih baik: alt="Sepatu lari pria dengan bantalan tebal pada bagian tumit"

Alt text tidak perlu memuat harga, promo, atau klaim “terbaik” jika hal tersebut tidak terlihat dari gambar. Informasi itu lebih tepat ditulis di teks produk.

Contoh Alt Text untuk Artikel Blog

Pada artikel, gambar biasanya dipakai untuk menjelaskan konsep, langkah, atau contoh. Alt text perlu mengikuti peran tersebut.

Gambar artikel tentang heading: alt="Contoh struktur heading H1, H2, dan H3 pada artikel blog"

Gambar artikel tentang website: alt="Tampilan mobile halaman landing page dengan tombol konsultasi di bagian atas"

Gambar artikel tentang local SEO: alt="Profil Google Business dengan foto toko, jam buka, dan ulasan pelanggan"

Deskripsi seperti ini memberi hubungan yang jelas antara visual dan topik artikel. Hindari alt text yang hanya menulis “gambar SEO” atau “ilustrasi website” karena tidak memberi informasi baru.

Contoh Alt Text untuk Screenshot

Screenshot sering digunakan sebagai bukti langkah atau tampilan alat. Fokuskan alt text pada apa yang perlu dipahami dari screenshot, bukan pada seluruh elemen antarmuka.

Kurang spesifik: alt="screenshot Google Search Console"

Lebih baik: alt="Laporan performa Google Search Console yang menampilkan grafik klik dan impresi"

Jika screenshot dipakai untuk menunjukkan tombol atau pengaturan tertentu, sebutkan bagian itu.

Contoh: alt="Menu pengaturan meta description pada editor halaman WordPress"

Informasi lengkap dari screenshot tetap perlu dijelaskan pada paragraf di sekitarnya. Jangan menyimpan instruksi penting hanya di dalam gambar karena tidak semua orang dapat melihatnya dengan nyaman.

Contoh Alt Text untuk Infografik dan Grafik

Infografik dapat mengandung banyak teks, angka, atau tahapan. Alt text tidak harus menyalin seluruh visual, tetapi perlu menyampaikan pesan utamanya.

Contoh: alt="Infografik alur optimasi konten dari riset keyword hingga evaluasi performa"

Untuk grafik dengan satu insight utama, gunakan ringkasan yang fokus.

Contoh: alt="Grafik yang menunjukkan kenaikan impresi organik selama tiga bulan"

Jika angka dalam grafik menjadi dasar keputusan, tulis angka dan penjelasannya juga di badan artikel atau tabel HTML. Alt text bukan tempat ideal untuk menyimpan data kompleks yang seharusnya dapat diakses dan dibaca semua orang.

Alt Text untuk Gambar Dekoratif

Tidak semua gambar perlu dijelaskan. Ilustrasi pembatas section, ikon dekoratif, atau tekstur latar yang tidak membawa informasi dapat menggunakan alt kosong.

<img src="ornamen-biru.svg" alt="" />

Alt kosong memberi tahu teknologi bantu bahwa gambar tersebut tidak perlu dibacakan. Ini berbeda dengan atribut alt yang hilang sama sekali. Gambar yang informatif tetap membutuhkan deskripsi.

Cara Menyesuaikan Alt Text dengan Konteks

Satu gambar yang sama dapat membutuhkan alt text berbeda bila dipakai di halaman berbeda. Foto sebuah hotel, misalnya, bisa dideskripsikan sebagai “Fasad hotel dengan area parkir” pada artikel lokasi, tetapi menjadi “Lobi hotel dengan meja resepsionis” bila fokus halaman adalah fasilitas.

Konteks halaman menentukan detail mana yang perlu disebut. Jangan hanya memakai nama file sebagai alt text karena nama aset biasanya tidak memahami tujuan gambar dalam sebuah artikel.

Kesalahan yang Sering Terjadi

Menulis “gambar” atau “foto” di awal semua alt text. Langsung sebutkan objek atau informasi pentingnya.

Menyalin judul artikel. Judul membahas keseluruhan halaman, sedangkan alt text perlu menjelaskan satu visual tertentu.

Mengulang keyword. Keyword boleh muncul saat memang sesuai dengan gambar, tetapi tidak perlu diulang dengan variasi yang sama.

Membuat deskripsi terlalu umum. Kata seperti “produk”, “dashboard”, atau “website” tidak cukup bila gambar sebenarnya memiliki konteks yang jelas.

Mengabaikan fungsi gambar sebagai link. Jika sebuah gambar dapat diklik, alt text sebaiknya menjelaskan tindakan atau halaman tujuan.

Checklist Sebelum Mengisi Alt Text

• Apakah gambar membawa informasi? Jika tidak, pertimbangkan alt kosong.
• Apakah deskripsinya sesuai dengan gambar yang terlihat? Jangan mengarang detail yang tidak ada.
• Apakah konteks halaman sudah masuk? Pilih detail yang relevan dengan pembahasan, bukan semua detail visual.
• Apakah kalimatnya tetap natural? Baca keras-keras untuk memastikan tidak terdengar seperti daftar keyword.
• Apakah informasi penting juga tersedia sebagai teks? Ini penting untuk screenshot, tabel visual, dan infografik.

Alt text yang efektif tidak membutuhkan gaya bahasa rumit. Dalam audit gambar yang lebih menyeluruh, ia perlu berjalan bersama optimasi gambar untuk SEO. Deskripsi yang jelas, singkat, dan sesuai konteks sudah jauh lebih bernilai daripada kalimat panjang yang tidak menjelaskan apa pun.