Cara atasi masalah kebergunaan seluler

Tidak sedikit situs yang mendapat email dari search console yang memberitahukan mengenai masalah kebergunaan seluler.

Dalam isi email tersebut diterangkan jika Elemen yang dapat diklik terlalu berdekatan satu sama lain dan Teks terlalu kecil untuk dibaca.

Sayapun coba lakukan pemeriksaan Situs mobile friendly dengan menggunakan Google developers dan hasilnya adalah tidak ada masalah.

Tapi kenapa hasil laporan search console menjelaskan adanya masalah kebergunaan seluler pada situs saya? Berbagai informasipun saya coba cari dengan berselancar di dunia maya,sampai akhirnya saya menemukan satu penjelasan yang sangat masuk akal jika masalah tersebut terjadi karena pihak Blogger menggunakan dua parameter url untuk membedakan situs berdasarkan versinya. ?m0 digunakan untuk situs versi web dan ?m1 digunakan untuk situs versi mobile.

Contoh url situs versi web : 

https://pandoewijaya.blogspot.com/2021/01/cara-menambahkan-tag-hreflang.html/?m0

Contoh url situs versi mobile :

https://pandoewijaya.blogspot.com/2021/01/cara-menambahkan-tag-hreflang.html/?m1

Pada contoh url di atas anda bisa melihat perbedaannya pada bagian akhir. Jadi,masalah yang dilaporkan oleh search console mengenai kebergunaan seluler adalah url yang menggunakan parameter ?m0. Anda bisa mengetesnya menggunakan alat pengujian situs mobile friendly dengan menambahkan parameter ?m0 dibelakang url situs anda. Contoh : https://pandoewijaya.blogspot.com/?m0 maka hasilnya adalah tidak mobile friendly.

Sebenarnya hal tersebut bukan masalah serius,karena biasanya jika url situs dibuka menggunakan perangkat seluler maka secara otomatis akan menyesuaikan atau di redirect ke url situs versi mobile.

Adapun untuk memperbaiki masalah Elemen yang dapat diklik terlalu berdekatan satu sama lain dan Teks terlalu kecil untuk dibaca. Anda bisa memasukan kode script di bawah ini pada html template situs anda.

.post-body {
line-height:1.8em;
letter-spacing: 0.1px;
Word-spacing:0.5px;
}

Silahkan masuk ke akun blogger kemudian pilih menu tema lalu klik edit html. Selanjutnya cari kode ]]></b: skin> dan tempatkan kode script tersebut di atasnya. Setelah itu klik simpan.

Untuk jaraknya bisa anda sesuaikan sendiri sesuai selera.

Line-height dimaksudkan untuk mengatur jarak antar paragraf.

Letter-spacing dimaksudkan untuk mengatur jarak antar huruf.

Word-spacing dimaksudkan untuk mengatur jarak antar kata.

Demikianlah pembahasan pada artikel kali ini,semoga bermanfaat dan terimakasih sudah berkunjung.