← Kembali ke blog
Contoh Alt Text Efektif untuk Berbagai Jenis Gambar yang SEO-Friendly

Contoh Alt Text Efektif untuk Berbagai Jenis Gambar yang SEO-Friendly

29 April 2025•oleh bikinwebjogja
seoon page seo

Pentingnya Alt Text yang Baik untuk Gambar

Alt text (alternative text) adalah deskripsi tekstual yang diberikan pada gambar dalam kode HTML. Alt text tidak hanya penting untuk aksesibilitas bagi pengguna dengan gangguan penglihatan, tetapi juga merupakan elemen penting dalam SEO on-page. Alt text yang baik membantu mesin pencari memahami konteks dan isi gambar, yang dapat meningkatkan peringkat konten Anda dan membawa trafik tambahan dari pencarian gambar.

Alt text yang efektif harus deskriptif, ringkas, dan mengandung kata kunci yang relevan (bila natural). Dalam artikel ini, kita akan melihat contoh-contoh alt text yang baik untuk berbagai jenis gambar yang umum digunakan di website.

Contoh Alt Text untuk Produk E-commerce

Gambar produk memerlukan alt text yang menyeimbangkan deskripsi produk dengan penempatan kata kunci. Berikut beberapa contoh:

Contoh yang Buruk:

<img src="sepatu-001.jpg" alt="sepatu">

Terlalu umum dan tidak memberikan informasi spesifik.

Contoh yang Lebih Baik:

<img src="sepatu-001.jpg" alt="Sepatu lari Nike AirZoom warna hitam dengan sol merah">

Tips untuk Alt Text Produk:

  • Sertakan nama brand/merek
  • Sebutkan warna, model, dan fitur utama
  • Sertakan kategori produk
  • Jika relevan, sertakan kode SKU atau model

Contoh untuk Berbagai Produk:

  • Pakaian: "Kemeja lengan panjang pria Uniqlo bahan linen warna navy blue"
  • Elektronik: "Smartphone Samsung Galaxy S22 Ultra 256GB warna Phantom Black"
  • Furniture: "Meja makan minimalis kayu jati 6 kursi dengan finishing natural"

Contoh Alt Text untuk Infografis dan Data Visualization

Infografis dan visualisasi data memerlukan alt text yang menyampaikan pesan utama dan konteks.

Contoh yang Buruk:

<img src="infografis-seo.png" alt="infografis SEO">

Contoh yang Lebih Baik:

<img src="infografis-seo.png" alt="Infografis 5 faktor utama Google ranking tahun 2025 berdasarkan studi 1000 website">

Tips untuk Alt Text Infografis:

  • Tekankan informasi kunci yang disajikan
  • Sebutkan apakah ada data statistik penting
  • Jelaskan periode waktu/konteks data jika relevan
  • Sertakan sumber data jika memungkinkan

Contoh untuk Berbagai Jenis Infografis:

  • Timeline: "Infografis timeline perkembangan algoritma Google dari 2000-2025"
  • Perbandingan: "Infografis perbandingan WordPress vs Wix untuk website bisnis"
  • Proses: "Diagram alur proses optimasi SEO on-page dalam 5 langkah"

Contoh Alt Text untuk Screenshot Tutorial

Screenshot yang digunakan dalam tutorial atau panduan step-by-step memerlukan alt text yang menjelaskan apa yang ditunjukkan dan konteksnya dalam tutorial.

Contoh yang Buruk:

<img src="screenshot-1.jpg" alt="screenshot">

Contoh yang Lebih Baik:

<img src="screenshot-1.jpg" alt="Screenshot menu pengaturan meta tag di plugin Yoast SEO WordPress">

Tips untuk Alt Text Screenshot:

  • Jelaskan apa yang sedang ditampilkan
  • Sebutkan aplikasi/platform/software yang ditunjukkan
  • Referensikan langkah dalam tutorial jika relevan
  • Sertakan hasil yang diharapkan dari langkah tersebut

Contoh untuk Berbagai Jenis Screenshot:

  • Dashboard: "Screenshot dashboard Google Analytics menunjukkan kenaikan trafik organik 50%"
  • Interface: "Interface WordPress Gutenberg editor dengan blok heading yang dipilih"
  • Error Message: "Pesan error 404 Not Found di Chrome Developer Tools"

Contoh Alt Text untuk Ilustrasi dan Diagram

Ilustrasi dan diagram biasanya memiliki tujuan edukasi atau penjelasan, yang harus tercermin dalam alt text.

Contoh yang Buruk:

<img src="diagram-seo.jpg" alt="diagram SEO">

Contoh yang Lebih Baik:

<img src="diagram-seo.jpg" alt="Diagram hubungan antara technical SEO, on-page SEO, dan off-page SEO dalam strategi SEO komprehensif">

Tips untuk Alt Text Ilustrasi/Diagram:

  • Fokus pada konsep yang dijelaskan
  • Jelaskan hubungan antar elemen jika relevan
  • Sebutkan tujuan ilustrasi dalam konteks konten
  • Sertakan kesimpulan atau insight utama jika ada

