Teks alt: Panduan SEO dan aksesibilitas
Alt text adalah atribut HTML yang mendeskripsikan gambar untuk aksesibilitas dan mesin pencari; ini membantu pembaca layar, memberi konteks cadangan saat gambar tidak dimuat, dan memberikan mesin pencari sinyal tekstual singkat tentang isi gambar.
Gambaran Umum
Teks alt (atribut alt pada elemen <img>) adalah deskripsi teks singkat dari sebuah gambar yang terutama ditujukan untuk aksesibilitas dan sebagai fallback saat gambar gagal dimuat. Pembaca layar mengumumkan teks alt kepada pengguna yang tunanetra atau berkebutuhan penglihatan rendah, dan mesin pencari menggunakan teks alt sebagai salah satu sinyal tekstual tentang subjek gambar. Teks alt membantu pengindeksan dengan menyediakan teks yang dapat diparse untuk gambar, tetapi ini hanya salah satu sinyal di antara banyak faktor yang memengaruhi peringkat dan visibilitas.
Tulis teks alt untuk menggambarkan informasi yang disampaikan gambar kepada audiens yang dituju. Untuk gambar yang murni dekoratif gunakan atribut alt kosong (<img src="..." alt="">) agar pembaca layar melewatinya. Untuk visual kompleks—grafik, infografik, diagram—sediakan ringkasan tekstual di dekatnya atau gunakan teknik ARIA/HTML untuk memberikan deskripsi yang lebih panjang.
Langkah demi langkah
1) Identifikasi peran gambar: tentukan apakah gambar bersifat informatif, fungsional (mis. tombol), atau dekoratif. Gambar informatif dan fungsional membutuhkan teks alt yang deskriptif; gambar dekoratif harus menggunakan atribut alt kosong.
2) Deskripsikan konten penting secara ringkas: tuliskan apa yang perlu diketahui pengguna dari gambar. Jaga teks alt singkat—usahakan menyampaikan gagasan utama dalam satu kalimat atau frasa. Contoh alt informatif standar: <img src="/photos/harbor.jpg" alt="Perahu nelayan merah berlabuh di pelabuhan berbatu saat matahari terbit">.
3) Hindari keyword stuffing dan frasa berulang. Jangan awali dengan frasa seperti “image of” atau “picture of”—pembaca layar sudah memberitahu peran gambar. Buat teks berguna untuk pembaca manusia daripada untuk perayap.
4) Tangani gambar fungsional dan kontrol: jika gambar merupakan link atau tombol, jelaskan aksi yang dilakukannya. Contoh: <img src="/icons/download.svg" alt="Unduh lembar data produk">. Jika kontrol memiliki teks yang terlihat, alt harus sesuai dengan tujuannya atau kosong jika teks sudah menyampaikan aksi.
5) Berikan deskripsi lebih panjang untuk gambar kompleks: gunakan keterangan di sebelahnya, deskripsi terperinci yang ditautkan, aria-describedby, atau teks HTML yang terlihat untuk menjelaskan grafik atau infografik. Untuk detail setara cetak (tabel data, label sumbu), sertakan informasi kunci dalam teks halaman.
6) Gunakan aturan editorial yang konsisten: buat panduan gaya singkat untuk kontributor (target panjang, kapan meringkas, aturan bahasa) dan terapkan di template atau field CMS sehingga teks alt tertangkap secara andal dalam skala besar.
Contoh HTML
Gambar deskriptif: <img src="https://example.com/park.jpg" alt="Anak menerbangkan layang-layang merah di taman kota">. Gambar dekoratif: <img src="/decorative-divider.png" alt="">. Gambar fungsional yang dipakai sebagai link: <a href="/download"><img src="/icons/pdf.svg" alt="Unduh laporan PDF"></a>.
Verifikasi teks alt: daftar pemeriksaan teknis
Ketersediaan atribut alt — tempat untuk memverifikasi: view-source, Chrome DevTools Elements, atau curl (ambil HTML penuh dengan curl tanpa -I) — lulus jika setiap <img> bermakna memiliki atribut alt dan gambar dekoratif menggunakan alt="".
DOM yang dirender untuk gambar yang disisipkan via JavaScript — tempat untuk memverifikasi: Chrome DevTools Elements (inspeksi DOM akhir) — lulus jika gambar yang terlihat pengguna juga menyertakan teks alt yang sesuai dalam DOM yang dirender.
Audit aksesibilitas — tempat untuk memverifikasi: Lighthouse di Chrome DevTools atau alat aksesibilitas otomatis — lulus jika audit melaporkan tidak ada teks alt yang hilang untuk gambar informatif dan hanya menandai gambar dekoratif yang memang dimaksudkan.
Pemeriksaan keterbacaan manusia — tempat untuk memverifikasi: review sampel oleh editor konten atau pembaca layar (NVDA, VoiceOver) — lulus jika teks alt menyampaikan informasi berguna yang sama seperti visual bagi pengguna pembantu.
Indeksabilitas halaman — tempat untuk memverifikasi: untuk halaman milikmu gunakan Google Search Console URL Inspection; untuk halaman pihak ketiga gunakan operator site: sebagai indikasi — lulus jika halaman dapat dirayapi (tidak diblokir oleh robots.txt atau noindex) dan URL Inspection menunjukkan halaman dikenal oleh Google. Catatan: site: hanya indikasi; URL Inspection bersifat otoritatif untuk halaman yang kamu miliki.
Tips alat praktis
Gunakan curl untuk mengambil HTML halaman sebagai user agent tertentu: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Jangan gunakan -I jika kamu butuh body. Buka file yang disimpan di editor teks atau jalankan parser DOM untuk menemukan tag <img> dan atribut alt mereka.
Jalankan Lighthouse (Chrome DevTools → Lighthouse) untuk menemukan masalah aksesibilitas umum, dan uji dengan pembaca layar (NVDA di Windows, VoiceOver di macOS) untuk mengonfirmasi pengalaman pengguna.
Jika kamu menggunakan structured data yang mereferensikan gambar (mis. schema Product atau Recipe), validasi markup dengan Rich Results Test atau Schema Markup Validator untuk memastikan gambar yang direferensikan dalam JSON-LD ada dan dapat diakses.
Masalah umum
Tidak ada teks alt pada gambar informatif. Ini merusak aksesibilitas dan meninggalkan pengguna tunanetra tanpa informasi visual halaman.
Keyword stuffing: mengulang kata kunci target atau nama merek di atribut alt secara tidak wajar. Ini memberikan pengalaman buruk dan mungkin diabaikan oleh mesin pencari.
Menggunakan nama file atau frasa generik (mis. "image1.jpg", "picture") sebagai teks alt, yang tidak bermakna untuk teknologi bantu atau pengindeksan.
Mengandalkan atribut title alih-alih alt untuk informasi kritis; banyak pembaca layar tidak menyajikan title secara konsisten.
Percaya bahwa teks alt saja mengontrol peringkat gambar. Teks alt membantu mesin pencari memahami gambar, tetapi pengindeksan dan visibilitas bergantung pada konteks halaman, data terstruktur, kemampuan perayapan dan sinyal lain.
Jika gambar disisipkan di sisi klien oleh JavaScript, penulis kadang lupa menyertakan atribut alt di DOM yang dirender; selalu periksa DOM akhir, bukan hanya HTML server.
Pertanyaan yang sering diajukan
T: Berapa panjang teks alt sebaiknya? J: Usahakan deskripsi ringkas yang mengkomunikasikan tujuan gambar. Satu kalimat pendek atau frasa biasanya memadai; untuk visual kompleks sediakan deskripsi aksesibel yang lebih panjang di tempat lain di halaman.
T: Apakah teks alt memengaruhi peringkat SEO? J: Teks alt memberikan sinyal tekstual yang bisa membantu pengindeksan dan relevansi pencarian gambar, tetapi tidak menentukan peringkat sendirian. Peringkat bergantung pada banyak sinyal termasuk relevansi halaman, data terstruktur, kemampuan perayapan dan kualitas konten secara keseluruhan.
T: Haruskah gambar dekoratif memiliki teks alt? J: Tidak. Gambar dekoratif harus menggunakan atribut alt kosong (alt="") agar diabaikan oleh pembaca layar dan tidak menambah gangguan pada pengalaman aksesibilitas.
T: Bisakah alat otomatis menghasilkan teks alt yang dapat diterima? J: Saran otomatis dari CMS atau pengenalan gambar bisa membantu, tetapi selalu tinjau dan edit teks alt yang dihasilkan mesin untuk akurasi, kejelasan dan masalah privasi sebelum dipublikasikan.
T: Bagaimana dengan gambar di latar belakang CSS? J: Gambar background CSS tidak diekspos sebagai elemen <img> dan tidak memiliki atribut alt; konten informasional dalam gambar latar harus disajikan dalam HTML agar dapat diakses.
Technical SEO hanyalah salah satu bagian dari pertumbuhan organik. Membangun otoritas topikal membutuhkan backlink berkualitas dan konten yang terindeks serta dapat diakses—pertimbangkan marketplace yang terverifikasi dan kemitraan yang memprioritaskan indeksabilitas penerbit dan konteks editorial.Bangun otoritas dengan backlink berkualitas
Istilah terkait
Frasa kata kunci: niat, optimisasi & contoh
Frasa kata kunci adalah kueri pencarian multi-kata atau istilah target yang Anda optimalkan halaman untuknya; ia mengekspresikan niat pengguna, memandu judul dan pilihan konten, dan diukur dengan alat seperti Google Search Console dan perencana kata kunci.
Mesin pencari: cara kerja dan dasar-dasar SEO
Mesin pencari adalah sistem perangkat lunak yang menemukan, merayapi, mengindeks, dan mengambil konten web untuk menjawab kueri pengguna; SERP modern juga menampilkan AI Overviews, hasil kaya, dan daftar peringkat yang ditentukan oleh banyak sinyal.
Panduan SEO: definisi dan daftar periksa
Search engine optimization (SEO) adalah praktik meningkatkan visibilitas situs web di hasil pencarian dengan menyelaraskan konten, konfigurasi teknis, dan pengalaman pengguna dengan sistem perayapan, pengindeksan, dan pemeringkatan mesin pencari — termasuk perayapan mobile-first dan fitur SERP bertenaga AI.
On-page SEO: pengertian, daftar periksa, dan cara verifikasi
On-page SEO adalah mengoptimalkan konten halaman, HTML, dan pengalaman pengguna supaya relevan, dapat diindeks, dan berguna bagi pengguna serta mesin pencari modern — meliputi rendering mobile-first, data terstruktur, tag kanonik, dan performa halaman.
Peringkat mesin pencari: definisi dan cara kerjanya
Peringkat mesin pencari adalah urutan di mana mesin pencari menampilkan halaman yang diindeks untuk kueri tertentu; peringkat mencerminkan banyak sinyal—relevansi, backlinks, kualitas konten, page experience, dan intent pengguna—dan berinteraksi dengan AI overviews pada 2026.
Kekuatan tautan: definisi dan pengaruhnya pada SEO
Kekuatan tautan terletak pada kemampuannya menghubungkan sumber daya web dan mentransfer sinyal navigasi, editorial, dan referensial antar domain; untuk SEO, tautan memungkinkan penemuan, memengaruhi sinyal relevansi, dan mengarahkan jalur perayapan.
Pengindeksan Semantik Laten (LSI) untuk Meningkatkan SEO
Pengindeksan semantik laten (LSI) menggambarkan metode yang menampilkan kata, frasa, dan topik terkait secara semantik dalam teks; dalam SEO modern istilah ini dipakai untuk memandu cakupan topikal yang lebih kaya, sinyal entitas, dan ungkapan semantik agar model pencarian memahami konten.