Kesalahan umum

Halaman ini menjelaskan beberapa kesalahan paling umum yang dilakukan webmaster saat mendesain situs untuk perangkat seluler.

File JavaScript, CSS, dan Gambar yang Diblokir

Agar proses rendering dan pengindeksan dapat dilakukan secara optimal, selalu izinkan Googlebot mengakses file JavaScript, CSS, dan gambar yang digunakan oleh situs Anda, sehingga Googlebot dapat melihat situs Anda seperti pengguna pada umumnya. Jika file robots.txt situs Anda tidak mengizinkan aset tersebut di-crawl, hal ini secara langsung akan mengganggu performa algoritme kami dalam merender dan mengindeks konten Anda. Akibatnya, peringkat situs menjadi tidak optimal.

  1. Pastikan Googlebot dapat meng-crawl JavaScript, CSS, dan file gambar Anda menggunakan Fitur Inspeksi URL di Search Console. Fitur ini menunjukkan cara Googlebot melihat dan merender konten, serta membantu Anda mengidentifikasi dan memperbaiki sejumlah masalah pengindeksan pada situs.

  2. Periksa dan uji robots.txt Anda di Search Console.

  3. Uji halaman seluler dengan Pengujian Situs Mobile-Friendly untuk mengetahui apakah sistem kami mendeteksi situs Anda sebagai situs yang kompatibel untuk pengguna seluler.

  4. Jika menggunakan URL yang terpisah untuk halaman seluler, pastikan Anda menguji URL desktop dan seluler, sehingga Anda dapat memastikan bahwa pengalihannya dikenali dan dapat di-crawl.

Konten yang Tidak Dapat Diputar

Beberapa jenis video dan konten tidak dapat diputar di perangkat seluler, seperti media yang dibatasi lisensi atau pengalaman yang memerlukan Flash maupun pemutar lain yang tidak didukung secara luas di perangkat seluler. Konten yang tidak dapat diputar akan membingungkan pengguna saat ditampilkan di halaman situs.

Saat pengguna mengunjungi halaman yang menampilkan konten yang tidak didukung di perangkat seluler, mereka akan melihat pesan error seperti ini:

Video tidak dapat diputar

Hal ini memberikan pengalaman seluler yang buruk kepada pengguna!

Sebagai ganti menggunakan pemutar video eksklusif atau menempatkan konten dalam format yang tidak didukung, sebaiknya gunakan tag standar HTML5 untuk mencakup video atau animasi.

Untuk konten animasi, gunakan animasi HTML5 yang berfungsi di semua browser web. Google Web Designer memudahkan Anda membuat animasi ini dalam format HTML5.

  • Gunakan standar HTML5 untuk animasi guna memberikan pengalaman yang baik kepada semua pengguna.
  • Gunakan penyematan video yang dapat diputar di semua perangkat.
  • Pertimbangkan untuk menyediakan transkrip video. Transkrip video memudahkan akses bagi pengguna yang menggunakan teknologi browsing asistif atau yang browser-nya tidak dapat memutar format video eksklusif.

Untuk penjelasan selengkapnya, baca praktik terbaik video di Dasar-Dasar Web Google.

Pengalihan yang Salah

Jika Anda memiliki URL seluler terpisah, sebaiknya alihkan pengguna seluler di setiap URL desktop ke URL seluler yang sesuai. Pengalihan ke halaman lain (seperti selalu ke halaman beranda) tidaklah benar.

