Panduan SEO Untuk Membangun Situs Mobile Seluler

Panduan SEO untuk membangun situs mobile seluler adalah pengoptimalan proses untuk memastikan bahwa pengunjung yang mengakses situs Anda dari perangkat seluler memiliki pengalaman yang dioptimalkan untuk perangkat.

Apa itu Pengoptimalan Seluler?

Setiap tahun orang menghabiskan lebih banyak waktu di perangkat seluler dan tablet mereka, namun banyak situs web masih tidak dirancang untuk memperhitungkan berbagai ukuran layar dan waktu muat. Optimalisasi seluler melihat desain situs, struktur situs, kecepatan halaman, dan lebih banyak lagi untuk memastikan Anda tidak secara tidak sengaja mengubah pengunjung seluler.

Praktik Terbaik SEO Seluler

Jika situs Anda sudah dioptimalkan dengan baik untuk mesin telusur, hanya ada beberapa hal tambahan yang perlu dipikirkan saat mengoptimalkan perangkat seluler dan Google beralih ke pengindeksan pertama seluler.

Kecepatan halaman

Karena masalah perangkat keras dan konektivitas, kecepatan halaman bahkan lebih penting bagi pengguna ponsel daripada pengguna desktop. Selain mengoptimalkan gambar, Anda ingin memperkecil kode, meningkatkan cache browser, dan mengurangi pengalihan. Informasi lebih lanjut tentang kecepatan halaman dapat ditemukan di Praktik Terbaik SEO kami untuk halaman Page Speed.

Jangan memblokir CSS, JavaScript, atau gambar

Dulu, beberapa perangkat mobile tidak dapat mendukung semua elemen ini, jadi webmaster situs mobile memblokir satu atau ketiganya. Tapi untuk sebagian besar itu sudah tidak berlaku lagi, dan Smartphone GoogleBot ingin bisa melihat dan mengkategorikan konten yang sama dengan yang pengguna lakukan. Jadi jangan menyembunyikannya. Elemen ini juga penting untuk membantu Google memahami jika Anda memiliki situs yang responsif atau solusi seluler yang berbeda.

Desain situs untuk mobile

Perangkat seluler menyederhanakan dan merevolusi cara situs dirancang. "Di atas lipatan" tidak lagi memiliki makna di dunia di mana kita bergulir tanpa henti

Jangan gunakan Flash

Plugin mungkin tidak tersedia di ponsel pengguna Anda, yang berarti mereka akan kehilangan semua kesenangan. Jika Anda ingin membuat efek khusus, gunakan HTML5 sebagai gantinya.

Jangan gunakan pop-up juga

Ini bisa menjadi sulit dan membuat frustrasi untuk mencoba dan menutup ini di perangkat mobile. Hal ini dapat menyebabkan tingkat bouncing yang tinggi.
 
Desain untuk jari gemuk

Navigasi layar sentuh dapat menyebabkan klik yang tidak disengaja jika tombol Anda terlalu besar, terlalu kecil, atau di jalur jari yang mencoba membuat halaman bergulir.
 
Optimalkan judul dan deskripsi meta
Ingat bahwa Anda bekerja dengan sedikit ruang layar saat pengguna mencari menggunakan perangkat mobile. Untuk memamerkan karya terbaik Anda di SERPS, sedap mungkin (tanpa mengorbankan kualitas informasi) saat membuat judul, URL, dan deskripsi meta.

Gunakan data terstruktur Schema.org

Karena ruang layar yang terbatas, hasil pencarian dengan cuplikan kaya bahkan lebih menonjol daripada di desktop. Baca lebih lanjut tentang data terstruktur Schema.org.

Optimalkan pencarian lokal

Jika bisnis Anda memiliki elemen lokal, ingatlah untuk mengoptimalkan konten seluler Anda untuk penelusuran lokal. Ini termasuk membakukan nama, alamat, dan nomor telepon Anda dan termasuk nama kota dan negara Anda di metadata situs Anda. Informasi lebih lanjut tentang SEO lokal dapat ditemukan di sini.

Konfigurasi situs mobile

Mungkin keputusan terpenting yang akan Anda buat saat membuat situs adalah memutuskan apakah Anda ingin menggunakan layanan responsif, dinamis, atau konfigurasi situs terpisah. Masing masing punya kelebihan dan kekurangan. Google lebih menyukai desain yang responsif namun mendukung ketiga opsi selama Anda mengaturnya dengan benar.
 
