Highlights

Panduan Kolaborasi Desainer Web & Klien

OdeRusli 28.08.2022

Checklist Praktis SEO Pre-Launch: Panduan Kolaborasi Desainer Web & Klien

Checklist ini dirancang sebagai panduan kerja bersama sebelum peluncuran situs web (pre-launch) untuk memastikan estetika visual selaras dengan optimasi mesin pencari secara teknis dan struktural.

1. Struktur Arsitektur & Semantik Konten

[ ] Hierarki Heading Bergaya Semantik ($H_1, H_2, H_3$): Setiap halaman hanya memiliki tepat satu tag $H_1$ sebagai judul utama, diikuti oleh $H_2$ dan $H_3$ secara berurutan tanpa melompati tingkatan (misal: $H_1$ langsung ke $H_3$).
[ ] Struktur URL Bersih & Ramah SEO: URL dibuat singkat, deskriptif, menggunakan huruf kecil (lowercase), serta dipisahkan dengan tanda hubung (contoh: [domain.com/layanan/desain-web](https://domain.com/layanan/desain-web), bukan [domain.com/?p=123](https://domain.com/?p=123)).
[ ] Navigasi & Arsitektur Informasi (Maksimal 3 Klik): Seluruh halaman penting dapat diakses dalam maksimal 3 kali klik dari halaman utama (homepage).
[ ] Penggunaan Teks Asli (Bukan Teks dalam Gambar): Semua informasi penting berupa teks ditulis menggunakan kode HTML, bukan berupa gambar grafis terkompresi yang tidak dapat dibaca oleh mesin pencari.

2. Kinerja Teknis & Core Web Vitals

[Optimasi Format WebP/AVIF] ──> [Lazy Loading Gambar/Video] ──> [Minifikasi CSS/JS] ──> [Skor LCP & CLS Hijau]

[ ] Kompresi Media Modern: Seluruh gambar dikompresi dan dikonversi ke format modern seperti WebP atau AVIF dengan resolusi yang disesuaikan dengan kontainer tampilan.
[ ] Penerapan Lazy Loading: Gambar dan elemen iframe di bawah lipatan layar (below-the-fold) menerapkan atribut loading="lazy".
[ ] Stabilitas Tata Letak (Prevent Cumulative Layout Shift / CLS): Atribut width dan height ditentukan secara eksplisit pada tag <img> atau elemen video untuk mencegah pergeseran tata letak saat pemuatan.
[ ] Minifikasi Aset Kode: Berkas CSS, JavaScript, dan HTML telah diminifikasi (minified) untuk mengurangi ukuran berkas transfer.

3. Pengalaman Pengguna Seluler (Mobile UX) & Aksesibilitas (a11y)

[ ] Desain Responsif Utuh: Tidak ada pengguliran horizontal (horizontal scrolling) pada perangkat seluler, dan seluruh elemen dapat menyesuaikan lebar layar.
[ ] Ukuran Target Sentuh (Touch Targets): Tombol dan tautan memiliki ukuran serta jarak yang cukup (minimal $48 \times 48$ piksel) agar mudah diklik di layar sentuh.
[ ] Teks Alternatif (Alt Text) pada Gambar: Seluruh gambar dekoratif maupun informatif memiliki atribut alt yang deskriptif untuk keterbacaan screen reader dan indeks gambar Google.
[ ] Kontras Warna Memadai: Rasio kontras antara warna teks dan latar belakang memenuhi standar WCAG (minimal 4.5:1 untuk teks normal).

4. Elemen Meta & Pengalihan Teknis (Technical SEO)

Elemen Teknis	Deskripsi & Batasan	Penanggung Jawab
Title Tag	Unik di setiap halaman, mengandung kata kunci utama, panjang 50–60 karakter.	Klien / Tim Konten
Meta Description	Rangkuman menarik, memuat ajakan bertindak (CTA), panjang 150–160 karakter.	Klien / Tim Konten
Favicon & Touch Icons	Tersedia dalam berbagai ukuran (.ico, .png) untuk browser dan perangkat seluler.	Desainer Web
*Peta Situs XML (XML Sitemap)*	Diumpan secara otomatis dan siap didaftarkan ke Google Search Console.	Desainer / Pengembang
Robots.txt	Memastikan jalur penting tidak terhalang (noindex/nofollow) secara tidak sengaja.	Desainer / Pengembang
Redirect 301	Pengalihan dari URL lama ke URL baru untuk situs web yang mengalami redesign.	Desainer / Pengembang

5. Keamanan & Pengujian Akhir

[ ] Sertifikat SSL (HTTPS): Seluruh tautan (internal links) dan aset menggunakan protokol aman https:// tanpa adanya masalah mixed content.
[ ] Analitik & Pencatatan Data: Kode Google Analytics 4 (GA4) dan verifikasi Google Search Console sudah terpasang dengan benar.
[ ] Pemeriksaan Halaman 404 Kustom: Halaman error 404 dirancang ramah pengguna dengan menyediakan navigasi kembali ke halaman utama.