Contoh:

  • Server situs desktop Anda dikonfigurasi untuk mengalihkan pengguna seluler ke halaman beranda situs seluler, terlepas dari URL mana yang awalnya mereka minta, meskipun situs seluler tersebut memiliki halaman yang setara dengan halaman desktop yang menjadi tujuan pengalihan.
  • URL situs desktop Anda dibuat secara dinamis dengan parameter URL yang tidak dipetakan dengan baik ke URL seluler yang setara. Misalnya, pengguna yang mencari jadwal kereta api pada tanggal tertentu di situs desktop mungkin akan bingung jika mereka dialihkan ke halaman penelusuran jadwal umum di situs seluler. Sebaiknya konfigurasi pengalihan dengan benar jika Anda memiliki URL seluler yang setara, sehingga pengguna dapat membuka halaman yang mereka cari.

  • Situs desktop Anda hanya mengalihkan pengguna perangkat seluler tertentu, tetapi tidak mengalihkan pengguna lainnya. Misalnya, situs hanya mengalihkan pengguna Android ke situs seluler dan tidak mengalihkan pengguna iPhone atau Windows Phone.

  • Gunakan Search Console. Jika Anda adalah pengguna terverifikasi, kami akan mengirimkan pesan saat terdeteksi adanya halaman situs yang mengalihkan pengguna smartphone ke halaman beranda.

  • Siapkan server Anda agar server tersebut mengalihkan pengguna smartphone ke URL yang setara di situs smartphone.

  • Jika halaman di situs Anda tidak memiliki URL yang setara dalam versi smartphone, biarkan pengguna tetap di halaman desktop, jangan alihkan mereka ke halaman beranda di situs smartphone. Dalam keadaan seperti ini, Anda lebih baik tidak melakukan apa pun daripada melakukan tindakan yang tidak tepat.

  • Coba gunakan desain web yang responsif, yang menyajikan konten sama untuk pengguna desktop dan smartphone.

404 Khusus Seluler

Beberapa situs menyajikan konten kepada pengguna desktop yang mengakses URL, tetapi menampilkan halaman error kepada pengguna seluler.

404 khusus seluler

Untuk memastikan pengalaman pengguna terbaik, jika Anda mengetahui bahwa pengguna mengunjungi halaman desktop dari perangkat seluler, dan Anda memiliki halaman seluler yang setara di URL lain, alihkan mereka ke URL tersebut sebagai ganti menampilkan halaman error 404 atau 404 ringan. Pastikan juga bahwa halaman mobile-friendly itu sendiri bukan halaman error.

Pengalihan yang baik
  • Gunakan Search Console. Jika Anda adalah pengguna terverifikasi untuk situs tersebut, kami akan mengirimkan notifikasi kepada Anda di Pusat Pesan.

  • Jika Anda memiliki situs versi smartphone di URL lain, konfigurasi server agar mengalihkan pengguna smartphone ke URL yang setara di situs smartphone Anda.

  • Jika Anda menggunakan penayangan Dinamis, pastikan deteksi agen pengguna telah dikonfigurasi dengan benar.

  • Jika halaman di situs Anda tidak memiliki versi yang setara di smartphone, pertahankan pengguna di halaman desktop. Menampilkan konten yang dicari pengguna merupakan tindakan yang jauh lebih baik daripada hanya menampilkan halaman error.

  • Jika memungkinkan, gunakan desain web yang responsif. Konfigurasi ini memberi Anda kesempatan untuk menyajikan konten yang sama kepada pengguna, apa pun perangkat yang mereka gunakan.

Hindari interstisial

Ada banyak situs yang menampilkan interstisial atau overlay yang menutupi sebagian atau seluruh konten halaman yang dikunjungi pengguna. Interstisial semacam ini, yang sering muncul di perangkat seluler untuk mempromosikan aplikasi native situs, formulir pendaftaran milis, atau iklan, dapat memberikan pengalaman yang buruk bagi pengguna. Pada kasus yang ekstrem, interstisial didesain agar sulit ditutup sehingga pengguna melihat konten sebenarnya di halaman itu. Karena bidang layar pada perangkat seluler sangat terbatas, interstisial apa pun dapat berdampak negatif pada pengalaman pengguna.

Interstisial Download Aplikasi

Banyak webmaster mempromosikan aplikasi native bisnis mereka kepada pengunjung situs selulernya. Jika Anda tidak menanganinya dengan hati-hati, tindakan ini dapat menyebabkan masalah pengindeksan, dan mengganggu pengalaman pengunjung dalam menggunakan situs Anda.

