← Kembali ke blog
Alt Text: Panduan Lengkap Optimasi Atribut Alt pada Gambar untuk SEO

Alt Text: Panduan Lengkap Optimasi Atribut Alt pada Gambar untuk SEO

29 April 2025•oleh bikinwebjogja
seoon page seo

Apa Itu Alt Text?

Alt text (alternative text) adalah atribut HTML yang ditambahkan pada tag gambar untuk memberikan deskripsi tekstual tentang isi gambar tersebut. Alt text muncul di tempat gambar ketika gambar tidak dapat ditampilkan dan juga dibaca oleh screen reader untuk membantu pengguna dengan gangguan penglihatan memahami isi gambar. Alt text merupakan elemen penting dalam SEO on-page yang sering terlewatkan namun memiliki pengaruh signifikan.

Dalam kode HTML, alt text dituliskan sebagai atribut "alt" dalam tag img, seperti berikut:

<img src="gambar-website.jpg" alt="Deskripsi gambar website responsive dengan tampilan desktop dan mobile">

Alt text yang baik tidak hanya membantu aksesibilitas website tetapi juga memberi konteks kepada mesin pencari tentang isi gambar, yang tidak dapat "dilihat" langsung oleh algoritma Google.

Mengapa Alt Text Penting untuk SEO?

Alt text memiliki beberapa manfaat penting untuk SEO website Anda. Pertama, alt text membantu mesin pencari memahami isi dan konteks gambar di website Anda. Google dan mesin pencari lainnya tidak dapat "melihat" gambar seperti manusia, sehingga mereka mengandalkan alt text untuk memahami konten visual.

Kedua, alt text yang mengandung kata kunci relevan dapat membantu halaman Anda mendapatkan peringkat lebih baik untuk kata kunci tersebut. Ini juga meningkatkan peluang gambar Anda muncul di hasil pencarian gambar Google, yang dapat menjadi sumber trafik tambahan.

Ketiga, alt text meningkatkan aksesibilitas website, yang semakin menjadi faktor penting dalam SEO. Website yang aksesibel cenderung memberikan pengalaman pengguna yang lebih baik, yang merupakan sinyal positif bagi Google.

Berdasarkan pengalaman saya, website yang konsisten mengoptimasi alt text pada semua gambarnya cenderung mendapatkan trafik yang lebih tinggi dari pencarian gambar dan peringkat yang lebih baik untuk halaman tersebut secara keseluruhan.

Setelah kita memahami pentingnya alt text, selanjutnya kita akan mempelajari cara membuat alt text yang optimal.

Cara Membuat Alt Text yang Optimal

Membuat alt text yang efektif memerlukan keseimbangan antara deskriptif, informatif, dan dioptimasi untuk SEO. Berikut adalah panduan langkah demi langkah untuk membuat alt text yang optimal:

1. Buat Deskripsi yang Spesifik dan Jelas

Alt text harus menggambarkan isi gambar dengan jelas dan spesifik. Hindari deskripsi yang terlalu umum seperti "gambar" atau "foto". Sebaliknya, jelaskan apa yang sebenarnya ditampilkan dalam gambar.

Contoh alt text yang buruk: "gambar website" Contoh alt text yang baik: "tampilan website responsif BikinWebJogja pada perangkat desktop dan mobile"

2. Sertakan Kata Kunci Secara Natural

Sertakan kata kunci target jika relevan dengan gambar, tetapi pastikan penggunaannya terasa natural dan tidak dipaksakan. Jangan melakukan keyword stuffing dalam alt text karena dapat dianggap sebagai spam oleh Google.

Contoh keyword stuffing: "desain website jogja desain web murah jasa pembuatan website terbaik desain responsif" Contoh penggunaan kata kunci yang natural: "portofolio desain website responsif untuk bisnis kuliner di Jogja"

3. Perhatikan Panjang Alt Text

Alt text yang ideal biasanya tidak lebih dari 125 karakter (sekitar 8-10 kata). Alt text yang terlalu panjang mungkin terpotong oleh screen reader atau tidak sepenuhnya diindeks oleh mesin pencari.

Pastikan informasi paling penting dan relevan ditempatkan di awal alt text, untuk kasus di mana bagian akhir mungkin terpotong.

4. Hindari Frasa "Gambar dari" atau "Foto dari"

Tidak perlu menambahkan frasa seperti "gambar dari" atau "foto dari" di alt text karena screen reader biasanya sudah secara otomatis memberitahu pengguna bahwa elemen tersebut adalah gambar.