Contoh untuk Berbagai Jenis Diagram:

  • Flowchart: "Flowchart proses indexing Google dari crawling hingga ranking"
  • Pie Chart: "Pie chart distribusi trafik website: 60% organik, 25% direct, 15% social media"
  • Concept Map: "Peta konsep faktor-faktor yang mempengaruhi kecepatan website"

Contoh Alt Text untuk Foto Tim dan Orang

Foto orang memerlukan alt text yang menghormati individu sambil memberikan konteks yang relevan.

Contoh yang Buruk:

<img src="ceo.jpg" alt="CEO">

Contoh yang Lebih Baik:

<img src="ceo.jpg" alt="Jane Doe, CEO BikinWebJogja, sedang memberikan presentasi di acara Digital Marketing Summit 2025">

Tips untuk Alt Text Foto Orang:

  • Sertakan nama dan jabatan/peran
  • Tambahkan konteks situasi atau lokasi
  • Hindari deskripsi fisik yang tidak relevan
  • Jika foto kelompok, sebutkan jumlah orang dan konteks

Contoh untuk Berbagai Jenis Foto Orang:

  • Tim: "Tim desainer BikinWebJogja terdiri dari 5 orang sedang diskusi di kantor"
  • Pembicara: "John Smith, pakar SEO, saat memberikan workshop SEO on-page"
  • Testimoni: "Maria, pemilik Cafe Sunrise, klien puas BikinWebJogja"

Kesalahan Umum yang Harus Dihindari

Bahkan dengan panduan dan contoh, ada beberapa kesalahan umum yang sering terjadi saat menulis alt text:

1. Mengawali dengan "Gambar dari..." atau "Foto..."

Screen reader secara otomatis memberitahu pengguna bahwa elemen tersebut adalah gambar, sehingga tidak perlu diulangi dalam alt text.

Buruk: "Gambar dari laptop Apple MacBook Pro"Baik: "Laptop Apple MacBook Pro 16 inch dengan Touch Bar"

2. Keyword Stuffing

Menumpuk terlalu banyak kata kunci dalam alt text membuat teks tidak natural dan bisa dianggap sebagai spam.

Buruk: "Desain website, jasa web design, pembuatan website, web developer, harga website"Baik: "Contoh desain website responsive untuk bisnis kuliner by BikinWebJogja"

3. Alt Text Terlalu Panjang

Alt text yang terlalu panjang bisa terpotong oleh screen reader atau tidak diindeks sepenuhnya.

Buruk: "Screenshot dashboard Google Analytics yang menunjukkan grafik peningkatan traffic dari bulan Januari hingga Desember dengan detail kenaikan per bulan dan sumber traffic dari organic search, direct, dan referral dengan persentase masing-masing channel dan perbandingan dengan periode tahun sebelumnya"Baik: "Dashboard Google Analytics menunjukkan peningkatan traffic organik 45% dalam 6 bulan terakhir"

4. Alt Text Terlalu Pendek atau Generic

Alt text yang terlalu pendek tidak memberikan konteks yang cukup.

Buruk: "chart"Baik: "Chart pertumbuhan pengunjung website dari mobile vs desktop 2022-2025"

Panduan Ringkas Alt Text untuk Berbagai Industri

E-commerce

[Nama Produk] [Brand] [Fitur Utama] [Warna/Material] [Ukuran jika relevan]

Contoh: "Blender Philips HR2157 kapasitas 2L dengan 5 kecepatan warna hitam"

Real Estate

[Jenis Properti] [Lokasi] [Fitur Utama] [Tampak/Angle]

Contoh: "Rumah minimalis 2 lantai di Bantul dengan kolam renang view dari depan"

Travel & Hospitality

[Nama Lokasi/Atraksi] [di Lokasi] [Fitur Istimewa] [Waktu/Kondisi jika relevan]

Contoh: "Pantai Parangtritis Yogyakarta dengan pemandangan sunset dan aktivitas paralayang"

Food & Restaurant

[Nama Hidangan] [Deskripsi Singkat] [Presentasi/Penyajian]

Contoh: "Gudeg Jogja komplit dengan telur dan ayam disajikan dalam kendil tradisional"

Kesimpulan

Alt text yang efektif adalah perpaduan antara deskripsi akurat, konteks yang relevan, dan penggunaan kata kunci yang natural. Dengan mengikuti contoh-contoh dan tips di atas, Anda dapat membuat alt text yang tidak hanya membantu aksesibilitas website tetapi juga meningkatkan SEO gambar Anda.

Ingat bahwa alt text adalah bagian dari strategi SEO on-page yang lebih luas. Kombinasikan dengan optimasi gambar yang baik seperti kompresi, format yang tepat, dan dimensi yang sesuai untuk hasil maksimal.

Terapkan praktik terbaik ini pada semua gambar di website Anda, dan Anda akan melihat peningkatan dalam visibilitas di hasil pencarian gambar dan pengalaman pengguna yang lebih inklusif.