SEO Gambar: 12 Tips Praktis untuk Menambah Trafik Organik

📖 Catatan sumber: artikel ini disusun berdasarkan gagasan yang dibahas dalam tulisan Image SEO: 12 Actionable Tips, yang aslinya terbit di Ahrefs. Isinya di sini ditulis ulang, diperluas, dan disesuaikan untuk pembaca Indonesia, dengan contoh, alat, dan rujukan yang relevan bagi pasar lokal.

Banyak orang mengira SEO gambar hanya soal menyelipkan kata kunci di atribut alt. Padahal ada setidaknya dua belas faktor yang memengaruhi cara Google menemukan, memahami, dan memeringkat gambar di situs Anda. Mengabaikan faktor-faktor itu berarti membuang trafik yang sebenarnya mudah diraih — termasuk dari Google Gambar, yang menyumbang bagian besar pencarian global.

Google sendiri terus maju dalam pengenalan gambar berbasis machine learning. Tapi itu tidak membuat SEO gambar jadi usang — sebaliknya, Google tetap memakai semua sinyal yang tersedia (nama file, alt text, konteks halaman, kecepatan muat) untuk menafsirkan dan memeringkat gambar secara akurat.

1. Beri nama file secara deskriptif

Nama file adalah salah satu sinyal pertama yang dipakai Google untuk memahami isi sebuah gambar. Kamera dan ponsel menghasilkan nama generik seperti IMG_0023.JPG atau DSC_4817.jpg — yang sama sekali tidak menyampaikan apa pun kepada mesin pencari.

Google sendiri menyatakan dalam pedoman resminya bahwa nama file adalah petunjuk tentang isi gambar. Anjurannya sederhana: pakai kata kunci yang deskriptif, dipisahkan tanda hubung, tanpa berlebihan:

Bagus: kue-cokelat.jpg
Buruk: IMG_2947.jpg
Juga buruk: kue-cokelat-resep-hidangan-penutup-manis.jpg (keyword stuffing)

Mengganti nama gambar sebelum diunggah adalah kebiasaan sederhana yang berpengaruh — terutama untuk toko online, blog kuliner, portofolio, dan situs mana pun yang mengandalkan trafik dari pencarian gambar.

2. Tulis teks alternatif (alt text) yang berguna

Atribut alt menjelaskan sebuah gambar kepada browser. Ia ditampilkan saat gambarnya gagal dimuat, dibaca oleh pembaca layar bagi penyandang tunanetra, dan dipakai Google untuk memahami isi visual halaman.

Sintaksnya sederhana:

<img src="anak-anjing-dalmatian.jpg" alt="Anak anjing dalmatian bermain di taman">

Google memakai alt text bersama algoritme penglihatan komputer dan konteks halaman untuk memahami isi gambar. Anjurannya adalah menulis deskripsi yang berguna dan kaya informasi, memakai kata kunci secara kontekstual — bukan menumpuk kata tanpa makna (keyword stuffing).

Ada jalan pintas yang ampuh: lengkapi kalimat "Ini adalah foto ___". Isian di bagian kosongnya, setelah sedikit dirapikan, biasanya sudah menjadi alt text yang bagus. Contoh:

"Ini adalah foto cheesecake cokelat dengan saus stroberi." → alt="Cheesecake cokelat dengan saus stroberi"
"Ini adalah foto laptop dengan layar pecah di atas meja." → alt="Laptop dengan layar pecah di atas meja kantor"

Untuk gambar produk, mencantumkan nomor model atau kode SKU di alt text bisa membantu Anda muncul pada pencarian teknis yang spesifik. Jangan lupakan juga keterangan gambar — Google menarik informasi tentang isi gambar dari teks di sekitarnya, termasuk keterangan yang tampak di halaman.

3. Pilih format file yang tepat

Pilihan format berpengaruh langsung pada ukuran file — dan karenanya pada kecepatan muat halaman. Tiga format yang paling umum di web adalah JPG, PNG, dan WebP, masing-masing dengan ciri yang berbeda:

