Desain Web Responsif

Desain web responsif (RWD) adalah penyiapan saat server selalu mengirim kode HTML yang sama ke semua perangkat dan CSS digunakan untuk mengubah perenderan laman di perangkat. Algoritme Google seharusnya dapat mendeteksi penyiapan ini secara otomatis jika semua agen pengguna Googlebot diizinkan untuk merayapi laman dan asetnya (CSS, JavaScript, dan gambar).

Desain responsif menyajikan kepada semua perangkat dengan kode yang sama yang disesuaikan untuk ukuran layar.

TL;DR

  • Gunakan tag meta name="viewport" untuk memberi tahu browser cara menyesuaikan konten.
  • Lihat situs Dasar-dasar Web kami untuk dokumentasi lebih lanjut.

Menggunakan meta name="viewport"

Untuk memberi tahu browser bahwa laman Anda akan beradaptasi dengan semua perangkat, tambahkan tag meta ke judul dokumen:

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

Tag meta viewport memberikan petunjuk kepada browser terkait cara menyesuaikan dimensi dan penskalaan laman agar sesuai 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, tampilan ukuran font mungkin terasa tidak konsisten dan mereka mungkin harus mengetuk dua kali atau mencubit untuk memperbesar agar dapat melihat dan berinteraksi dengan konten. Bagi Google, kami mungkin akan menilai laman sebagai tidak sesuai untuk seluler karena laman memerlukan jenis (atau tipe) interaksi ini pada perangkat seluler.

Di sebelah kiri adalah laman tanpa area pandang meta yang ditentukan - browser seluler akan mengasumsikan lebar desktop dan mengubah ukuran laman agar pas dengan layar, sehingga 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:

  • Mempermudah pengguna berbagi dan menautkan ke konten Anda dengan satu URL.
  • Membantu algoritme Google menetapkan properti pengindeksan ke laman dengan akurat daripada harus memberi sinyal keberadaan laman desktop/seluler yang dimaksud.
  • Memerlukan waktu penyesuaian yang lebih singkat untuk mengelola beberapa laman bagi konten yang sama.
  • Mengurangi kemungkinan kesalahan umum yang memengaruhi situs seluler.
  • Pengguna tidak memerlukan pengalihan untuk memunculkan tampilan yang dioptimalkan bagi perangkat, sehingga mengurangi waktu pemuatan. Selain itu, pengalihan berbasis agen pengguna rentan kesalahan dan dapat merusak pengalaman pengguna situs Anda (lihat bagian "Masalah saat mendeteksi agen pengguna" untuk detailnya).
  • Menghemat sumber daya saat Googlebot merayapi situs Anda. Untuk laman desain web yang responsif, satu agen pengguna Googlebot hanya perlu merayapi laman Anda satu kali, bukan merayapi beberapa kali dengan agen pengguna Googlebot yang berbeda untuk mengambil semua versi konten. Penyempurnaan dalam efisiensi perayapan ini secara tidak langsung dapat membantu Google mengindeks lebih banyak konten situs dan menjaganya selalu yang terbaru sebagaimana mestinya.

Jika Anda tertarik dengan desain web yang responsif, mulailah dengan entri blog kami di Pusat Webmaster 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 laman tersebut.

Bagian ini mendeskripsikan pendekatan yang berbeda terhadap penggunaan JavaScript dan bagaimana pendekatan tersebut terkait dengan saran Google dalam menggunakan desain web yang responsif.

Konfigurasi umum

Tiga penerapan JavaScript yang populer bagi situs yang sesuai untuk seluler:

  • JavaScript-adaptif: Dalam konfigurasi ini, semua perangkat mendapatkan konten HTML, CSS, dan JavaScript yang sama. Saat JavaScript dijalankan di perangkat, perenderan atau perilaku situs diubah. Jika sebuah situs web memerlukan JavaScript, ini adalah konfigurasi yang disarankan Google.
  • Deteksi gabungan: Dalam penerapan ini, situs web menggunakan JavaScript dan deteksi sisi server atas kemampuan perangkat untuk menyajikan konten yang berbeda ke perangkat yang berbeda.
  • JavaScript yang disajikan secara dinamis: Dalam konfigurasi ini, semua perangkat disajikan dengan HTML yang sama, namun JavaScript disajikan dari URL yang secara dinamis menyajikan kode JavaScript berbeda tergantung pada agen pengguna perangkat.

Mari kita lihat setiap konfigurasi ini secara mendetail.

JavaScript-adaptif

Dalam konfigurasi ini, URL menyajikan konten yang sama (HTML, CSS, Javascript, gambar) ke semua perangkat. Perenderan atau tindakan situs akan diubah hanya saat JavaScript dijalankan di perangkat. Hal ini serupa dengan cara kerja desain web responsif yang menggunakan kueri media CSS.

Misalnya, sebuah laman menyajikan HTML yang sama yang menyertakan elemen <script> yang meminta URL eksternal penyaji JavaScript ke semua perangkat. Semua perangkat yang meminta URL JavaScript mendapatkan kode yang sama. Ketika dijalankan, JavaScript mendeteksi perangkat dan memutuskan untuk mengubah sesuatu tentang laman, misalnya menyertakan gambar yang ramah ponsel cerdas atau kode iklan, bukan alternatif desktop.

Konfigurasi ini sangat erat kaitannya dengan desain web yang responsif dan algoritme kami dapat 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 merupakan penyiapan saat server bekerja sama dengan JavaScript pada klien untuk mendeteksi kemampuan perangkat dan mengubah konten yang disajikan.

Misalnya, sebuah situs dapat memilih untuk mengubah perenderan konten berdasarkan pada apakah perangkat berupa desktop atau ponsel cerdas. 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 server mengembalikan HTML yang berbeda ke agen pengguna yang berbeda, deteksi gabungan dianggap sebagai jenis konfigurasi penyajian dinamis. Detailnya dijelaskan secara lengkap di bagian penyajian dinamis, tetapi untuk meringkasnya secara singkat, situs web harus menyertakan header tanggapan HTTP "Vary: User-agent" saat URL yang menyajikan konten HTML berbeda ke agen pengguna yang berbeda diminta.

JavaScript yang disajikan 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 disajikan secara dinamis.

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

Kirim masukan tentang...