Mengatasi clickable element too close together

Saat Anda masuk ke akun Google Search Console, Anda mungkin melihat kesalahan "Elemen yang dapat diklik terlalu berdekatan".
Saya telah melihat banyak situs web mengalami kesalahan kegunaan seluler ini.
Ada beberapa utas di Google di mana para webmaster mati-matian mencari solusi untuk memperbaiki masalah ini.
Oleh karena itu, dalam artikel ini, saya akan membahas langkah-langkah tepat yang diperlukan untuk memperbaiki kesalahan ini.Tapi, pertama-tama, mari kita perjelas beberapa hal tentang kesalahan ini.

Apa yang dimaksud dengan kesalahan "Elemen yang dapat diklik terlalu berdekatan"?

Ini berarti bahwa URL yang menampilkan kesalahan seperti itu memiliki target sentuh seperti tombol dan tautan yang terlalu dekat satu sama lain. Saat pengguna mencoba mengetuk tombol atau tautan seperti itu, elemen tetangga juga akan disadap. Ini menurunkan pengalaman pengguna dan pengguna terpental kembali dari situs Anda.

Mengapa Google menampilkan kesalahan "Elemen yang dapat diklik terlalu berdekatan"?

Masalah ini muncul jika pengunjung Anda mengalami masalah saat mengeklik berbagai elemen di situs Anda menggunakan perangkat seluler mereka.
Google selalu memberikan pengalaman pengguna terbaik.
Ini menggunakan algoritme pencarian seluler pertama yang berarti situs Anda harus dirancang dengan mempertimbangkan audiens seluler.
Jika situs Anda memiliki masalah kegunaan maka Google akan menurunkan peringkat situs Anda.
Oleh karena itu, Google menampilkan kesalahan ini ke setiap situs yang memiliki beberapa elemen yang tidak ramah seluler.
Yang perlu Anda lakukan adalah memperbaiki masalah ini dan Google akan mulai menyukai situs Anda lagi.
Jadi, sekarang mari kita langsung memperbaiki masalah ini.
Ikuti langkah-langkah di bawah ini untuk memperbaiki kesalahan "Elemen yang dapat diklik terlalu berdekatan":

Langkah 1: Identifikasi URL Contoh

Masuk ke akun Google Search Console Anda dan periksa contoh URL yang mengembalikan masalah seperti itu.
Anda dapat melakukannya dengan mengklik bagian Kegunaan Seluler dan kemudian, mengklik kesalahan yang tertulis: "Elemen yang dapat diklik terlalu berdekatan".
Setelah Anda mengklik kesalahan, Anda akan melihat jumlah URL yang terpengaruh dan contoh URL.
Buka contoh URL di jendela baru.

Langkah 2: Jalankan Tes Ramah Seluler

Salin URL contoh dan masukkan di Google Mobile-Friendly Test dan Bing Mobile-Friendly Test satu per satu.


Pasalnya, saya sarankan Anda menggunakan kedua alat ini karena menampilkan hasil yang sedikit berbeda.


Saya menguji URL contoh dengan mengikuti Tes Ramah Seluler.

Inilah yang dikembalikan Google:

 

Halaman ini ramah seluler.


Hasilnya membingungkan karena di GSC Anda dapat melihat kesalahan tetapi ketika Anda mengikuti tes ramah seluler, tidak ada masalah yang terdeteksi.


Selanjutnya saya cek di alat Bing Mobile Friendly Test.


Menghantam!

Ini mengembalikan bahwa halaman tersebut memiliki masalah "tautan dan ketuk target terlalu dekat/kecil"

 

Saya juga menemukan bahwa beberapa sumber daya di halaman tersebut diblokir oleh robots.txt.


Juga, ketika saya melihat halaman menggunakan perangkat seluler saya, saya dapat menemukan masalahnya karena target ketuk tidak memiliki bantalan yang disarankan.