Hindari interstisial
Interstisial menghambat pengguna menyelesaikan tugas.
Spanduk aplikasi
Spanduk memungkinkan pengguna menyelesaikan tugas selagi menampilkan aplikasi.
  • Gunakan banner sederhana untuk mempromosikan aplikasi Anda secara inline dengan konten halaman. Banner ini dapat diterapkan menggunakan:
    • Banner yang didukung browser seperti Smart App Banners untuk Safari atau Banner Aplikasi Native untuk Chrome.
    • Gambar atau banner HTML, serupa dengan iklan kecil biasa, yang mengarahkan ke app store yang benar untuk mendownload aplikasi Anda.

Salah satu praktik umum saat situs menyajikan URL seluler yang berbeda kepada pengguna adalah dengan menyediakan link ke versi yang dioptimalkan untuk desktop, sekaligus link dari halaman desktop ke halaman seluler. Kesalahan yang umum adalah menyediakan link yang mengarah ke halaman yang tidak relevan, seperti link halaman seluler ke halaman beranda situs desktop.

  • Periksa tautan untuk memastikan bahwa tautan mengarah ke laman setara yang benar.

Halaman Seluler Lambat

Sangat penting untuk memastikan situs seluler Anda dimuat dengan cepat. Pengguna dapat menjadi sangat tidak nyaman jika mereka harus menunggu lama untuk melihat konten.

Gunakan Google PageSpeed Insights untuk mengetahui apakah halaman Anda memiliki masalah yang dapat membuatnya lambat, dengan berfokus pada sub-bagian “Kecepatan”. Cobalah untuk menyelesaikan masalah yang ditandai sebagai "Harus Diperbaiki".

Untuk informasi selengkapnya, lihat:

Setel area pandang dengan benar

Karena pengunjung situs Anda menggunakan berbagai perangkat dengan berbagai ukuran layar, halaman Anda harus menetapkan area pandang menggunakan tag meta viewport. Tag ini memberi tahu browser cara menyesuaikan dimensi dan penskalaan halaman agar sesuai dengan perangkat. Berikut adalah dua masalah umum:

  • Menggunakan viewport dengan lebar tetap. Hal ini dapat membuat halaman tidak terskalakan dengan benar untuk semua ukuran perangkat (dan hal ini sering terjadi). Baca selengkapnya.
  • Menentukan viewport minimum yang terlalu lebar, yang dapat memaksa pengguna perangkat dengan layar kecil untuk men-scroll secara horizontal guna membaca konten. Hal ini terjadi saat halaman menggunakan nilai absolut di deklarasi CSS, atau menggunakan gambar yang didesain agar terlihat sangat baik pada lebar browser tertentu (misalnya 980 piksel). Untuk memperbaiki error ini, pastikan halaman menggunakan nilai posisi dan lebar relatif untuk elemen CSS, serta pastikan gambar juga dapat diskalakan. Pelajari lebih lanjut.

Ukuran font kecil

Hindari penetapan ukuran font yang terlalu kecil untuk dapat dibaca di perangkat seluler, yang memaksa pengunjung "mencubit layar untuk melakukan zoom" agar dapat membacanya. Setelah menentukan area pandang untuk halaman web Anda, setel ukuran font agar diskalakan dengan benar di dalam area pandang. Baca lebih lanjut tentang praktik terbaik ukuran font di Menggunakan Ukuran Font yang Dapat Dibaca.

Elemen sentuh terlalu dekat

Hindari penetapan elemen sentuh, seperti tombol dan link, yang terlalu dekat satu sama lain sehingga pengguna seluler tidak dapat mengetuk dengan mudah elemen yang diinginkan menggunakan jari mereka tanpa mengetuk elemen di dekatnya. Untuk memperbaiki error ini, pastikan ukuran dan ruang untuk link navigasi dan tombol sesuai bagi pengunjung seluler. Baca selengkapnya di Mengukur Target Ketuk dengan Tepat.

Kirim masukan tentang...

Penelusuran
Penelusuran