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

Untuk proses rendering dan pengindeksan yang optimal, selalu izinkan Googlebot mengakses file JavaScript, CSS, dan gambar yang digunakan oleh situs Anda, sehingga Googlebot dapat melihat situs seperti pengguna pada umumnya. Jika file robots.txt situs Anda tidak mengizinkan crawling aset ini, hal ini secara langsung mengganggu seberapa baik algoritme kami merender dan mengindeks konten Anda. Akibatnya, peringkat situs menjadi tidak optimal.

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

  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 terpisah untuk halaman seluler, pastikan Anda menguji URL desktop dan seluler sehingga Anda dapat mengonfirmasi bahwa pengalihan dikenali dan dapat di-crawl.

Konten yang Tidak Dapat Diputar

Beberapa jenis video atau konten tidak dapat diputar di perangkat seluler, seperti media yang dibatasi lisensi atau pengalaman yang memerlukan Flash atau 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 menyertakan 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 browsernya 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, mana pun URL yang awalnya mereka minta, meskipun situs seluler tersebut memiliki halaman yang setara dengan halaman desktop yang menjadi tujuan pengalihan.
Diagram cara kerja pengalihan yang salah
  • 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 akan kebingungan 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 beberapa perangkat seluler, namun tidak dengan yang 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 mendeteksi 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 Anda.

  • Jika halaman di situs Anda tidak memiliki versi smartphone yang setara, pertahankan pengguna di halaman desktop, jangan alihkan mereka ke halaman beranda 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 menayangkan konten yang sama untuk pengguna desktop dan smartphone.

404 Khusus Seluler

Beberapa situs menayangkan 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 sehingga tidak perlu menampilkan halaman error 404 atau 404 ringan. Pastikan juga 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 terpisah, 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 setara di smartphone, pertahankan pengguna di halaman desktop. Menampilkan konten yang dicari pengguna merupakan pengalaman yang jauh lebih baik daripada hanya menampilkan halaman error.

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

Hindari interstisial

Banyak situs web menampilkan interstisial atau overlay yang menutupi sebagian atau seluruh konten halaman yang dikunjungi pengguna. Interstisial ini, yang sering muncul di perangkat seluler untuk mempromosikan aplikasi asli situs , milis, formulir pendaftaran, atau iklan, bisa memberikan pengalaman yang buruk untuk pengguna. Pada kasus yang ekstrem, interstisial ini dirancang agar sulit ditutup, akibatnya pengguna tidak dapat melihat konten asli halaman. Karena bidang di layar pada perangkat seluler sangatlah terbatas, interstisial apa pun dapat berdampak negatif pada pengalaman pengguna.

Interstisial Download Aplikasi

Banyak webmaster yang mempromosikan aplikasi asli bisnis mereka kepada pengunjung situs versi seluler mereka. Jika tidak dilakukan dengan hati-hati, tindakan ini dapat menyebabkan masalah pengindeksan, dan mengganggu pengunjung dalam menggunakan situs.

Hindari interstisial
Interstisial tersebut menghambat pengguna menyelesaikan tugas.
Banner aplikasi
Banner 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 Asli untuk Chrome.
    • Gambar atau banner HTML, serupa dengan iklan kecil biasa, yang mengarahkan ke app store yang tepat untuk mendownload aplikasi Anda.

Salah satu praktik umum saat situs web menayangkan URL seluler yang berbeda kepada pengguna adalah dengan menyediakan link ke versi yang dioptimalkan untuk desktop, dan juga 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 Anda.

Gunakan Google PageSpeed Insights untuk mengetahui apakah halaman Anda memiliki masalah yang dapat membuatnya lambat, dengan berfokus pada sub-bagian “Kecepatan”. Cobalah untuk mengatasi 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 area pandang 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 mutlak 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 lebar relatif dan nilai posisi 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, setel ukuran font agar diskalakan dengan benar di dalam area pandang. Baca selengkapnya 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.