Format	Paling cocok untuk	Transparansi	Ukuran khas
JPG	Fotografi, gambar bergradasi	Tidak	Kecil hingga sedang
PNG	Logo, ikon, tangkapan layar bertulisan	Ya	Sedang hingga besar
WebP	Segala keperluan web modern	Ya	25–35% lebih kecil dari JPG/PNG
GIF	Animasi sederhana	Sebagian	Bervariasi
SVG	Logo, ikon, ilustrasi vektor	Ya	Sangat kecil

Aturan umumnya: pakai JPG untuk fotografi, PNG untuk gambar yang butuh latar transparan dan teks tajam, dan WebP sebisa mungkin untuk web — format ini menawarkan kompresi yang lebih baik pada kualitas setara. Gunakan Konversi dari ImageTools untuk mengubah format sebelum mengunggah.

4. Ubah ukuran gambar sesuai dimensi tampilnya

Mengunggah foto selebar 4000px ke situs yang menampilkan gambar pada 800px adalah pemborosan bandwidth. Browser mengunduh gambar utuh lalu membuang piksel berlebihnya — pengunjung menunggu lebih lama tanpa keuntungan visual apa pun.

Kenali lebar tampil maksimum gambar di tata letak Anda (biasanya antara 800px dan 1440px, tergantung jenis gambar dan situsnya), lalu ubah ukurannya sebelum mengunggah. Untuk menutupi layar Retina (HiDPI), pakai dua kali lebar tampilnya. Manfaatkan Ubah Ukuran dari ImageTools untuk menyetel dimensinya dengan presisi.

Ubah ukuran dan kompres gambar Anda sekarang

Setel dimensi dan pangkas bobot gambar situs Anda secara gratis, tanpa mengirim file ke server luar.

Ubah Ukuran Kompres

5. Kompres gambar tanpa penurunan kualitas yang terlihat

Kompresi adalah proses memperkecil ukuran file tanpa mengubah dimensi gambar. Untuk foto JPG, menurunkan kualitas dari 100% ke 80% bisa memperkecil file 5 sampai 10 kali lipat dengan selisih yang tak kasatmata di layar.

Kecepatan muat adalah faktor peringkat yang sudah dikonfirmasi Google — baik di desktop maupun di ponsel. Gambar sering menjadi penyumbang terbesar bobot sebuah halaman web. Mengompres semua gambar sebelum diunggah adalah optimasi SEO teknis dengan imbal hasil tertinggi dibanding usahanya.

Target bobot yang praktis menurut jenis gambar:

Banner / hero selebar layar: di bawah 200 KB
Foto produk atau gambar blog: 60–150 KB
Thumbnail atau gambar mini: 15–40 KB
Logo dalam PNG/WebP: di bawah 30 KB

Pakai Kompres dari ImageTools untuk memperkecil JPG, PNG, dan WebP langsung di browser — tanpa mengirimnya ke server luar.

6. Buat sitemap gambar

Sitemap gambar memberi tahu Google keberadaan gambar yang mungkin tidak ditemukannya sendiri — terutama gambar yang dimuat lewat JavaScript atau tertanam di galeri yang rumit. Berbeda dari sitemap biasa, sitemap gambar boleh memuat URL dari domain lain (seperti CDN).

Kalau situs Anda memakai WordPress dengan plugin Yoast SEO, gambarnya sudah otomatis masuk ke sitemap. Untuk situs yang dibuat sendiri, sitemap gambar bisa ditambahkan manual dengan mengikuti dokumentasi resmi Google. Tag utama yang tersedia adalah image:loc (URL gambar), image:title dan image:caption.

7. Pakai data terstruktur untuk gambar produk

Google mendukung data terstruktur (Schema.org) untuk gambar dalam berbagai konteks — resep, produk, artikel, acara. Kalau diterapkan dengan benar, data itu memungkinkan gambar tampil di hasil kaya (rich results) di Google, dengan sorotan visual tambahan yang menaikkan rasio klik.