Langkah 3: Optimalkan Ukuran Target Sentuh



Kesalahan "Elemen yang dapat diklik terlalu berdekatan" mungkin ditampilkan karena beberapa alasan, tetapi yang paling umum adalah karena target sentuh terlalu kecil.


Ukuran target sentuh harus sekitar 48 piksel.

Anda harus menggunakan bantalan tambahan untuk meningkatkan ukuran target sentuh menjadi 48 piksel.


Sekarang, kita akan menemukan elemen yang menyebabkan kesalahan ini.


Tambahkan plugin Penguji Desain Web Seluler/Responsif di browser Google Chrome Anda.


Sekarang, Anda akan melihat ikon ponsel di sisi kanan browser Anda.


Klik di atasnya dan Anda dapat melihat tampilan halaman ini saat diakses menggunakan perangkat seluler.

 

Sekarang, temukan tombol atau tautan yang terlalu dekat satu sama lain.

Setelah Anda menemukannya, kembalilah ke URL desktop dan arahkan kursor Anda ke elemen yang terlalu dekat satu sama lain.


Klik kanan dan pergi untuk memeriksa.

Ini akan membuka jendela yang menampilkan ukuran target tap dan padding.

 

Tingkatkan ukuran target ketuk menjadi 48 piksel.


Setelah Anda selesai melakukannya, tambahkan jarak sekitar 8px untuk setiap target sentuh.


Langkah 4: Tetapkan Tag Area Pandang Seluler

Kesalahan “Elemen yang dapat diklik terlalu berdekatan” juga disebabkan saat Anda tidak memiliki tag area pandang seluler di situs Anda.


Karenanya, Anda harus selalu memiliki set viewport seluler.

Untuk melakukannya, tambahkan kode di bawah ini di


Kode di atas akan memberi tahu browser untuk mengatur lebar viewport agar sesuai dengan lebar perangkat pengguna.

Oleh karena itu, pengunjung situs Anda akan dapat melihat semua elemen pada ukuran yang paling sesuai untuk perangkat yang mereka gunakan.

Secara alami, ini akan membuat situs web Anda mobile-friendly dan memperbaiki masalah “Elemen yang dapat diklik terlalu berdekatan”.


Langkah 5: Validasi Perbaikan

Setelah Anda menyelesaikan semua perubahan yang disarankan, buka Search Console, dan klik validasi perbaikan.

Anda akan melihat opsi perbaikan validasi di sudut kanan atas tempat kesalahan ditampilkan.


Setelah itu, Google akan memulai proses validasi.

Bersabarlah, karena ini akan memakan waktu.

Setelah proses validasi selesai, Anda akan melihat tanda centang dan kata “lulus” tertulis di sebelah kesalahan.

Selamat!

Anda baru saja memperbaiki kesalahan.


validasi melewati pesan di konsol pencarian google


Kesimpulan

"Elemen yang dapat diklik terlalu berdekatan" adalah kesalahan umum.

Ini kebanyakan terjadi di situs yang tidak responsif.

Oleh karena itu, Anda perlu memastikan bahwa situs Anda sepenuhnya responsif.

Situs ramah seluler menawarkan pengalaman menjelajah terbaik bagi pengguna dan Google menyukainya.

Saya harap, artikel ini menawarkan perbaikan cepat untuk kesalahan yang Anda lihat di konsol pencarian Anda.

 

Pengalaman Pribadi

Masalah ini teratasi dengan mengubah ukuran width elemen halaman (semisal sidebar, main, left header, right header, left footer, right footer) yang tetap, misalnya px ke yang fleksibel yakni % setelah mengeset viewport.

Jika Anda memiliki pertanyaan, beri tahu saya di komentar di bawah

Sumber : SEO Sandwich Blog : https://seosandwitch.com/fix-clickable-elements-too-close-together-error/ Lihat lainnya : google Diterjemahkan dengan glate

 


Comments