Lembar Cheat untuk Desain Seluler: Desain Responsif, Penyajian Dinamis, dan Situs Seluler

Pembaruan editor (Juli 2015): Pada bulan April 2015, Google membuat pembaruan yang telah diumumkan sebelumnya untuk algoritme yang memberi peringkat pada hasil penelusuran seluler. Keramahan seluler situs web adalah sinyal peringkat yang dikonfirmasi untuk peringkat pencarian seluler. Catat dan buat situs web Anda ramah seluler dengan bantuan artikel berikut.

Kita semua pernah mendengar statistik: 2014 adalah tahun ketika lebih banyak orang mengakses Internet di smartphone daripada di komputer atau laptop. Desain ponsel adalah masa depan. Anda tidak ingin situs Anda tertinggal, tetapi bagaimana tepatnya Anda memprogram untuk Internet yang semakin mobile ini? Ada tiga opsi utama, masing-masing dengan kelebihan dan kekurangannya sendiri. Dalam posting ini, saya akan memecah opsi kesiapan seluler Anda, memberi Anda pro dan kontra dari masing-masing untuk membantu Anda memilih jalur terbaik ke depan untuk situs web dan strategi SEO Anda.

Opsi 1: Desain Responsif

Desain responsif menentukan resolusi layar tempat halaman dilihat menggunakan kueri media, lalu menyesuaikan ukuran dan tata letak halaman dengan tepat. Google telah menyatakan lebih suka desain web responsif, yang menjadikannya kelas berat dalam diskusi ini.

Kelebihan :

1. Hanya ada satu versi untuk setiap halaman. Halaman yang sama menyesuaikan dengan jenis perangkat yang menampilkannya (daripada mendeteksi jenis perangkat dan kemudian menyajikan konten yang berbeda berdasarkan itu). Memiliki HTML dan URL yang sama di semua perangkat menyederhanakan pemeliharaan situs Anda.
2. Desain responsif tidak bergantung pada deteksi agen pengguna, seperti yang dilakukan oleh dua opsi lainnya. Deteksi agen pengguna (yaitu, mendeteksi browser atau perangkat apa yang meminta halaman web) sebenarnya tidak buruk, tetapi tidak sempurna, dan jika ada kesalahan dalam prosesnya, pengguna mungkin mendapatkan versi situs Anda yang salah. Selain itu, ini menyelamatkan spider mesin telusur dari keharusan merayapi situs Anda karena beberapa agen pengguna yang berbeda — artinya lebih banyak situs Anda yang dirayapi.
3. Responsif umumnya memuat lebih cepat di browser. Karena semua perangkat mendapatkan konten yang sama, tidak ada proses pengalihan yang memungkinkan deteksi agen pengguna-permintaan. Dan siapa pun yang pernah lapar dan mencari restoran yang bagus di ponsel cerdas mereka tahu, kecepatan itu penting.

Kontra:

1. Ini bisa menjadi proses yang panjang dan intensif untuk mendesain ulang situs yang ada. Jadi, jika Anda memiliki situs besar, pindah ke responsif mungkin bukan pilihan terbaik.
2. Bergantung pada tata letak situs Anda, mungkin terlalu sulit untuk menjejalkan konten ke layar seluler. Situs seperti NYTimes.com mengelola situs seluler terpisah karena lebih mudah memecah konten daripada memasukkannya ke dalam satu halaman.
3. Elemen navigasi tidak selalu berubah ukuran dengan baik; elemen hover-over tidak berfungsi sama sekali di layar sentuh. Jadi menjadi responsif dapat berarti mengubah navigasi Anda.
4. Ada beberapa contoh di mana halaman responsif dengan banyak gambar dimuat lebih lambat dengan desain responsif. Saya harus menekankan bahwa ini bukan norma, tetapi itu telah terjadi.

Jika Anda memilih desain responsif, ingatlah bahwa Anda ingin mengoptimalkan gambar dan menguji situs Anda di berbagai browser dan perangkat (atau menggunakan emulator agen pengguna yang baik) sebelum meluncurkannya secara langsung.

Opsi 2: Penyajian Dinamis

Kadang-kadang disebut sebagai "mengendus" agen pengguna, penyajian dinamis dapat dilakukan dengan dua cara dan sulit untuk diterapkan. Faktanya, Google menguraikan beberapa kesalahan umum yang dibuat dengan penyajian dinamis. Apa yang dilakukan teknik ini adalah mendeteksi agen pengguna pengunjung (yaitu, perangkat apa yang mereka gunakan untuk melihat situs Anda) dan kemudian mengarahkan ulang di tingkat server . Salah satu cara untuk menerapkan penyajian dinamis adalah pengalihan searah , di mana tautan ke situs default ke situs desktop, tetapi perangkat seluler dialihkan dari situs desktop ke situs seluler.

Jenis kedua, pengalihan dua arah , memiliki kode di situs desktop dan seluler, memastikan bahwa setiap pengunjung, apa pun perangkatnya, mendapatkan konten yang sesuai. (Potongan kode ini terkadang disebut tag switchboard.) Implementasi berarti menempatkan tag rel="alternate" di desktop, menunjuk ke situs seluler; dan, di situs seluler, letakkan tag rel=”canonical” yang menunjuk ke situs desktop.

Kelebihan:

