Dalam ekosistem SEO, Image Optimization (Optimasi Gambar) dan Alt Text adalah dua hal yang tidak bisa dipisahkan. Mengingat Anda mengelola website berbasis Astro (yang sangat mementingkan performa) dan WordPress, memahami kedua hal ini akan sangat membantu mempercepat loading situs dan meningkatkan peringkat di Google Images.
Baca Artikel tentang Pengertian SEO dan Apa Itu Keyword dalam SEO untuk memahami konteks dari artikel ini.
1. Apa itu Image Optimization?
Optimasi gambar adalah proses mengurangi ukuran file gambar sebanyak mungkin tanpa mengurangi kualitas secara signifikan, agar halaman website Anda dimuat lebih cepat.
Cara Melakukan Optimasi Gambar:
- Format File yang Tepat: Di tahun 2026, hindari penggunaan JPEG atau PNG yang besar. Gunakan format modern seperti WebP atau AVIF yang memiliki kompresi jauh lebih baik.
- Kompresi: Gunakan alat seperti TinyPNG atau plugin WordPress (Smush/Imagify) untuk memperkecil ukuran file (targetkan di bawah 100KB per gambar).
- Dimensi yang Sesuai: Jangan mengunggah gambar berukuran 4000px jika hanya akan ditampilkan di kotak berukuran 400px.
- Nama File Deskriptif: Ubah nama file dari
IMG_001.jpgmenjadifilter-kolam-koi-25-liter.jpg. Ini membantu Google memahami isi gambar bahkan sebelum di-crawl.
2. Apa itu Alt Text (Alternative Text)?
Alt Text adalah atribut HTML yang digunakan untuk mendeskripsikan isi sebuah gambar dalam bentuk teks.
Fungsi Utama Alt Text:
- Aksesibilitas: Membantu penyandang tunanetra yang menggunakan screen reader untuk memahami gambar apa yang ada di halaman tersebut.
- SEO Images: Karena Google tidak bisa “melihat” gambar seperti manusia, Google membaca Alt Text untuk menentukan apakah gambar tersebut relevan dengan pencarian pengguna.
- Fallback: Jika koneksi internet buruk dan gambar gagal dimuat, teks inilah yang akan muncul sebagai penggantinya.
Cara Menulis Alt Text yang Benar (Contoh Kasus)
Bayangkan Anda mengunggah foto filter kolam koi Anda di sebuah artikel.
| Kualitas Alt Text | Contoh Penulisan | Penjelasan |
|---|---|---|
| Buruk | alt="gambar" |
Terlalu umum, tidak memberi informasi apa pun. |
| Kurang Baik | alt="kolam koi filter ikan koi jasa kolam koi" |
Ini disebut keyword stuffing (spam), Google tidak menyukainya. |
| Bagus | alt="Sistem filtrasi kolam koi menggunakan barel 25 liter" |
Deskriptif dan menjelaskan konteks gambar dengan jelas. |
| Sangat Bagus | alt="Skema pemasangan filter kolam koi kapasitas 25 liter dengan pompa 2500lph" |
Sangat mendetail, mengandung kata kunci secara alami. |
Implementasi Teknis untuk Proyek Anda
Di WordPress
Saat Anda mengunggah gambar ke Media Library, Anda akan melihat kolom “Alt Text” atau “Teks Alternatif” di sebelah kanan. Pastikan kolom ini selalu diisi sesuai isi gambar.
Di Astro
Karena Anda menggunakan Astro, Anda bisa memanfaatkan komponen bawaan <Image /> dari astro:assets untuk optimasi otomatis:
import { Image } from 'astro:assets';
import myFilterImage from '../assets/filter-koi.jpg';
<Image
src={myFilterImage}
alt="Sistem filtrasi kolam koi barel 25 liter"
format="webp"
/>
Komponen ini akan otomatis melakukan resize dan mengubah format ke WebP untuk Anda.
Checklist Singkat Optimasi Gambar
- Apakah format gambar sudah WebP atau AVIF?
- Apakah ukuran file di bawah 100-150 KB?
- Apakah nama file sudah mengandung kata kunci (bukan kode angka)?
- Apakah setiap gambar sudah memiliki Alt Text yang deskriptif?
- Apakah gambar sudah bersifat responsif (tampil bagus di HP)?