Desain web yang responsif

Situs yang didesain secara responsif menggunakan kueri media CSS3 untuk menyajikan konten yang sama kepada pengguna seluler dan desktop menggunakan kotak fluida dan desain yang fleksibel untuk menyesuaikan secara otomatis ukuran layar pengguna.

Desain responsif menggunakan kueri media untuk menargetkan tata letak berdasarkan lebar layar, orientasi, dan resolusi. Misalnya, Anda bisa menggunakan CSS berikut untuk menginstruksikan browser bagaimana menampilkan konten untuk layar yang memiliki lebar 420 atau lebih sedikit piksel:

Contoh kode

@media screen and (max-width: 420px) {
  .class {
    [styles for this class here]
  }
}

Dan untuk menautkan ke stylesheet terpisah sebagai gantinya, letakkan HTML berikut di antara tag <head> Anda:

Contoh kode

<link href = "mobile.css" type = "text / css" media = "layar dan (max-device-width: 480px)" rel = "stylesheet" />

Desain responsif memungkinkan Anda memiliki beragam kueri media ini sehingga pengguna di layar ponsel kecil, layar seluler berukuran lebih besar dari rata-rata, dan bahkan tablet pun dapat melihat situs yang terlihat dirancang untuk perangkat mereka.

Gunakan Alat Pengujian Seluler Google untuk memverifikasi bahwa situs web Anda dioptimalkan untuk seluler.

Penyajian dinamis

Jika Anda tidak memiliki sumber daya untuk merancang ulang situs secara lengkap atau ingin menampilkan konten yang berbeda untuk pengunjung seluler daripada yang Anda lakukan untuk yang desktop, salah satu solusinya adalah menggunakan satu URL untuk menampilkan kumpulan HTML dan CSS yang berbeda bergantung pada jenis perangkat apa Pengunjung Anda menggunakan (juga disebut mendeteksi agen pengguna). Ini bisa berguna, misalnya, jika Anda adalah restoran yang menginginkan pengunjung seluler (yang mungkin mengembara di lingkungan Anda) untuk melihat contoh ulasan dan peta ke lokasi Anda alih-alih situs web lengkap Anda.

Menampilkan konten yang berbeda berdasarkan agen pengguna disebut penyajian dinamis dan dilakukan dengan menggunakan header HTTP Vary, yang terlihat seperti ini:
 
Vary HTTP Header

GET / halaman-1 HTTP / 1.1
Host: www.example.com
(... sisa header permintaan HTTP ...)
HTTP / 1.1 200 OK
Content-Type: text / html
Vary: User-Agent
Isi-Panjang: 5710
(... sisa header tanggapan HTTP ...)

Contoh dari Blog Pengembang Google.

Sederhananya, ini berarti bahwa konten yang ditampilkan akan bervariasi berdasarkan agen pengguna yang meminta halaman tersebut.

Penyajian dinamis bukan kompromi sempurna yang mungkin terjadi. Untuk satu, ini bergantung pada daftar agen pengguna yang diperbarui, yang berarti setiap kali perangkat seluler baru masuk ke daftar pasar itu perlu diperbarui. Dan tidak jarang komputer desktop dan perangkat mobile salah dilayani dengan HTML untuk perangkat lain. Baca lebih lanjut tentang jebakan umum.

Pisahkan URL seluler

Pilihan lainnya adalah membuat situs paralel kedua untuk pengguna ponsel. Ini memungkinkan Anda membuat konten khusus untuk pengunjung seluler. Untuk menghindari kebingungan URL, sebagian besar situs mobile paralel menggunakan subdomain "m".

Situs seluler paralel bisa sama tidak sempurnanya dengan situs penyajian dinamis saat mengirim pengunjung ke versi yang benar, jadi pastikan untuk mempermudah pengunjung yang berakhir di tempat yang salah untuk mengeklik pengalaman favorit mereka.

Anda juga ingin memastikan bahwa redirect situs Anda ada dan semirip mungkin untuk mengurangi kecepatan halaman. Dan untuk menghindari masalah konten duplikat, Anda harus mengatur rel = "canonical".