Desain Web yang Responsif
Desain web yang responsif (RWD) adalah penyiapan yang membuat server selalu mengirim kode HTML yang sama ke semua perangkat dan CSS digunakan untuk mengubah proses render halaman di perangkat. Algoritme Google pada umumnya bisa mendeteksi penyiapan ini secara otomatis jika semua agen-pengguna Googlebot diizinkan untuk meng-crawl halaman dan asetnya (CSS, JavaScript, dan gambar).
TL;DR
- Gunakan tag
meta name="viewport"untuk memberi tahu browser cara menyesuaikan konten. - Lihat Dasar-Dasar Web untuk dokumentasi selengkapnya.
name="viewport"
Untuk memberi tahu browser bahwa halaman Anda dapat menyesuaikan dengan semua perangkat, tambahkan tag meta ke header dokumen:
Tag viewport meta memberikan petunjuk kepada browser tentang cara menyesuaikan dimensi dan penskalaan halaman dengan lebar layar perangkat. Jika elemen area pandang meta tidak ada, secara default browser seluler akan merender halaman sesuai lebar layar desktop (biasanya sekitar 980 piksel, meski hal ini berbeda antara satu perangkat dengan perangkat lainnya). Kemudian, browser seluler mencoba membuat konten terlihat lebih baik dengan meningkatkan ukuran font dan menyesuaikan ukuran konten agar pas dengan layar atau hanya memperlihatkan bagian konten yang pas dengan layar.
Bagi pengguna, hal ini berarti ukuran font mungkin memiliki tampilan yang tidak konsisten, dan mereka mungkin harus mengetuk dua kali atau mencubit untuk memperbesar agar bisa melihat dan berinteraksi dengan konten. Bagi Google, kami mungkin akan menilai halaman sebagai tidak mobile-friendly karena memerlukan interaksi semacam ini di perangkat seluler.
Untuk gambar yang responsif, sertakan elemen <picture>.
Pada umumnya, jika situs Anda berfungsi di browser terbaru seperti Google Chrome atau Apple Mobile Safari, situs tersebut juga akan berfungsi dengan algoritme kami.
Mengapa desain responsif
Kami menyarankan penggunaan desain web yang responsif karena:
- Memudahkan pengguna berbagi dan menghubungkan ke konten Anda dengan satu URL.
- Membantu algoritme Google menetapkan properti pengindeksan ke halaman dengan akurat daripada harus memberitahukan adanya halaman desktop/seluler yang terkait.
- Memerlukan waktu rekayasa yang lebih singkat untuk mengelola beberapa halaman bagi konten yang sama.
- Mengurangi kemungkinan kesalahan umum yang memengaruhi situs seluler.
- Tidak memerlukan pengalihan bagi pengguna untuk memiliki tampilan yang dioptimalkan bagi perangkat sehingga mengurangi waktu pemuatan. Selain itu, pengalihan berbasis agen-pengguna rentan terhadap error dan bisa menurunkan pengalaman pengguna situs Anda (lihat Masalah saat mendeteksi agen-pengguna untuk detailnya).
- Menghemat resource saat Googlebot meng-crawl situs Anda. Untuk halaman desain web yang responsif, satu agen-pengguna Googlebot hanya perlu meng-crawl halaman satu kali, tidak perlu meng-crawl beberapa kali dengan agen-pengguna Googlebot yang berbeda untuk mendapatkan semua versi konten. Penyempurnaan efisiensi crawling ini secara tidak langsung bisa membantu Google mengindeks lebih banyak konten situs dan menjaganya selalu diperbarui sebagaimana mestinya.
Jika Anda tertarik dengan desain web yang responsif, mulailah dengan postingan blog kami di Webmaster Central dan kunjungi situs Dasar-Dasar Web.