SEO Gambar: Teks Alt, Ukuran File, Format, dan Lazy Loading

Gambar membuat halaman lebih mudah dipahami dan lebih menarik. Gambar juga bisa mendatangkan pengunjung dari Google Gambar dan fitur pencarian visual. Namun gambar biasanya bagian terberat sebuah halaman, dan gambar yang tidak dioptimalkan adalah salah satu penyebab paling umum situs menjadi lambat.

SEO gambar berarti menyeimbangkan dua sisi: membuat gambar dapat dipahami mesin pencari dan dapat diakses semua orang, sekaligus tetap cepat.

Tulis teks alt yang bermanfaat

Atribut alt menggambarkan gambar dengan kata-kata:

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

Teks alt memiliki tiga tugas:

1. Aksesibilitas – pembaca layar membacakannya untuk orang yang tidak dapat melihat gambar
2. Cadangan – browser menampilkannya jika gambar gagal dimuat
3. Pemahaman – mesin pencari menggunakannya, bersama teks di sekitarnya, untuk mengetahui isi gambar

Cara menulis teks alt yang baik

• Jelaskan apa yang ditampilkan gambar dan mengapa gambar itu ada di halaman
• Bersikaplah spesifik: “sepeda lipat Brompton merah dalam keadaan terlipat di samping meja” lebih baik daripada “sepeda”
• Buat ringkas – biasanya di bawah 125 karakter
• Jangan mengawali dengan “gambar” atau “foto”; pembaca layar sudah mengumumkannya sebagai gambar
• Gunakan kata kunci relevan hanya jika memang menggambarkan gambar secara alami

Gambar dekoratif

Gambar yang murni dekoratif – pembatas, hiasan latar – harus memiliki atribut alt kosong: alt="". Ini memberi tahu pembaca layar untuk melewatinya. Menghilangkan atribut sama sekali adalah kesalahan; beberapa pembaca layar akan membacakan nama filenya.

Gunakan nama file yang deskriptif

IMG_4821.jpg tidak memberi tahu apa pun. sepeda-lipat-brompton-terlipat.jpg memberi mesin pencari petunjuk tambahan. Gunakan kata berhuruf kecil yang dipisahkan tanda hubung.

Pilih format yang tepat

Bagi sebagian besar situs, menyajikan WebP atau AVIF dengan elemen <picture> (dan JPEG sebagai cadangan bila perlu) adalah satu-satunya peningkatan terbesar:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

Sebagian besar CMS, plugin gambar, dan CDN dapat mengonversi gambar ke format modern secara otomatis.

Ubah ukuran dan kompres

Kesalahan umum adalah mengunggah foto selebar 4.000 piksel langsung dari kamera lalu menampilkannya selebar 800 piksel. Browser tetap mengunduh seluruh file.

• Ubah ukuran gambar ke ukuran terbesar yang benar-benar ditampilkan (dua kali lipat untuk layar berkepadatan tinggi bila perlu)
• Kompres – pengaturan kualitas sekitar 75–85% biasanya tidak bisa dibedakan dari aslinya
• Usahakan sebagian besar gambar konten di bawah 150–200 KB, dan gambar hero idealnya di bawah 300 KB

Sajikan gambar responsif

Ponsel tidak membutuhkan gambar berukuran desktop. Atribut srcset dan sizes memungkinkan browser memilih file yang tepat:

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

WordPress dan sebagian besar framework modern membuatnya secara otomatis.

Tetapkan lebar dan tinggi untuk mencegah pergeseran tata letak

Jika gambar tidak memiliki atribut width dan height, browser tidak tahu berapa banyak ruang yang harus disediakan, sehingga konten melompat saat gambar dimuat. Ini merusak Cumulative Layout Shift (CLS), salah satu Core Web Vitals. Selalu sertakan dimensi gambar (atau gunakan properti CSS aspect-ratio); CSS responsif tetap dapat menskalakannya.

Gunakan lazy loading untuk gambar di bawah lipatan

loading="lazy" memberi tahu browser untuk memuat gambar hanya saat gambar itu hampir masuk ke tampilan saat di-scroll:

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

Gunakan untuk gambar di bagian bawah halaman, tetapi jangan untuk gambar hero utama. Lazy loading pada gambar terbesar di layar pertama menunda Largest Contentful Paint. Untuk gambar itu, pertimbangkan fetchpriority="high".

Bantu gambar ditemukan

• Letakkan gambar di dekat teks yang relevan, dan tambahkan keterangan bila berguna – Google memakai konten di sekitarnya untuk memahami gambar
• Gunakan elemen <img> standar, bukan latar CSS, untuk gambar bermakna agar mesin pencari dapat menemukannya
• Tambahkan gambar ke sitemap XML, atau sitemap gambar, untuk pustaka gambar yang besar
• Sertakan gambar dalam data terstruktur bila relevan (Product, Article, Recipe)
• Atur og:image agar saat dibagikan di jejaring sosial muncul pratinjau yang menarik

Checklist SEO gambar

• Teks alt deskriptif di setiap gambar bermakna; alt kosong di gambar dekoratif
• Nama file deskriptif dengan tanda hubung
• Format WebP atau AVIF
• Diubah ke ukuran tampilan dan dikompres
• srcset untuk penyajian responsif
• Atribut lebar dan tinggi ditetapkan
• Lazy loading untuk gambar di bawah lipatan, bukan gambar hero
• Masa cache yang panjang di server atau CDN

