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 yang 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).

Desain responsif menayangkan kode yang sama ke semua perangkat, yang disesuaikan untuk ukuran layar.

TL;DR

  • Gunakan tag meta name="viewport" untuk memberi tahu browser cara menyesuaikan konten.
  • Liihat Dasar-Dasar Web untuk dokumentasi selengkapnya.

Menggunakan meta name="viewport"

Untuk memberi tahu browser bahwa halaman Anda bisa menyesuaikan semua perangkat, tambahkan tag meta ke header dokumen:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tag meta viewport 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 laman 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.

Gambar sebelah kiri adalah halaman tanpa area pandang meta yang ditentukan sehingga browser seluler mengasumsikan lebar desktop dan menskalakan halaman agar pas dengan layar, yang menjadikan konten sulit dibaca. Di sebelah kanan adalah laman yang sama dengan area pandang yang ditentukan dan sesuai dengan lebar perangkat - browser seluler tidak mengubah ukuran laman sehingga konten dapat terbaca.

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.

JavaScript

Satu bagian dalam membangun situs ramah seluler yang membutuhkan pertimbangan matang adalah penggunaan JavaScript untuk mengubah perenderan dan perilaku situs pada perangkat yang berlainan. Penggunaan umum JavaScript mencakup penentuan iklan dan variasi resolusi gambar yang ditampilkan di halaman tersebut.

Bagian ini menjelaskan berbagai pendekatan untuk menggunakan JavaScript serta hubungannya dengan rekomendasi Google terkait penggunaan desain web yang responsif.

Konfigurasi umum

Ada tiga implementasi JavaScript yang populer bagi situs mobile-friendly:

  • JavaScript-adaptif: Dalam konfigurasi ini, semua perangkat mendapatkan konten HTML, CSS, dan JavaScript yang sama. Saat JavaScript dijalankan di perangkat, rendering atau perilaku situs akan diubah. Jika suatu situs memerlukan JavaScript, hal ini merupakan konfigurasi yang direkomendasikan oleh Google.
  • Deteksi gabungan: Dalam implementasi ini, situs menggunakan deteksi JavaScript dan sisi server atas kemampuan perangkat untuk menayangkan konten yang berbeda ke perangkat yang berbeda.
  • JavaScript yang ditayangkan secara dinamis: Dalam konfigurasi ini, HTML yang sama ditayangkan untuk semua perangkat, tetapi JavaScript ditayangkan dari URL yang secara dinamis menayangkan kode JavaScript yang berbeda tergantung pada agen-pengguna perangkat.

Mari kita lihat setiap konfigurasi ini secara mendetail.

JavaScript-adaptive

Dalam konfigurasi ini, URL menayangkan konten yang sama (HTML, CSS, JavaScript, gambar) ke semua perangkat. Render atau perilaku situs hanya akan diubah ketika JavaScript dijalankan di perangkat. Hal ini mirip dengan cara kerja desain web yang responsif yang menggunakan kueri media CSS.

Misalnya, suatu halaman menayangkan HTML yang sama ke semua perangkat, yang menyertakan elemen <script> yang meminta URL eksternal yang menayangkan JavaScript. Semua perangkat yang meminta URL JavaScript mendapatkan kode yang sama. Ketika dijalankan, JavaScript mendeteksi perangkat dan memutuskan untuk mengubah sesuatu tentang halaman tersebut, misalnya menyertakan gambar yang smartphone-friendly atau menambahkan kode, bukan alternatif desktop.

Konfigurasi ini sangat erat kaitannya dengan desain web yang responsif, dan algoritme kami bisa mendeteksi penyiapan ini secara otomatis. Selanjutnya, konfigurasi ini tidak memiliki persyaratan untuk header HTTP Vary karena URL laman dan asetnya tidak menyajikan konten secara dinamis. Karena keuntungan ini, jika perangkat Anda memerlukan penggunaan JavaScript, ini adalah konfigurasi yang kami sarankan.

Deteksi gabungan

Deteksi gabungan adalah penyiapan saat server bekerja sama dengan JavaScript pada klien untuk mendeteksi kemampuan perangkat dan mengubah konten yang ditayangkan.

Misalnya, sebuah situs mungkin memilih untuk mengubah render konten berdasarkan jenis perangkat, apakah berupa desktop atau smartphone. Dalam hal ini, situs web dapat menyertakan JavaScript yang mendeteksi dimensi layar, yang kemudian dikirim ke server yang memperbarui atau mengubah kode yang dikirim ke perangkat. Biasanya, JavaScript menyimpan kemampuan perangkat yang dideteksi di cookie yang dibaca server pada kunjungan berikutnya dari perangkat yang sama.

Mengingat bahwa server mengembalikan HTML yang berbeda ke agen-pengguna yang berbeda, deteksi gabungan dianggap sebagai jenis konfigurasi penayangan dinamis. Detail lengkapnya dijelaskan di bagian penayangan dinamis, tetapi untuk meringkasnya secara singkat, situs harus menyertakan header respons HTTP "Vary: User-agent" saat ada permintaan untuk URL yang menayangkan konten HTML berbeda ke agen-pengguna yang berbeda.

JavaScript yang ditayangkan secara dinamis

Dalam konfigurasi ini, semua perangkat menyajikan HTML yang sama yang menyertakan elemen <script> untuk menyertakan file JavaScript eksternal yang dapat memiliki konten yang berbeda, tergantung pada permintaan agen pengguna. Artinya, kode JavaScript ditayangkan secara dinamis.

Dalam hal ini, sebaiknya file JavaScript ditayangkan dengan header HTTP "Vary: User -agent". Tindakan ini merupakan sinyal bagi cache Internet dan Googlebot bahwa JavaScript mungkin berbeda bagi agen-pengguna yang berbeda, dan merupakan sinyal bagi Googlebot untuk meng-crawl file JavaScript menggunakan agen-pengguna Googlebot yang berbeda.