1. Karena pengalihan dilakukan di tingkat server, Anda hanya perlu satu URL per halaman.
2. Penyajian dinamis juga berfungsi dengan baik untuk ponsel menengah . Seperti yang didefinisikan oleh PCMag.com, ponsel fitur adalah "ponsel yang berisi serangkaian fungsi tetap di luar panggilan suara dan pesan teks, tetapi tidak seluas smartphone." Misalnya, ponsel menengah biasanya tidak dapat mengunduh aplikasi, tetapi biasanya memiliki beberapa kemampuan menjelajah web. Per Google, perbedaan terbesar adalah bahwa ponsel berfitur tidak dapat memproses CSS, sehingga mereka tidak dapat menangani desain responsif dengan baik. Jadi, penting untuk mengetahui audiens Anda dan jenis perangkat seluler apa yang mereka gunakan.
3. Jika Anda ingin memiliki kumpulan kata kunci terpisah khusus untuk pengguna seluler, maka opsi ini memungkinkan Anda melakukannya karena pengguna seluler dan pengguna desktop masing-masing melihat HTML yang berbeda. (Search Engine Land memiliki artikel bagus yang membahas kata kunci khusus seluler.)

Kontra:

1. Pengalihan dinamis menggandakan pekerjaan pemeliharaan situs Anda karena ini menyiapkan situs terpisah untuk seluler, dengan kumpulan HTML terindeks terpisah yang memerlukan proyek SEO terpisah.
2. Daftar string agen pengguna yang diperlukan juga memerlukan pemeliharaan konstan, karena string baru harus ditambahkan setiap kali perangkat seluler baru dirilis.
3. Terakhir, ingatlah bahwa Anda harus menggunakan header “Vary HTTP-User Agents” jika situs Anda menyajikan konten secara dinamis. Header membantu konten disajikan dengan benar dan membantu mesin menyimpannya dengan benar. Google memiliki detail tentang cara menambahkan tajuk ini.

Opsi 3: Situs Seluler

Opsi ini, sesuai dengan namanya, melibatkan pembuatan domain terpisah khusus untuk pengguna seluler. Contoh paling umum adalah m.domain.com atau mobile.domain.com . Ini adalah pilihan populer untuk pengecer besar; Bridget Randolph menunjukkan bahwa “73% situs web yang berperingkat dalam 100 ribu situs Quantcast Top menggunakan pengalihan URL ke URL khusus seluler.” Seperti penyajian dinamis, teknik ini melibatkan pengembangan konten khusus untuk pengunjung yang menggunakan perangkat seluler; namun, URL situs seluler terpisah berbeda, jadi tidak ada pengalihan tingkat server.

Kelebihan:

1. Untuk situs yang lebih besar dengan jumlah halaman ratusan ribu atau jutaan, menerapkan desain responsif mungkin terlalu banyak pekerjaan. Situs seluler memungkinkan Anda menyesuaikan pengalaman pengguna, dan perlahan membangun pengalaman seluler yang unik.
2. Seperti penyajian dinamis, situs seluler lebih baik untuk ponsel menengah daripada desain responsif. Bergantung pada demografi situs Anda, ini mungkin bukan kriteria; tetapi untuk beberapa bisnis, ini merupakan pertimbangan penting.

Kontra :

1. Situs seluler Anda tidak akan mendapat manfaat dari profil tautan balik positif apa pun yang telah dibuat oleh situs desktop Anda (kecuali jika Anda menerapkan pengalihan dua arah). Jadi, jika Anda ingin membuat pengguna seluler menemukan Anda di penelusuran organik, ini mungkin kemunduran yang nyata.
2. Situs seluler Anda akan membutuhkan beberapa pekerjaan SEO tambahan. Anda harus mengirimkan Peta Situs XML terpisah ke Google dan Alat Webmaster Bing. Plus, layar yang lebih kecil berarti SERP yang lebih kecil, jadi Anda mungkin perlu mengedit tag Meta Anda. Tag Meta khusus seluler harus lebih pendek daripada untuk situs desktop.

Seperti yang Anda lihat, konten telah diformat ulang dan dikurangi secara dramatis agar dapat dibaca di perangkat seluler.

Dalam memilah-milah semua informasi ini untuk membuat pilihan yang tepat untuk situs Anda, jangan lupa untuk bertanya pada diri sendiri berapa banyak pengunjung Anda yang menggunakan perangkat seluler untuk mengakses situs. Periksa analitik Anda. Jika persentase total lalu lintas seluler di bawah lima persen, Anda mungkin bisa menunggu untuk menerapkan desain seluler. Untuk sekarang. Jika prediksinya benar, maka penggunaan seluler hanya akan terus mengklaim lebih banyak lalu lintas Internet.

Untuk informasi tentang cara mengoptimalkan halaman Anda untuk kecepatan dan SEO seluler, sebaiknya mulai dengan sumber daya berikut:

• Daftar Periksa SEO & Desain Seluler All-In-One
• 7 Praktik Terbaik Navigasi Ramah Seluler
• Panduan SEO: Pengoptimalan SEO dan UX Seluler
• Optimalisasi Gambar: Hal #1 yang Dapat Anda Lakukan untuk Meningkatkan UX Seluler
• Panduan Seluler Webmaster oleh Google Developers