Untuk toko online, markup produk yang menyertakan gambar sangat berharga: produk dengan gambar yang ditandai dengan benar bisa muncul di Google Shopping dan di kartu produk pada panel pengetahuan Google.

8. Terapkan lazy loading

Lazy loading adalah teknik memuat gambar hanya ketika gambar itu hampir masuk ke area layar yang terlihat, alih-alih mengunduh semuanya sekaligus di awal. Di halaman dengan banyak gambar (blog panjang, daftar produk), lazy loading bisa memangkas bobot awal halaman sebesar 60–80%.

Cara paling sederhana sudah tersedia secara bawaan di HTML:

<img src="produk.webp" alt="Sepatu biru" loading="lazy">

Penting: jangan pernah menerapkan loading="lazy" pada gambar utama di atas garis lipat (gambar pertama yang terlihat tanpa menggulir halaman). Hal itu memperlambat LCP — Largest Contentful Paint, salah satu metrik Core Web Vitals — dan langsung merugikan peringkat Anda.

9. Tetapkan width dan height di semua tag gambar

Saat browser belum mengetahui ukuran sebuah gambar sebelum memuatnya, ia tidak menyediakan ruang yang tepat di tata letak — dan begitu gambarnya muncul, isi halaman "melompat". Gejala inilah yang diukur Google sebagai CLS (Cumulative Layout Shift), satu lagi Core Web Vital.

Solusinya adalah selalu mendeklarasikan width dan height pada tag gambar:

<img src="produk.webp" alt="Sepatu biru" width="800" height="800" loading="lazy">

Nilainya tidak harus sama dengan ukuran tampil sebenarnya — keduanya hanya menetapkan rasio agar browser menyediakan ruang yang tepat sebelum gambarnya dimuat.

10. Pakai gambar responsif dengan srcset

Atribut srcset memungkinkan Anda menyediakan beberapa versi dari satu gambar untuk berbagai ukuran layar. Browser otomatis memilih versi yang paling pas — menyajikan gambar lebih kecil untuk ponsel dan lebih besar untuk desktop. Di situs dengan trafik ponsel yang tinggi, cara ini bisa memangkas data yang ditransfer sebesar 40–60%.

<img
  src="produk-800.webp"
  srcset="produk-400.webp 400w,
          produk-800.webp 800w,
          produk-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Sepatu biru"
  width="800" height="800"
  loading="lazy"
>

11. Optimalkan gambar unggulan untuk Open Graph dan media sosial

Saat seseorang membagikan sebuah URL di WhatsApp, Instagram, LinkedIn, atau platform lain, gambar yang tampil pada pratinjaunya berasal dari meta tag Open Graph. Kalau tag itu tidak disiapkan, platformnya akan memilih gambar mana pun dari halaman — dan hasilnya sering kali buruk.

Selalu siapkan tag og:image dengan gambar berukuran 1200×630px di tiap halaman penting situs Anda:

<meta property="og:image" content="https://situsanda.com/gambar/pratinjau-artikel.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Gambar pratinjau yang dirancang baik — dengan judul yang terbaca, identitas visual merek, dan gambar yang relevan — menaikkan rasio klik dari tautan yang dibagikan secara signifikan.

12. Perhatikan konteks seluruh halaman

Google tidak menilai gambar secara terpisah. Ia membaca keseluruhannya: teks di sekitar gambar, judul halaman, konteks semantik, elemen visual lain, keterangan di bawah gambar, bahkan teks tautan yang mengarah ke halaman itu. Gambar sepatu merah di halaman tentang mode perempuan punya konteks yang sama sekali berbeda dengan gambar yang sama di halaman kuliner.

Praktik baik soal konteks:

Tempatkan gambar berdekatan dengan teks yang menjelaskannya atau yang dirujuknya
Pakai keterangan yang terlihat di bawah gambar sebisa mungkin
Pastikan isi gambar relevan dengan tema halamannya
Pakai judul halaman dan heading yang menegaskan isi gambar utamanya

