Pada Part 8, kamu sudah belajar bagaimana HTML dan meta tag memengaruhi SEO. Sekarang di Part 9, kita fokus pada gambar, media, dan performa.
Kecepatan website adalah faktor penting dalam SEO modern. HTML yang optimal membantu:
- Loading lebih cepat
- User experience lebih baik
- Ranking Google meningkat
Mengapa Optimasi Image Penting?
Gambar sering menjadi penyebab halaman lambat. Tanpa optimasi, SEO dan UX akan turun.
Manfaat optimasi image:
- Page speed meningkat
- Core Web Vitals lebih baik
- Image SEO maksimal
Format Gambar yang SEO-Friendly
Gunakan format modern:
- WebP (disarankan)
- AVIF (jika tersedia)
- JPEG / PNG (fallback)
Contoh penggunaan:
<img src="example/html-seo.webp" alt="Optimasi gambar HTML untuk SEO">
Alt Text yang Benar
Alt text berfungsi untuk:
- SEO gambar
- Aksesibilitas
Aturan alt text:
- Deskriptif
- Natural
- Tidak keyword stuffing
<img src="example/semantic-html.webp" alt="Contoh semantic HTML untuk struktur SEO">
Lazy Loading Gambar
Lazy loading membuat gambar dimuat saat diperlukan.
<img src="example/gambar.webp" loading="lazy" alt="Lazy loading image HTML">
Manfaat:
- Initial load lebih cepat
- Bandwidth lebih hemat
Optimasi Video dengan HTML
Gunakan elemen video secara bijak.
<video controls preload="metadata" width="480">
<source src="example/video.mp4" type="video/mp4">
</video>
Tips video SEO:
- Jangan autoplay
- Gunakan preload="metadata"
- Berikan teks pendukung
Audio HTML dan Performa
<audio controls preload="none">
<source src="example/audio.mp3" type="audio/mpeg">
</audio>
Gunakan audio hanya jika diperlukan.
Responsive Image (srcset)
srcset membantu browser memilih gambar sesuai ukuran layar.
<img
src="example/image-800.webp"
srcset="example/image-400.webp 400w, example/image-800.webp 800w"
sizes="(max-width: 600px) 400px, 800px"
alt="Responsive image HTML SEO">
Performance HTML Best Practice
- Gunakan ukuran gambar sesuai tampilan
- Hindari gambar besar tidak perlu
- Minimalkan embed berat
Kesalahan Umum
- Alt kosong tanpa alasan
- Gambar terlalu besar
- Video autoplay
- Tidak pakai lazy loading
Ringkasan Part 9
- Optimasi image meningkatkan SEO
- Media memengaruhi page speed
- HTML sederhana = performa tinggi
Lanjutan Materi
Di Part 10, kita akan membahas:
- Best Practice HTML Lengkap
- Checklist HTML SEO
- Penutup roadmap belajar HTML
Sebelumnya: Part 8
HTML untuk SEO