Mengatasi mobile usability error (kesalahan kegunaan seluler) pada Google Search Console memerlukan perbaikan teknis langsung pada kode sumber situs web atau pengaturan responsif CSS. Error ini muncul ketika Googlebot mendeteksi bahwa halaman situs Anda sulit digunakan oleh pengunjung yang mengakses lewat perangkat seluler, yang secara langsung berdampak negatif pada peringkat SEO dan pengalaman pengguna.
Penyebab paling umum dari error ini meliputi ukuran font yang terlalu kecil untuk dibaca, elemen tombol atau tautan yang jaraknya terlalu berdekatan sehingga sulit diklik, serta konten yang melampaui batas layar horizontal (horizontal scrolling). Berikut adalah rincian jenis error beserta cara memperbaikinya secara teknis.
Daftar Jenis Mobile Usability Error dan Solusi Teknisnya
Sebelum melakukan perbaikan massal, identifikasi laporan spesifik yang muncul di akun Google Search Console Anda. Tabel berikut merangkum jenis error, penyebab utama, dan solusi perbaikannya:
| Jenis Error | Penyebab Utama | Solusi Teknis Perbaikan |
|---|---|---|
| Text is too small to read | Ukuran font dasar di bawah 16px atau menggunakan ukuran absolut piksel yang tidak fleksibel. | Atur basis font body minimal font-size: 16px; dan gunakan unit relatif seperti rem atau em. |
| Clickable elements too close together | Jarak antar tautan atau tombol kurang dari 48px, menyulitkan pengguna menyentuh dengan jari. | Tambahkan padding atau margin pada elemen interaktif minimal margin-bottom: 8px; atau tinggi sentuh 48px. |
| Content wider than screen | Elemen blok seperti gambar, iframe, atau tabel memiliki lebar tetap (fixed width) melampaui lebar layar HP. | Tambahkan properti CSS max-width: 100%; height: auto; pada gambar dan elemen media. |
| Viewport not set | Tag meta viewport hilang pada bagian <head> dokumen HTML. |
Sisipkan tag: <meta name="viewport" content="width=device-width, initial-scale=1"> |
Langkah-Langkah Perbaikan Kode CSS
Untuk mengatasi masalah ukuran teks dan elemen yang terlalu berdekatan, periksa lembar gaya (stylesheet) situs Anda. Pastikan aturan media query diterapkan dengan benar untuk perangkat beresolusi kecil.
Contoh implementasi CSS yang aman untuk perangkat seluler:
/* Pengaturan Dasar Responsif */
html {
font-size: 16px;
}
body {
font-size: 1rem;
line-height: 1.5;
overflow-x: hidden;
}
/* Mengatasi Gambar Meluber */
img, video, iframe {
max-width: 100%;
height: auto;
}
/* Mengatasi Tombol Terlalu Berdekatan */
button, .btn, a.button {
min-height: 48px;
min-width: 48px;
padding: 12px 20px;
margin-bottom: 10px;
display: inline-block;
}Validasi Perbaikan di Google Search Console
Setelah melakukan perubahan kode pada server atau CMS (seperti WordPress), lakukan langkah-langkah validasi berikut agar Google segera merayapi ulang situs Anda:
- Buka dasbor Google Search Console.
- Navigasi ke menu Experience > Mobile Usability.
- Klik pada laporan error tertentu untuk melihat detail URL yang terdampak.
- Setelah memastikan kode sudah diperbaiki, klik tombol Validate Fix.
- Google akan memulai proses verifikasi yang biasanya memakan waktu beberapa hari hingga beberapa minggu tergantung ukuran situs web.
Troubleshooting Lapangan
Jika status validasi sering gagal atau error muncul kembali setelah divalidasi, lakukan pemeriksaan berikut: bersihkan cache server, pastikan plugin caching atau CDN (seperti Cloudflare) tidak menyajikan versi halaman lama ke Googlebot, dan uji URL menggunakan alat Mobile-Friendly Test untuk memastikan tidak ada file CSS atau JavaScript penting yang diblokir oleh file robots.txt.