Audit mobile-first dimulai dengan memastikan versi ponsel menyajikan informasi utama yang dibutuhkan pembaca dan dapat diakses mesin pencari. Tampilan boleh berbeda dari desktop. Yang perlu dijaga adalah isi, identitas halaman, dan jalur navigasi yang penting tidak hilang karena layar lebih kecil.
Panduan ini berguna ketika website mempunyai template mobile terpisah, dynamic serving, atau komponen yang menyembunyikan dan memuat isi berbeda menurut ukuran layar.
Pilih perbandingan berdasarkan template
Ambil satu contoh untuk setiap jenis halaman yang penting: artikel, kategori, produk, layanan, dan halaman formulir. Jangan menggunakan homepage sebagai wakil seluruh situs.
Catat konfigurasi yang sebenarnya. Responsive design biasanya memakai HTML dan URL yang sama dengan tata letak berbeda. Dynamic serving dapat memberi HTML berbeda pada URL sama. Situs dengan URL mobile terpisah memerlukan pemetaan tambahan.
Google menggunakan isi versi mobile untuk indexing dan merekomendasikan kesetaraan konten utama. Konten boleh ditempatkan dalam accordion atau tab, tetapi jangan memuat isi utama hanya setelah interaksi yang harus dilakukan pengguna. Panduan mobile-first indexing.
Buat matriks informasi yang diperlukan
Contoh ilustratif halaman kursi kerja:
| Informasi | Desktop | Mobile | Dampak bila hilang |
|---|---|---|---|
| Nama dan model | Ada | Ada | Identitas produk |
| Ukuran | Tabel lengkap | Tidak ditampilkan | Pembeli tidak bisa menilai kecocokan |
| Bahan dan batas beban | Ada | Dalam accordion | Periksa isi sudah tersedia |
| Kebijakan pengembalian | Link ada | Link hilang | Informasi keputusan pembelian terputus |
| Canonical dan robots | Catat | Catat | Konsistensi pemrosesan halaman |
“Dalam accordion” bukan status gagal. Buka komponennya dan periksa apakah isinya sudah berada pada dokumen atau baru diambil melalui request sesudah klik.
Periksa isi yang disembunyikan demi desain
Pada layar kecil, tim sering mengurangi tabel, deskripsi, atau navigasi untuk menghemat ruang. Bedakan merapikan presentasi dari menghapus informasi.
Jika tabel ukuran terlalu lebar, pertimbangkan tampilan yang tetap dapat dibaca, misalnya area gulir horizontal yang jelas atau pasangan label-nilai. Jangan menghapus ukuran hanya agar screenshot terlihat bersih.
Untuk gambar informatif, pastikan pengguna mobile dapat melihat detail yang diperlukan. Crop yang menarik secara visual bisa menghilangkan bagian diagram atau label. Bandingkan fungsi gambar, bukan hanya apakah file berhasil dimuat.
Uji akses sebelum dan sesudah interaksi
Lakukan tiga langkah pada setiap template:
- Buka URL langsung dalam sesi baru pada viewport mobile.
- Tunggu pemuatan awal tanpa menekan tombol dan catat informasi yang tersedia.
- Gunakan tab, accordion, menu, dan pilihan produk, lalu catat informasi tambahan.
Jika isi utama baru hadir pada langkah ketiga, diskusikan apakah pemuatan dapat dilakukan tanpa menunggu interaksi. Untuk informasi sekunder, keputusan dapat berbeda menurut fungsi, tetapi jangan menganggap semua tab identik mekanismenya.
Ulangi pada desktop sebagai pembanding. Perubahan ukuran browser saja belum selalu mewakili dynamic serving berbasis perangkat, sehingga catat metode pengujian yang benar-benar dipakai.
Cocokkan metadata dan link
Bandingkan judul halaman, canonical, directives, serta structured data yang relevan. Bila versi mobile tidak sengaja menerima noindex dari template khusus, perbaikan desain tidak akan menutup masalah tersebut.
Periksa juga link yang hanya ada pada menu desktop. Apakah halaman penting masih dapat dicapai dari mobile? Menu yang tertutup secara visual tetapi dapat dibuka berbeda dari link yang sama sekali tidak disajikan.
Jangan memaksakan semua menu desktop ke layar kecil. Susun jalur yang tetap masuk akal untuk menemukan kategori dan isi penting.
Gunakan tiket yang menunjukkan kehilangan informasi
Tiket “mobile SEO buruk” sulit dikerjakan. Tiket yang lebih jelas berbunyi: “Pada template produk, tabel ukuran ada di desktop tetapi tidak masuk DOM mobile. Pembeli mobile tidak memperoleh dimensi. Tampilkan informasi setara dengan tata letak yang cocok untuk layar kecil.”
Kriteria penerimaannya meliputi informasi yang kembali tersedia, keterbacaan, akses tanpa state lama, dan fungsi pilihan produk tetap benar. Jika ada perubahan template bersama, uji satu produk dengan variasi data panjang agar tidak hanya lolos pada contoh paling sederhana.
Pisahkan kesetaraan dari kecepatan
Halaman mobile dapat memuat cepat tetapi kehilangan informasi. Halaman lain dapat lengkap tetapi lambat. Keduanya perlu bukti dan perbaikan berbeda. Jangan memakai skor performa sebagai pengganti pemeriksaan isi.
Mulailah dengan satu template yang paling sering dipakai pembaca. Tandai informasi yang hilang, informasi yang hanya berpindah tampilan, dan informasi yang menunggu interaksi. Dari daftar itu, kamu dapat memperbaiki masalah nyata tanpa menyamakan semua perbedaan desain sebagai error SEO.
