Tag: Google Search Console

wpJakarta – Mengatasi Masalah Mobile Friendly Secara Visual. Masalah mobile friendly disebuah halaman website bisa dibilang adalah masalah kritis dan serius. Karena kita tau bahwa google selalu mengutamakan halaman website yang mobile friendly saat dilihat melalui perangkat mobile. Google Search Console (GSC) akan memberikan notifikasi jika ada halaman website kita misalnya terdeteksi tidak mobile friendly.

Report error terkait dengan “Mobile Usability Issue”

Mobile Usability Issue, yang artinya tampilan halaman website ada masalah saat ditampilkan secara mobile, dan masalah-masalah sesuai report GSC adalah sebagai berikut :

• Clickable elements too close together, ini yang menyebabkan orang bisa susah nge-klik karena jari jempolnya yang segede gaban.
• Content wider than screen, sama seperti main sepakbola, google juga akan menyemprit jika ada content yang offside.
• Text too small to read, ini yang membuat mata pengunjung sampe melotot untuk membaca artikel.
• Uses incompatible plugins, Misalnya anda menambahkan animasi seperti film cemen, sementara tidak semua browser support cemen tersebut.
• Viewport not set dan
• Viewport not set to “device-width”, tentang meta viewport yang tidak diset bisa bikin website jadi tidak responsive.

Baca Juga :

• Merubah Alamat URL Login WordPress Tanpa Plugin
• Ganti Username Admin WordPress Tanpa Plugin

Clickable elements too close together

Pada artikel ini “Mengatasi Masalah Mobile Friendly Di GSC” akan coba kami bahas bagaimana memperbaiki masalah tersebut satu persatu. Tapi pada artikel ini kami hanya akan membahas masalah pertama yaitu : Clickable elements too close together. Masalah lainnya kami bahas pada artikel lain.

Apapun masalah pada GSC, memang harus kita investigasi sendiri. GSC tidak secara spesifik memberitahu teks mana yang terlalu kecil atau pada kolom mana masalah tersebut terjadi. Tapi google memberikan kesempatan pada kita untuk melakukan investigasi dengan menyediakan fitur “Fetch page”, “Inspect” dan “Test Live Page” supaya kita dapat mendeteksi di bagian mana dari halaman website yang bermasalah.

Mendeteksi secara visual element yang bermasalah

Seperti dijelasakan diatas bahwa Clickable elements too close together adalah ada dua atau lebih element yang bisa diklik yang letaknya berdekatan, dan akan menyebabkan pengguna internet yang jempolnya gede sulit untuk meng”klik” element-element tersebut.

Untuk membantu menentukan bagian apa yang error anda bisa melakukan fetch page, inspect atau screenshot melalui menu GSC. Selain itu coba juga cek secara visual alias dengan mata tidak pake baju alias mata telanjang halaman yang bermasalah tersebut menggunakan handphone (usahakan handphone middle end). Adakah teks atau gambar yang mengandung link yang letaknya sangat berdekatan atau mepet.

Secara sederhana kami akan coba gambarkan dengan gambar berikut :

Pada gambar yang kami screenshoot dari halaman homepage kami, terdapat heading teks H2 yaitu “wpJakarta” dan “WordPress”. Dimana teks wpJakarta mengandung link ke https://wpjakarta.com/. Sedangkan teks WordPress mengandung link ke https://wordpress.com/. Karena mengandung link maka kedua teks “wpJakarta” dan “WordPress” disebut sebagai “Clickable Element”.

Jika dilihat dengan PC hal tersebut tidak menimbulkan masalah karena kedua teks tersebut ditampilkan secara sejajar horizontal: wpJakarta WordPress. Masalah muncul saat website dibuka dengan browser mobile karena tampilannya akan menyesuaikan seperti berikut gambar berikut ini :

Kedua teks tersebut saat ditampilkan dengan browser di handphone maka akan tampil secara sejajar vertical :
wpJakarta –> mengandung link.
WordPress –> mengandung link.

Sehingga memungkinkan pengguna akan salah klik. Dan hal tersebutlah yang membuat halaman website anda terdeteksi tidak mobile friendly dengan secara spesifik masalahnya Clickable elements too close together.

Solusi perbaikan

Coba anda hilangkan masing-masing link yang terkandung pada kedua teks berikut. Lalu lakukan URL inspection atau lakukan test mobile friendly test. Jika ternyata tidak terdeteksi masalah mobile, berarti bisa dipastikan itulah masalah utamanya.

Solusi yang bisa anda lakukan adalah : Anda bisa buang semua link dari kedua teks tersebut atau berikan link hanya pada salah satu teks saja atau kedua teks tersebut diberikan satu tujuan link saja. Solusi lainnya adalah anda bisa memberikan css class pada element tersebut dan menambahkan kode CSS dengan mendefine “@media only screen” rule, lalu memberikan perintah untuk memberi jarak antara dua teks tersebut (Padding atau margin).