Untuk memeriksa JavaScript SEO, bandingkan isi HTML awal, DOM setelah halaman dimuat tanpa interaksi, dan bukti yang tersedia dari mesin pencari. Nama framework tidak memberi jawaban apakah halamanmu terbaca. Implementasi data, routing, resource, dan metadata yang menentukan apa yang benar-benar disajikan.
Panduan ini ditujukan kepada developer dan praktisi SEO yang menemukan halaman terlihat normal di browser, tetapi informasi penting tidak muncul pada hasil inspeksi.
Pahami tiga versi yang sedang dibandingkan
HTML awal adalah respons server sebelum JavaScript mengubah halaman. DOM adalah struktur dokumen yang dilihat browser setelah pemrosesan. Hasil inspeksi mesin pencari adalah bukti pengambilan atau rendering dengan konfigurasi dan waktu tertentu.
Google dapat menjalankan JavaScript dan memproses HTML hasil render. Resource yang diblokir tidak dirender, dan waktu pemrosesan tidak bisa disimpulkan dari satu kunjungan browser. Dokumentasi JavaScript SEO Google.
Karena itu, source HTML yang tipis adalah petunjuk dependensi, bukan bukti otomatis halaman pasti gagal diindeks. Sebaliknya, DOM lengkap di laptopmu belum membuktikan setiap crawler menerima isi yang sama.
Pilih informasi yang harus hadir
Jangan mulai dengan menghitung semua script. Pilih lima objek yang penting untuk halaman: judul, satu bagian isi utama, link menuju halaman lain, canonical, dan arahan indexing.
Untuk produk, tambahkan identitas varian, harga, serta ketersediaan sesuai konteks. Untuk panduan, pilih kalimat yang unik agar mudah dicari dalam HTML.
| Objek | HTML awal | DOM tanpa klik | Setelah interaksi | Bukti inspeksi |
|---|---|---|---|---|
| Judul produk | Catat | Catat | Catat | Catat bila tersedia |
| Deskripsi | Catat | Catat | Catat | Catat bila tersedia |
| Link kategori | Catat | Catat | Catat | Catat bila tersedia |
| Canonical | Catat URL | Catat URL | Catat perubahan | Pisahkan deklarasi dan pilihan |
Isi tabel dengan “ada”, “tidak ada”, atau “belum diperiksa”, lalu simpan cuplikan bukti seperlunya.
Contoh ilustratif: halaman detail hanya bekerja setelah navigasi
Misalnya /katalog/meja-lipat/ tampil benar ketika dibuka melalui kartu katalog. Tetapi saat URL itu ditempel langsung pada tab baru, server mengirim halaman utama kosong. Data produk baru tersedia setelah aplikasi menerima state dari halaman sebelumnya.
Untuk membuktikannya, lakukan dua jalur uji:
- Buka homepage, klik katalog, lalu klik produk.
- Buka URL produk langsung pada sesi baru.
Jika hasil berbeda, dokumentasikan perbedaan route dan state. Perbaikan yang perlu dibahas adalah kemampuan URL detail memuat datanya sendiri dan respons server yang sesuai, bukan menambah keyword pada homepage.
Ulangi pada dua produk lain untuk mengetahui apakah masalah berasal dari satu data produk atau template detail secara umum.
Periksa konten yang menunggu klik
Tab, accordion, dan tombol “lihat lebih banyak” tidak selalu bermasalah. Pertanyaan utamanya adalah apakah informasi sudah tersedia atau baru diambil setelah interaksi.
Kalau isi sudah hadir dalam DOM tetapi disembunyikan secara visual dalam accordion yang dapat dipakai, itu berbeda dari deskripsi yang baru diminta melalui API setelah klik. Periksa mekanisme aktualnya.
Untuk daftar produk, sediakan jalur URL yang bisa ditemukan. Google umumnya tidak menekan tombol untuk memicu pemuatan lanjutan. Panduan pagination dan pemuatan bertahap.
Telusuri resource dan metadata secara terarah
Jika isi hilang, cari request data yang gagal, file JavaScript yang diblokir, error runtime, atau ketergantungan pada cookie dan autentikasi. Bandingkan dengan sesi baru, bukan hanya sesi developer yang sudah login.
Jika judul atau canonical salah, periksa output server dan perubahan setelah hidrasi. Dua sumber metadata yang berbeda dapat saling menimpa. Pilih satu sumber data yang konsisten untuk URL dan identitas halaman.
Server-side rendering atau static generation dapat membantu menyajikan isi awal, tetapi keduanya tetap perlu diuji. Server yang merender data salah dengan cepat belum menyelesaikan masalah pengguna.
Kriteria selesai sebelum menunggu indexing
Sebuah perbaikan rendering dapat dinyatakan terverifikasi secara teknis ketika URL detail bisa dibuka langsung, isi utama hadir sesuai kebutuhan, link dapat diikuti, metadata konsisten, serta fungsi interaktif tetap berjalan.
Lanjutkan dengan inspeksi mesin pencari bila tersedia dan relevan. Catat timestamp supaya hasil lama tidak tertukar dengan build baru. Perubahan indeks atau performa pencarian merupakan pengamatan berikutnya, bukan bagian yang boleh ditebak dari source code.
Mulai dengan satu template dan satu informasi yang hilang. Matriks HTML, DOM, interaksi, dan inspeksi akan memberi tim daftar pekerjaan yang lebih konkret daripada pernyataan umum “website JavaScript kurang SEO-friendly”.