Contoh yang tidak perlu: "Gambar dari tampilan website responsif" Lebih baik: "Tampilan website responsif pada smartphone dan tablet"

5. Sesuaikan dengan Konteks Halaman

Alt text harus relevan dengan konteks konten halaman tempat gambar tersebut berada. Gambar yang sama mungkin memerlukan alt text berbeda tergantung pada konteks penggunaannya.

Misalnya, gambar logo perusahaan dalam artikel tentang branding mungkin memiliki alt text berbeda dibandingkan dengan gambar yang sama di halaman "About Us".

Setelah kita membahas cara membuat alt text yang optimal, selanjutnya kita akan melanjutkan dengan contoh-contoh alt text untuk berbagai jenis gambar.

Contoh Alt Text untuk Berbagai Jenis Gambar

Berikut adalah contoh alt text yang baik untuk berbagai jenis gambar yang umum digunakan di website:

Gambar Produk

Alt text yang buruk: "produk-123.jpg" Alt text yang baik: "Sepatu lari Nike AirMax warna hitam dengan sol merah tampak samping"

Infografis

Alt text yang buruk: "infografis-seo.png" Alt text yang baik: "Infografis 5 faktor utama yang mempengaruhi peringkat SEO website pada tahun 2025"

Foto Tim atau Staff

Alt text yang buruk: "tim.jpg" Alt text yang baik: "Tim desainer website BikinWebJogja sedang berdiskusi di ruang meeting"

Screenshot Website atau Aplikasi

Alt text yang buruk: "screenshot.png" Alt text yang baik: "Screenshot dashboard Google Analytics menunjukkan peningkatan trafik organik sebesar 50%"

Alt text yang buruk: "logo.png" Alt text yang baik: "Logo BikinWebJogja dengan ikon laptop dan tagline 'Solusi Digital Terpercaya'"

Gambar Dekoratif

Untuk gambar yang murni dekoratif dan tidak memberikan informasi tambahan, gunakan alt="" (alt text kosong) agar screen reader dapat melewatkannya.

Praktik Terbaik Alt Text untuk SEO

Untuk memaksimalkan manfaat SEO dari alt text, ikuti praktik terbaik berikut:

1. Optimalkan Semua Gambar Penting

Pastikan semua gambar penting di website Anda memiliki alt text yang dioptimasi. Prioritaskan gambar yang memiliki nilai informasi tinggi seperti gambar produk, infografis, atau screenshot.

2. Gunakan Konteks Halaman

Alt text harus mempertimbangkan konteks halaman tempat gambar tersebut berada. Gambar di halaman produk mungkin memerlukan alt text yang lebih fokus pada fitur produk, sementara gambar yang sama di blog mungkin memerlukan konteks yang berbeda.

3. Variasikan Alt Text untuk Gambar Serupa

Jika Anda menggunakan beberapa gambar serupa pada halaman yang sama, pastikan alt text bervariasi dan spesifik untuk setiap gambar. Hindari menggunakan alt text yang sama berulang kali.

4. Gunakan Long Tail Keyword dalam Alt Text

Untuk gambar yang sangat spesifik, pertimbangkan untuk menggunakan long tail keyword dalam alt text. Misalnya, daripada hanya "sepatu lari", gunakan "sepatu lari wanita Nike untuk trek outdoor".

5. Update Alt Text saat Melakukan Audit SEO

Saat melakukan audit SEO on-page, cek dan update alt text gambar yang sudah ada, terutama di halaman-halaman penting seperti halaman produk atau halaman landing.

Setelah kita membahas praktik terbaik, selanjutnya kita akan melanjutkan dengan kesalahan umum yang harus dihindari dalam penggunaan alt text.

Kesalahan Umum dalam Penggunaan Alt Text

Ada beberapa kesalahan yang sering dilakukan dalam penggunaan alt text dan harus dihindari:

1. Mengabaikan Alt Text Sama Sekali

Kesalahan paling umum adalah tidak menambahkan alt text sama sekali, meninggalkan atribut alt kosong (kecuali untuk gambar dekoratif), atau menggunakan nama file sebagai alt text secara default.

2. Keyword Stuffing

Menumpuk terlalu banyak kata kunci dalam alt text dalam upaya meningkatkan SEO justru dapat merugikan. Google dapat menganggap ini sebagai spam dan berpotensi memberikan penalti.

3. Alt Text Terlalu Panjang

Alt text yang terlalu panjang seperti paragraf penuh tidak efektif dan dapat mengganggu pengalaman pengguna screen reader.

