SEO gambar adalah seluruh optimasi yang dilakukan agar gambar di halaman Anda dipahami dengan benar oleh mesin pencari dan dimuat dengan cepat. Mulai dari nama file, alt text, format modern seperti WebP dan AVIF, hingga lazy loading, setiap detail memengaruhi trafik dari Google Gambar serta kecepatan halaman secara keseluruhan. Dalam panduan ini kami menjelaskan SEO gambar secara berurutan, dengan contoh pada setiap langkah.
Mengapa SEO gambar penting?
Gambar memiliki dua dampak utama. Pertama, visibilitas: Google Gambar dan kotak gambar di hasil pencarian biasa adalah kanal tersendiri yang bisa mendatangkan pengunjung; terutama untuk produk, resep, tempat, dan dekorasi, pengguna sering melihat gambar lebih dulu. Kedua, kecepatan: di sebagian besar halaman, gambar menyumbang bagian terbesar dari total ukuran data, dan elemen terbesar di halaman sering kali adalah gambar. Artinya, satu gambar utama yang tidak dioptimasi bisa merusak nilai LCP dalam Core Web Vitals dan menurunkan performa seluruh halaman.
Dampak ketiga adalah aksesibilitas: alt text menjelaskan gambar kepada pengguna pembaca layar. Alt text yang baik melayani pengguna sekaligus mesin pencari.
Nama file
Google juga menggunakan nama file untuk memahami isi gambar. Nama seperti IMG_20260412_0043.jpg dari kamera tidak membawa informasi apa pun. Aturannya sederhana:
- Gunakan kata yang singkat dan bermakna untuk menggambarkan gambar:
sofa-kulit-abu-abu-tiga-dudukan.webp. - Pisahkan kata dengan tanda hubung (-); garis bawah (_) bisa dianggap menggabungkan kata.
- Pilih huruf kecil dan karakter ASCII; hindari spasi dan karakter khusus.
- Jangan menjejalkan kata kunci:
sofa-sofa-murah-sofa.webptidak membantu.
| Buruk | Baik |
|---|---|
IMG_0043.jpg | kursi-kulit-abu-abu.webp |
Gambar Baru (2).png | kantor-jakarta-selatan-pintu-masuk.webp |
sofa_murah_sofa_dijual.jpg | set-kursi-sudut.webp |
Cara menulis alt text
Alt text (atribut alt) menjelaskan isi gambar dengan kata-kata. Jika gambar gagal dimuat, alt text yang akan ditampilkan; pembaca layar membacakannya, dan Google menggunakannya untuk memahami konteks gambar.
- Deskripsikan gambar apa adanya. "Barista yang membuat kopi di atas meja dapur" adalah alt text yang baik; tidak perlu memulai dengan kata "gambar" atau "foto".
- Buat singkat. Umumnya, di bawah 125 karakter sudah cukup.
- Sisipkan kata kunci secara alami. Jika gambar memang berkaitan dengan topiknya, kata kunci akan muncul dengan sendirinya; daftar kata yang dipaksakan bisa dianggap spam.
- Kosongkan alt text pada gambar dekoratif (
alt="") agar pembaca layar tidak membacakannya tanpa alasan. Jangan menghapus atributnya sepenuhnya. - Tuliskan ulang gambar yang berisi teks. Jika di dalam gambar ada slogan atau harga, tuliskan juga di alt text atau di teks halaman.
Contoh: Pada halaman produk, alih-alih menulis alt="sofa sofa set kursi murah", tulislah alt="Sofa tiga dudukan berbahan kain abu-abu dengan kaki kayu". Versi kedua lebih membantu pengguna dan memberi informasi yang lebih jelas kepada mesin pencari.
Selain alt text, teks di sekitar gambar, judul, dan keterangan gambar (caption) juga membantu Google memahami konteksnya. Meletakkan gambar di dekat paragraf yang relevan jauh lebih baik daripada meletakkannya di bagian bawah halaman yang tidak berkaitan.
Memilih format: JPEG, PNG, WebP, AVIF
| Format | Keunggulan | Kapan digunakan? |
|---|---|---|
| JPEG | Umum, kompresi baik untuk foto | Cadangan untuk sistem lama |
| PNG | Tanpa kehilangan kualitas, transparansi | Logo, tangkapan layar, grafik sederhana |
| WebP | Ukuran file jauh lebih kecil daripada JPEG/PNG, mendukung transparansi | Pilihan default yang aman untuk sebagian besar gambar |
| AVIF | Umumnya lebih kecil daripada WebP | Halaman dengan banyak foto; dukungan browser luas tetapi sediakan cadangan |
| SVG | Vektor, dapat diskalakan, sangat kecil | Logo, ikon, gambar sederhana |
Untuk menyediakan beberapa format, Anda bisa menggunakan elemen <picture>: browser memilih format pertama yang didukungnya, dan jika tidak mendukung satu pun, ia akan menggunakan tag <img> di dalamnya. Dengan cara ini, browser yang mendukung AVIF menerima AVIF, sedangkan yang tidak mendukungnya menerima WebP atau JPEG.
Ukuran dan kompresi
Kesalahan yang paling sering terjadi adalah menampilkan foto berlebar 4000 piksel di dalam kotak 400 piksel. Browser tetap mengunduh seluruh file. Terapkan hal-hal berikut:
- Ubah ukuran sesuai ukuran tampilan sebenarnya. Untuk konten blog, lebar 800–1200 piksel biasanya cukup; untuk layar resolusi tinggi, sediakan versi dua kali lipat ukurannya melalui
srcset. - Kompres. Untuk foto, kualitas 75–85 sering kali sudah mengecilkan ukuran file secara signifikan tanpa terlihat perbedaannya oleh mata.
- Bersihkan metadata. Data EXIF (lokasi, perangkat) menambah beban dan menimbulkan risiko privasi.
- Tetapkan target. Sebagai pendekatan umum, usahakan gambar konten tetap di bawah beberapa ratus KB; bahkan untuk gambar utama yang besar, tetapkan batas.
Pastikan nilai width dan height dicantumkan di HTML. Dengan begitu browser mengetahui berapa ruang yang harus disiapkan sebelum gambar diunduh, dan konten tidak bergeser ke bawah saat halaman dimuat.
Gambar responsif: srcset dan sizes
Mengirim gambar yang sama dengan lebar 360 piksel ke ponsel dan dengan lebar 1920 piksel ke monitor adalah pemborosan. Dengan srcset, Anda mendefinisikan beberapa versi dengan lebar berbeda; dengan sizes, Anda memberi tahu seberapa besar gambar menempati layar, dan browser memilih file yang paling sesuai. Misalnya, tiga versi dengan lebar 480, 800, dan 1200 piksel sudah cukup untuk sebagian besar blog dan halaman produk. Di perangkat seluler, penghematan datanya terasa jelas dan langsung berdampak pada waktu LCP.
Di mana gambar sebaiknya diletakkan?
Google juga memahami topik gambar dari teks di sekitarnya. Karena itu, letakkan gambar di dekat paragraf yang membahas topiknya, dan tambahkan keterangan singkat yang merangkum isinya. Judul bagian tempat gambar berada memperkuat hubungan gambar dengan topiknya. Daripada langsung memakai gambar stok yang berhak cipta, sebaiknya gunakan foto orisinal yang Anda ambil sendiri jika memungkinkan; foto orisinal memberi kepercayaan kepada pengguna dan membedakan Anda dari gambar stok yang berulang.
Lazy loading dan CLS
Lazy loading berarti gambar yang berada di bawah layar tidak dimuat sampai pengguna mendekatinya. Di browser modern, ini diterapkan dengan satu atribut:
<img src="kanepe.webp" alt="Sofa tiga dudukan berbahan kain abu-abu" width="800" height="600" loading="lazy">
- Jangan terapkan lazy loading pada gambar di atas lipatan (above the fold). Jika gambar terbesar di halaman dimuat terlambat, LCP akan memburuk. Untuk gambar ini, Anda bisa menggunakan
fetchpriority="high". - Gambar pada galeri, daftar produk, dan bagian bawah artikel panjang paling cocok untuk lazy loading.
- Selalu gunakan bersama
width/height; jika tidak, gambar yang dimuat akan menggeser tata letak. - Gunakan
<img src>yang sebenarnya agar Google dapat menemukan gambarnya; gambar yang hanya berupa latar belakang CSS mungkin tidak diindeks dalam pencarian gambar.
Untuk informasi lebih lanjut tentang metrik kecepatan, lihat panduan Core Web Vitals kami.
Sitemap gambar dan data terstruktur
Google menemukan sebagian besar gambar selama perayapan biasa. Meski begitu, untuk galeri yang dimuat dengan JavaScript atau struktur yang rumit, memasukkan gambar ke dalam sitemap bisa membantu. Pada sitemap standar, di dalam setiap <url> digunakan elemen <image:image> dan <image:loc>:
- Tambahkan namespace gambar di bagian awal sitemap.
- Untuk setiap halaman, daftarkan alamat gambar yang muncul di halaman tersebut.
- Kirim sitemap melalui Search Console dan periksa kesalahannya.
- Pastikan robots.txt Anda tidak memblokir gambar.
Pada konten seperti produk, resep, atau artikel, mencantumkan alamat gambar di dalam data terstruktur (schema) memudahkan Google menggunakan gambar tersebut dalam hasil kaya. Untuk cara menggunakan Search Console, lihat panduan pemula kami.
Kesalahan gambar yang sering terjadi
- Menanamkan teks ke dalam gambar: Menulis informasi penting (harga, alamat, promo) hanya di dalam gambar membuatnya tidak terlihat oleh mesin pencari dan pembaca layar.
- Menyalin alt text yang sama ke semua gambar: Alih-alih memakai satu alt text untuk lima gambar di galeri produk, deskripsikan masing-masing (depan, samping, detail) secara terpisah.
- Gambar utama yang terlalu besar: Sebuah slide gambar layar penuh kadang berukuran beberapa MB alih-alih ratusan KB; kecilkan dulu ukurannya, lalu tinjau desainnya.
- Memblokir gambar dengan robots.txt: Aturan yang memblokir folder gambar bisa membuat situs Anda tidak pernah muncul di Google Gambar.
- Tautan gambar yang rusak: Gambar yang dipindahkan atau dihapus akan menghasilkan 404; perbaiki dengan pemindaian rutin.
Daftar periksa dan pengukuran
- Apakah nama file bermakna, menggunakan ASCII, dan dipisahkan dengan tanda hubung?
- Apakah alt text menjelaskan gambar secara singkat dan alami?
- Apakah gambar menggunakan WebP/AVIF atau format yang sesuai?
- Apakah tidak ada file yang lebih besar daripada ukuran tampilannya yang dimuat?
- Apakah gambar di luar area atas sudah menggunakan
loading="lazy"? - Apakah
widthdanheightsudah ditentukan? - Apakah sitemap gambar dan robots.txt sudah benar?
Untuk pengukuran, PageSpeed Insights langsung menampilkan saran "Sajikan gambar dalam format generasi berikutnya" dan "Gambar berukuran tepat". Di laporan performa Search Console, Anda juga bisa memilih jenis pencarian "Gambar" untuk memantau secara terpisah tayangan dan klik dari pencarian gambar. Optimasi gambar yang membuat halaman lebih cepat juga membantu menurunkan rasio pentalan.
Kesimpulan
SEO gambar bukan satu langkah besar, melainkan kebiasaan kecil yang diulang pada setiap gambar: nama file yang bermakna, alt text yang jujur, format dan ukuran yang tepat, lazy loading untuk area di bawah layar, dan sitemap gambar bila diperlukan. Keuntungan terbesar biasanya datang dari gambar yang paling berat; mulailah dengan mencari beberapa gambar terberat di PageSpeed Insights lalu tangani itu terlebih dahulu. Hasilnya adalah trafik tambahan dari Google Gambar dan situs yang lebih cepat. Peringkat tetap ditentukan oleh algoritma Google; tugas Anda adalah membuat gambar yang mudah dipahami dan tetap ringan.