SEO gambar untuk e-commerce

Foto produk sangat menentukan penjualan. Untuk toko online:

• Tampilkan beberapa sudut dan produk saat digunakan. Google Gambar dan hasil belanja mengutamakan foto produk yang jelas dan berkualitas tinggi.
• Gunakan gambar utama yang bersih dan konsisten untuk setiap produk – gambar ini sering dipakai di hasil belanja.
• Tulis teks alt yang menyebut produk dan variannya: “Sepatu lari wanita Trail Runner X warna toska, tampak samping.”
• Sertakan gambar dalam data terstruktur Product dengan URL absolut.
• Gambar yang dapat diperbesar sebaiknya memuat versi besar hanya saat dibutuhkan, bukan saat halaman dimuat.

SEO gambar untuk blog dan penerbit

• Gunakan gambar orisinal bila memungkinkan. Foto, diagram, dan grafik orisinal dapat mendatangkan link dan menonjol di pencarian gambar; foto stok dipakai di ribuan situs.
• Tambahkan keterangan saat gambar menyampaikan informasi. Keterangan gambar termasuk teks yang paling banyak dibaca di halaman.
• Buat diagram dan infografis yang mudah dibagikan untuk topik kompleks, dengan informasi kuncinya juga ditulis dalam teks.
• Pilih gambar unggulan yang kuat dengan lebar minimal 1200 piksel. Google Discover mengutamakan gambar besar berkualitas tinggi, dan Anda dapat mengizinkan pratinjau besar dengan pengaturan robots max-image-preview:large.

Gambar latar dan CSS

Gambar yang diatur dengan CSS background-image tidak terlihat sebagai konten oleh mesin pencari dan tidak memiliki teks alt. Gunakan hanya untuk dekorasi. Jika gambar membawa makna – produk, grafik, foto tim – gunakan elemen <img>.

CDN gambar dan optimasi otomatis

Mengelola banyak ukuran dan format secara manual cepat menjadi tidak praktis. CDN dan layanan gambar (Cloudflare Images, Cloudinary, imgix, Bunny Optimizer, dan lainnya) serta banyak plugin WordPress dapat:

• Mengonversi gambar ke WebP atau AVIF secara otomatis
• Mengubah ukuran secara langsung untuk setiap perangkat
• Mengompres secara cerdas
• Menyimpan cache gambar di dekat pengunjung

Jika Anda memakainya, pastikan URL gambar tetap stabil dan dapat di-crawl, dan CDN tidak memblokir Googlebot.

Mengukur dampaknya

Buka laporan Performa di Google Search Console dan ubah jenis penelusuran menjadi Gambar untuk melihat berapa banyak klik dan tayangan yang diterima gambar Anda dan untuk kueri apa. Pantau Core Web Vitals di alat yang sama untuk memastikan optimasi gambar meningkatkan Largest Contentful Paint dan Cumulative Layout Shift.

Kesalahan umum

1. Mengunggah foto seukuran kamera dan membiarkan browser mengecilkannya
2. Atribut alt yang hilang, atau teks alt yang dijejali kata kunci
3. Lazy loading pada gambar hero
4. Tanpa lebar dan tinggi, sehingga terjadi pergeseran tata letak
5. Teks yang ditanam di gambar alih-alih ditulis di HTML – tidak terlihat oleh mesin pencari dan pembaca layar serta tidak bisa diterjemahkan
6. Memblokir folder gambar di robots.txt

Poin-poin penting

• Tulis teks alt yang menggambarkan isi gambar dan alasan keberadaannya; gunakan alt kosong untuk gambar dekoratif.
• Sajikan WebP atau AVIF, diubah ke ukuran tampilan dan dikompres.
• Selalu tetapkan lebar dan tinggi untuk mencegah pergeseran tata letak.
• Gunakan lazy loading untuk gambar di bawah lipatan, tetapi jangan pernah untuk gambar hero utama.
• Gunakan elemen img sungguhan untuk gambar bermakna, di dekat teks relevan, dengan nama file deskriptif.
• Periksa data pencarian Gambar di Search Console untuk mengukur trafik yang dibawa gambar.

Pertanyaan yang sering diajukan

Apakah teks alt membantu peringkat?

Teks alt membantu gambar berperingkat di Google Gambar dan menambah konteks pada halaman. Tujuan utamanya adalah aksesibilitas, dan menulisnya untuk manusia biasanya juga paling efektif untuk mesin pencari.

Sebaiknya pakai WebP atau AVIF?

Keduanya didukung dengan baik. AVIF sering menghasilkan file lebih kecil; WebP lebih cepat dienkode dan lebih luas didukung alat lama. Banyak situs menyajikan AVIF dengan WebP sebagai cadangan.

Apakah nama file gambar penting?

Sedikit. Nama file yang deskriptif adalah sinyal tambahan kecil dan memudahkan pengelolaan pustaka media Anda.

Apakah lazy loading baik untuk SEO?

Ya, jika digunakan dengan benar. loading="lazy" bawaan didukung oleh Google. Hanya saja, jangan terapkan lazy loading pada gambar yang terlihat saat halaman pertama kali dimuat.