63
64
dengan ukuran layar berbeda yang memiliki bandwidth rendah.
Selain mengikuti semua aturan SEO yang berlaku untuk situs web desktop, kita perlu lebih berhati-hati saat merancang situs web un- tuk perangkat seluler. Situs web ramah seluler jika memiliki atribut berikut:
Situs web seluler yang baik memiliki desain responsif yang berki- nerja baik di desktop maupun perangkat seluler. Ini tidak hanya mengurangi pemeliharaan situs web tetapi juga membuat konten konsisten untuk mesin pencari.
Konten situs web seluler yang bagus mudah dibaca di perangkat seluler tanpa harus memperbesar layar. Ini memiliki font, warna, dan tata letak yang sesuai.
Sangat mudah untuk menavigasi melalui situs web seluler yang ba- gus di layar kecil. Ini menyediakan tautan dan tombol yang dapat dengan mudah bermanuver menggunakan jari.
Situs web seluler yang baik ringan sehingga membutuhkan lebih sedikit bandwidth dan waktu untuk memuat di jaringan seluler.
Halaman Beranda situs web seluler memainkan peran paling pent- ing dalam menghubungkan pengguna ke konten yang mereka cari.
Oleh karena itu, situs web seluler yang baik memastikan tautan ter- penting ditampilkan di Halaman Beranda agar mendapatkan visi- bilitas yang cukup.
65
Peringkat situs web sangat bergantung pada seberapa ramah pengguna itu. Anda dapat mengikuti panduan yang diberikan di bawah ini untuk merancang situs web ramah seluler yang hebat.
Optimalkan Situs Anda untuk Seluler
Jika situs Anda sudah dioptimalkan untuk mesin pencari, maka seharusnya tidak terlalu sulit untuk mengoptimalkannya un- tuk perangkat seluler. Pertama, mari kita pahami apa yang diper- lukan untuk beralih ke seluler. Kami dapat mengkategorikan langkah-langkah ke dalam tiga kategori besar.
Langkah 1 Pilih Konfigurasi Seluler
Langkah 2 Informasikan Mesin Pencari
Langkah 3 Hindari Kesalahan Umum Pilih Konfigurasi Seluler
Ada tiga konfigurasi seluler berbeda yang dapat Anda pilih.
Langkah 1 Desain Web Responsif
Langkah 2 Penyajian Dinamis
Langkah 3 Pisahkan URL
Masing-masing memiliki kelebihan dan kekurangannya sendiri. Google merekomendasikan desain responsif, namun mendukung ketiga konfigurasi tersebut. Tabel berikut menun- jukkan bagaimana konfigurasi seluler memengaruhi URL dan kode HTML Anda.
HTML URL Konfigurasi Seluler
66
Desain Web Responsif Tetap sama Tetap sama
Penyajian Dinamis Tetap Sama HTML Berbeda
URL terpisah URL yang berbeda HTML yang berbeda
Desain Web Responsif
Google merekomendasikan desain web responsif karena ini adalah konfigurasi seluler paling sederhana dan sangat mudah diterapkan.
Ini menyajikan kode HTML yang sama pada URL yang sama, na- mun menyesuaikan tampilan berdasarkan ukuran layar perangkat seluler.
Desain Web Responsif Penyajian Dinamis
Penyajian dinamis adalah jenis konfigurasi seluler di mana URL situs web Anda tetap tidak berubah, tetapi menyajikan konten HTML yang berbeda saat diakses dari perangkat seluler.
Saat konten Anda disajikan secara dinamis dari server, pastikan Anda memberi tahu Google bahwa konten yang dirayapinya mungkin terlihat berbeda di perangkat seluler. Kelemahan utama dari pendekatan ini adalah Anda harus melakukan pemrosesan tambahan pada konten Anda di tingkat server sebelum memutus- kannya ke pengguna. Pendekatan ini menempatkan beban yang tidak perlu di server Anda dan membuatnya lambat.
URL terpisah
67
Saat Anda mempertahankan dua URL yang berbeda —satu untuk pengguna seluler dan satu lagi untuk pengguna desktop – pastikan Anda memberi tahu Google secara eksplisit kapan harus menayangkan versi mana. Google tidak menyarankan URL terpisah karena dapat mendeteksi secara otomatis bahwa halaman seluler Anda berbeda dari halaman desktop Anda.
Pendekatan ini tidak praktis bila Anda memiliki situs web besar ka- rena memelihara dua versi situs web yang sama akan membutuh- kan usaha dan uang dua kali lipat. Pada saat yang sama, Anda tidak dapat menghindari berbagai perbedaan dalam konten Anda sambil mempertahankan dua versi.
Dari sudut pandang SEO, setiap URL bekerja secara terpisah. Oleh karena itu peringkat desktop Anda tidak akan pernah ditambahkan ke peringkat seluler dan mereka akan selalu dianggap sebagai situs web terpisah. Kami tidak menyarankan untuk mempertahankan URL yang berbeda untuk versi seluler dan desktop jika Anda ingin mendapatkan manfaat dari SEO.
Informasikan Mesin Pencari
Pastikan Google dan mesin telusur lainnya memahami kon- figurasi seluler Anda. Yang terpenting dari semuanya, Google ha- rus memahami halaman Anda sehingga dapat menentukan pering- kat situs web Anda dengan benar. Cara Anda dalam formulir
68
Google bergantung pada konfigurasi seluler — desain web respon- sif, penyajian dinamis, atau URL terpisah — yang Anda pilih.
Jika situs Anda memiliki desain yang responsif, algoritme Google dapat memahaminya secara otomatis tanpa Anda harus memberi tahu Google. Saat Anda memiliki desain responsif, pastikan Anda memiliki tag meta berikut di header halaman web Anda.
<meta name="viewport" content="width=device-width, initial- scale=1.0">
Area pandang memutuskan bagaimana halaman web Anda akan ditampilkan di perangkat. Situs dengan desain responsif bervariasi ukurannya berdasarkan ukuran layar perangkat. Deklarasikan area pandang sehingga halaman web Anda ditampilkan dengan benar di perangkat apa pun.
Jika situs web Anda disajikan secara dinamis, pastikan Anda mengizinkan Google mendeteksi konfigurasi Anda menggunakan header HTTP Vary
Vary: User-Agent
Header Vary penting untuk memberi tahu mesin telusur bahwa konten yang berbeda akan disajikan di desktop dan perangkat seluler. Header ini sangat penting ketika konten Anda disajikan oleh sistem cache apa pun seperti Jaringan Pengiriman Konten dan
69
sistem tersebut akan menggunakan header ini saat menyajikan kon- ten di perangkat yang berbeda.
Jika Anda mempertahankan URL terpisah, misalnya, example.com dan m.example.com, maka Anda dapat memberi tahu Google dengan menambahkan tautan khusus rel=alternate tag di versi desktop Anda dan sebaliknya sebagai berikut.
Halaman desktop harus mengikuti di tajuknya:
link rel="alternate" media="only screen and (max-width: 640px)"
<href="http://m.example.com" >
Mobile page should have following in its header:
<link rel="canonical" href="http://www.example.com" >
Hindari Kesalahan Umum
Untuk mengoptimalkan situs web Anda untuk perangkat seluler, pastikan Anda tidak melakukan kesalahan berikut:
Laman Seluler Lambat Jaringan seluler lebih lambat dibandingkan dengan jaringan Internet kabel, jadi penting untuk memperhatikan seberapa cepat laman seluler Anda dimuat. Ini adalah faktor per- ingkat Google yang penting. Gunakan alat SEO seluler untuk mengetahui kecepatan halaman seluler Anda. Google menyediakan sejumlah alat bagus yang dapat Anda gunakan. Jelajahi berikut ini.
70
link − https://www.google.com/webmasters/tools/mobile- friendly
Jangan Blokir CSS dan JavaScript Google merekomendasikan untuk menggunakan CSS dan Javascript in-line untuk situs web yang ramah seluler sehingga dapat diunduh bersama kontennya. Jadi jika Anda tidak memiliki banyak CSS, cobalah untuk me- nyesuaikannya di dalam tag itu sendiri; tetapi jika Anda menggunakan banyak CSS dalam file terpisah, cobalah untuk me- masukkannya di bagian bawah yang akan menghentikan pem- blokiran konten lain yang sedang diunduh. Aturan yang sama ber- laku untuk Javascript, yang dapat disimpan di dalam halaman itu sendiri atau disertakan di bagian bawah halaman. Jika Anda dapat menghindari menyertakan file di bagian atas halaman, gunakan atribut async saat menyertakannya.
<script async type="text/javascript" src="jquery.js"></script>
Pengalihan Seluler Karena jaringan seluler biasanya lambat, terlalu banyak pengalihan dapat merusak kecepatan halaman Anda. Jika Anda memelihara banyak URL, pastikan semua tautan Anda mengarah ke halaman yang relevan. Jika Anda mengelola be- berapa URL dan Anda mengenali pengguna mengunjungi halaman desktop dari perangkat seluler dan Anda memiliki halaman seluler yang setara di URL yang berbeda, maka alihkan pengguna ke URL tersebut alih-alih menampilkan kesalahan 404.
71
Gambar Berat Gambar berat meningkatkan waktu muat, namun kami tidak dapat sepenuhnya menghilangkannya karena berguna dan efektif. Oleh karena itu, Anda harus menjaga keseimbangan yang baik antara teks dan gambar yang berat. Gunakan alat yang bagus untuk mengoptimalkan gambar Anda dan menyimpannya pada resolusi rendah untuk menghindari unduhan yang berat.
Hindari plug-in dan pop-up Plug-in seperti Flash dan Java mung- kin tidak tersedia di perangkat seluler pengguna. Selalu pastikan Anda tidak memiliki konten yang tidak dapat diputar di halaman seluler Anda. Hindari menggunakan pop-up di halaman seluler ka- rena akan sangat canggung untuk menutup pop-up ini di perangkat seluler.
Saat membuat halaman seluler, selalu ingat bahwa pengguna memiliki ruang terbatas untuk dikerjakan. Jadi, Anda ha- rus sesingkat mungkin saat membuat judul, URL, dan deskripsi meta – tentu saja tanpa mengurangi esensi atau kualitas informasi.
Alat yang Berguna
Berikut adalah daftar beberapa alat berguna yang dapat Anda gunakan untuk mengetahui seberapa ramah seluler situs Anda.
Alat Webmaster Google Gunakan alat dan teknik Google yang tersedia untuk memahami apa yang harus digunakan dan apa
72
yang harus dihindari saat mendesain situs web desktop dan seluler.
Emulator Seluler Ini memungkinkan Anda melihat bagaimana situs Anda muncul di berbagai perangkat seluler.
Moz Lokal Gunakan alat ini untuk memastikan bahwa SEO lo- kal Anda teratur.
Alat Pengujian Desain Web Responsif Gunakan alat ini untuk melihat tampilan situs responsif Anda di berbagai perangkat seluler dengan ukuran layar standar yang berbeda.
Screaming Frog Ini adalah alat yang berguna yang memung- kinkan Anda untuk menganalisis situs Anda dan memeriksa ulang semua pengalihan.
User Agent Switcher Ini adalah add-on Firefox yang dapat Anda gunakan untuk mengetahui bagaimana tampilan situs Anda ketika diakses dari agen pengguna yang berbeda.
73