Tujuan Pembelajaran
Mahasiswa diharapkan mampu mengoptimalkan website menggunakan teknik SEO dasar untuk meningkatkan visibilitas, serta melakukan debugging dan inspeksi kode menggunakan developer tools browser untuk mengidentifikasi dan memperbaiki error.
Optimasi Website dengan Teknik SEO Dasar
SEO (Search Engine Optimization) adalah teknik untuk membuat website mudah ditemukan mesin pencari seperti Google. Teknik dasar: gunakan meta tags (description, keywords), struktur heading (h1-h6) hierarkis, alt text di gambar, dan URL deskriptif. SEO meningkatkan traffic organik tanpa bayar iklan.
Analoginya: SEO seperti etalase toko yang menarik perhatian pelanggan. Tanpa SEO, website seperti toko tersembunyi.
Debugging dan Inspeksi Kode dengan Developer Tools
Developer tools (dev tools) di browser (Chrome/Firefox) adalah toolkit untuk debug web. Console tab untuk log error/JS, Elements tab inspect HTML/CSS, Network tab cek request, Performance tab audit speed. Gunakan untuk fix bug seperti JS error atau layout rusak.
Langkah debug: 1. Buka dev tools (F12). 2. Reproduce error. 3. Cek console untuk pesan error. 4. Inspect elemen untuk styling issue.
Contoh Kode dan Implementasi
<!-- SEO Meta Tags di head -->
<meta name="description" content="Website pembelajaran Pemrograman Web I untuk mahasiswa IT Semester 5">
<meta name="keywords" content="HTML, CSS, JavaScript, web development">
<title>Pemrograman Web I - Materi Lengkap</title>
<!-- Struktur Heading untuk SEO -->
<h1>Judul Utama Halaman</h1>
<h2>Sub Judul</h2>
<p>Konten paragraf.</p>
<!-- Alt Text di Gambar -->
<img src="diagram.jpg" alt="Diagram struktur web untuk SEO">
<!-- Debug JS di Console -->
console.log("Debug message"); // Muncul di dev tools console
// Jika error, cek stack trace untuk lokasi bug
Penjelasan: Meta tags bantu Google index halaman. Heading buat struktur readable. Alt text untuk gambar tidak load. Console log untuk track variabel/error.
Tips Praktis
- Untuk SEO, gunakan tools gratis seperti Google Search Console untuk monitor ranking.
- Debug JS: Tambah breakpoint di dev tools Sources tab untuk pause eksekusi.
- Optimasi performa: Minify CSS/JS dengan tools online, compress gambar.
- Jika website lambat, cek Network tab untuk resource besar, gunakan lazy loading.
Ringkasan Materi
SEO buat website ditemukan user, debugging buat kode bebas error. Kombinasi ini buat web profesional dan efisien.
Latihan dan Diskusi
1. Tambah meta description dan keywords ke halaman HTML, test di Google search simulator. 2. Buat halaman dengan JS error (misal: variabel undefined), debug di console. 3. Inspect elemen card di dev tools, ubah CSS real-time. 4. Diskusikan: Mengapa SEO penting untuk bisnis online? Jika stuck, screenshot dev tools dan tanyakan.