🔍 Audit cepat: pakai Google Search Console untuk memeriksa gambar mana saja di situs Anda yang terindeks. Buka Pengindeksan → Halaman, lalu saring dengan "gambar" untuk melihat status pengindeksan dan masalah yang muncul.

Checklist SEO gambar

☑ Nama file deskriptif dengan kata kunci (dipisah tanda hubung, tanpa keyword stuffing)
☑ Atribut alt yang deskriptif dan kontekstual pada semua gambar
☑ Format yang tepat untuk tiap jenis: WebP atau JPG untuk foto, PNG/SVG untuk logo dan ikon
☑ Dimensi disesuaikan dengan ukuran tampil sebenarnya (maks. 2× untuk Retina)
☑ Kompresi diterapkan — bobot di bawah target tiap jenis
☑ width dan height dideklarasikan pada semua tag <img>
☑ loading="lazy" pada gambar di bawah garis lipat
☑ Gambar LCP tanpa lazy loading, dengan fetchpriority="high" bila memungkinkan
☑ Sitemap gambar sudah disiapkan (atau dipastikan plugin-nya sudah melakukannya)
☑ Meta tag og:image disiapkan di semua halaman utama
☑ Data terstruktur untuk gambar produk bila relevan
☑ Gambar dikelilingi teks, keterangan, dan heading yang relevan

Pertanyaan yang sering diajukan

Apakah alt text dan keterangan gambar itu sama?

Bukan. Alt text adalah atribut HTML yang tidak terlihat oleh pembaca biasa — ia hanya muncul saat gambarnya gagal dimuat, dan dibaca oleh pembaca layar serta oleh Google. Keterangan gambar adalah teks yang tampak di bawah gambar pada halaman. Keduanya saling melengkapi dan berdampak berbeda pada SEO: alt text langsung menjelaskan isi gambarnya, sedangkan keterangan menambah konteks naratif dan membantu Google memahami hubungan antara gambar dan tulisan di sekitarnya.

Apakah gambar WebP benar-benar menaikkan peringkat?

Secara tidak langsung, ya. WebP menghasilkan file 25–35% lebih kecil daripada JPG dan PNG pada kualitas setara, sehingga halaman jadi lebih cepat. Kecepatan muat adalah faktor peringkat yang sudah dikonfirmasi Google, terutama lewat Core Web Vitals (LCP). Halaman yang lebih ringan dimuat lebih cepat, LCP-nya lebih kecil, dan hal itu memengaruhi peringkat. WebP sendiri bukan faktor langsung, tetapi dampaknya pada performa nyata.

Apakah Google Gambar mendatangkan trafik yang berarti?

Tergantung nichenya. Untuk situs kuliner, dekorasi, mode, produk fisik, dan kategori apa pun yang pembacanya mencari inspirasi visual, Google Gambar bisa menjadi sumber trafik yang besar. Untuk konten yang murni informatif atau B2B, dampaknya lebih kecil. Ada baiknya Anda memantau di Google Search Console berapa banyak tayangan dan klik yang khusus datang dari pencarian gambar.

Haruskah alt text yang sama dipakai untuk gambar yang berulang di situs?

Kalau gambarnya benar-benar sama dan muncul dalam konteks yang sama, alt text yang sama masih bisa diterima. Tapi kalau gambar yang sama muncul di konteks berbeda (misalnya foto produk yang tampil di beranda dan juga di halaman produknya), menyesuaikan alt text dengan konteks tiap halaman adalah praktik yang lebih baik — dan memberi lebih banyak konteks kepada Google.

Bagaimana mengetahui gambar di situs saya sudah teroptimasi?

Google PageSpeed Insights (pagespeed.web.dev) menganalisis URL mana pun dan merinci masalah pada gambarnya — ukuran yang tidak pas, kompresi yang kurang, format yang ketinggalan zaman. Google Search Console juga menunjukkan gambar mana yang terindeks beserta galat yang muncul. Untuk audit yang lebih menyeluruh, alat seperti Ahrefs Site Audit atau Screaming Frog merayapi seluruh situs dan mendaftar gambar tanpa alt text, ukuran yang berlebihan, dan masalah lainnya.