4. Terlalu Umum atau Tidak Deskriptif

Alt text yang terlalu umum seperti "gambar" atau "foto" tidak memberikan nilai tambah baik untuk SEO maupun aksesibilitas.

5. Informasi yang Sudah Ada di Konten

Jika informasi dalam gambar sudah dijelaskan secara detail dalam teks di sekitarnya, alt text dapat lebih singkat dan tidak perlu mengulang informasi yang sama.

Hubungan Alt Text dengan Elemen SEO Lainnya

Alt text bekerja bersama dengan elemen SEO on-page lainnya untuk mengoptimalkan website Anda:

Nama File Gambar

Nama file gambar sebaiknya juga dioptimasi dengan kata kunci yang relevan dan deskriptif. Misalnya, "design-website-responsive-jogja.jpg" lebih baik dari "IMG00123.jpg". Kombinasi nama file yang dioptimasi dan alt text yang baik memberikan sinyal SEO yang lebih kuat.

Teks di Sekitar Gambar

Teks di sekitar gambar memberikan konteks tambahan yang membantu Google memahami relevansi gambar. Pastikan teks tersebut juga mengandung kata kunci yang relevan dan menjelaskan apa yang ditampilkan dalam gambar.

Image Title

Atribut "title" pada gambar berbeda dengan alt text dan muncul sebagai tooltip ketika pengguna mengarahkan kursor ke gambar. Meskipun kurang penting untuk SEO dibandingkan alt text, title dapat memberikan informasi tambahan dan meningkatkan pengalaman pengguna.

Caption Gambar

Caption gambar (teks yang muncul di bawah gambar) juga memberikan konteks tambahan dan dapat mengandung kata kunci. Caption yang baik melengkapi alt text dengan memberikan informasi yang mungkin tidak tercakup dalam deskripsi gambar.

Tools untuk Mengaudit Alt Text

Beberapa tools berikut dapat membantu Anda mengaudit alt text di website:

  • Google Lighthouse: Memberikan skor aksesibilitas dan mengidentifikasi gambar tanpa alt text
  • Screaming Frog: Mengidentifikasi semua gambar di website dan menunjukkan mana yang tidak memiliki alt text
  • WAVE (Web Accessibility Evaluation Tool): Menganalisis aksesibilitas website termasuk penggunaan alt text
  • Semrush atau Ahrefs: Fitur audit SEO mereka memeriksa gambar tanpa alt text sebagai bagian dari analisis on-page

Alt Text dan Aksesibilitas Web

Selain manfaat SEO, alt text sangat penting untuk aksesibilitas web. Menurut WebAIM (Web Accessibility In Mind), lebih dari 7,5 juta orang di Amerika Serikat saja menggunakan screen reader untuk menjelajahi internet.

Alt text yang baik memastikan pengguna dengan gangguan penglihatan dapat memahami isi visual website Anda. Ini bukan hanya praktik terbaik tetapi juga merupakan komponen penting dalam memenuhi standar aksesibilitas seperti WCAG (Web Content Accessibility Guidelines).

Beberapa manfaat aksesibilitas dari alt text yang baik:

  • Membantu pengguna screen reader memahami konten visual
  • Menyediakan alternatif ketika gambar tidak dapat dimuat karena koneksi lambat
  • Memudahkan pengguna dengan keterbatasan data untuk memahami konten tanpa mengunduh gambar
  • Membantu pengguna dengan gangguan kognitif memahami konten visual yang kompleks

Kesimpulan

Alt text adalah elemen SEO on-page yang sering diabaikan namun memiliki dampak signifikan baik untuk SEO maupun aksesibilitas website. Alt text yang baik harus deskriptif, mengandung kata kunci relevan secara natural, dan tidak terlalu panjang.

Dengan mengoptimasi alt text untuk semua gambar penting di website Anda, Anda tidak hanya meningkatkan peluang untuk mendapatkan peringkat lebih baik di mesin pencari tetapi juga membuat website Anda lebih aksesibel bagi semua pengguna.

Ingat bahwa seperti semua aspek SEO, optimasi alt text bukanlah one-time effort tetapi proses berkelanjutan. Audit secara berkala, update alt text sesuai dengan perubahan konten atau strategi kata kunci, dan selalu prioritaskan pengalaman pengguna di atas segalanya.

Dengan menerapkan praktik terbaik yang dibahas dalam artikel ini, Anda dapat memaksimalkan potensi SEO dari gambar-gambar di website Anda sekaligus berkontribusi pada internet yang lebih inklusif dan aksesibel bagi semua.