Tablet dan ponsel menengah

Tablet

Saat memikirkan cara mengonfigurasi situs untuk pengguna seluler, biasanya terpikirkan pula pengunjung yang menggunakan perangkat tablet untuk mengakses situs Anda. Meskipun kami tidak memiliki rekomendasi khusus untuk membuat situs ramah mesin telusur yang dioptimalkan untuk tablet, berikut beberapa tips untuk membuat situs yang kompatibel dengan pengguna desktop, smartphone, dan tablet.

Desain Web yang Responsif

Rekomendasi umum dari kami adalah menggunakan desain web yang responsif. Artinya, situs Anda menayangkan kode HTML yang sama ke semua perangkat beserta aturan gaya CSS yang berbeda untuk mengoptimalkan antarmuka situs di desktop, smartphone, dan tablet.

Jika situs Anda menggunakan desain web yang responsif, uji situs tersebut di berbagai tablet untuk memastikan situs dirender dengan benar karena, sama seperti smartphone, tablet memiliki berbagai ukuran dan resolusi layar.

Konten khusus perangkat

Situs dapat menampilkan halaman yang berbeda (misalnya HTML, CSS, dan JavaScript yang berbeda) untuk perangkat yang berlainan. Halaman ini dapat ditayangkan di URL yang sama (konfigurasi yang disebut penayangan dinamis) atau di URL khusus yang terpisah.

Jika situs Anda memiliki halaman yang berbeda untuk ditayangkan ke pengguna desktop dan smartphone, serta tidak memiliki halaman khusus tablet, menurut pengalaman kami, biasanya pengguna tablet berharap untuk melihat situs desktop, bukan halaman situs untuk smartphone.

Jika situs Anda memiliki halaman yang dioptimalkan untuk tablet, panduan ini dapat membantu Anda mengonfigurasi situs:

  • Penayangan dinamis: Dalam konfigurasi ini, URL yang sama ditayangkan ke pengguna desktop, smartphone, dan tablet dengan menayangkan HTML (dan CSS) yang berbeda, bergantung pada agen pengguna. Seperti yang dijelaskan pada rekomendasi kami untuk situs smartphone, sebaiknya Anda menggunakan header HTTP Vary.
  • URL khusus tablet yang terpisah: Dalam hal ini, sebaiknya Anda mengizinkan Googlebot meng-crawl URL tablet dan menggunakan rel="canonical" pada setiap URL tablet untuk mengarah ke URL desktop yang setara.

Ponsel menengah

Sebisa mungkin gunakan desain web yang responsif jika situs ditayangkan untuk pengguna smartphone. Namun, karena ponsel menengah tidak memiliki kemampuan untuk mengikuti kueri media CSS, pemilik situs yang ingin menayangkan pada ponsel menengah perlu mengonfigurasi situsnya agar menggunakan penayangan dinamis atau URL terpisah untuk menayangkan konten ke ponsel menengah.

Kami juga merekomendasikan agar halaman yang ditujukan untuk mendukung ponsel menengah menyertakan tag <link rel="alternate" media="handheld">.

Bagian ini menunjukkan cara menerapkan tiap-tiap konfigurasi.

Penayangan Dinamis

Mengonfigurasi server Anda agar secara dinamis menayangkan konten yang dioptimalkan untuk ponsel menengah pada URL yang sama dengan yang ditayangkan ke perangkat lain, memerlukan penerapan yang sama seperti saat menayangkan ke smartphone. Server harus menyertakan header respons HTTP Vary: User-Agent, dan Anda juga harus menyadari kendala umum saat mendeteksi agen pengguna. Selain itu, tambahkan tag berikut di halaman Anda: 

<link rel="alternate" media="handheld" href="URL for the current page" />

URL Terpisah

Ada tiga konfigurasi yang didukung saat menayangkan URL yang berbeda ke pengguna desktop, smartphone, dan ponsel menengah. Konfigurasi ini menggunakan anotasi yang telah kami jelaskan sebelumnya, untuk membuat situs yang dioptimalkan bagi ponsel menengah dan smartphone.

Konfigurasi URL khusus

Dalam konfigurasi ini, penyiapannya adalah seperti berikut:

  • http://www.example.com/page-1 ditayangkan ke permintaan desktop
  • http://m.example.com/page-1 ditayangkan ke pengguna smartphone
  • http://phone.example.com/page-1 ditayangkan ke pengguna ponsel menengah

Dalam konfigurasi ini, sebaiknya tambahkan anotasi berikut guna membantu algoritme kami memahami hubungan antara halaman setara yang menargetkan perangkat yang berbeda:

Pada www.example.com/page-1, tambahkan: 

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
<link rel="alternate" media="handheld" href="http://phone.example.com/page-1" />

Pada m.example.com/page-1, tambahkan: 

<link rel="canonical" href="http://www.example.com/page-1" />

Pada phone.example.com/page-1, tambahkan: 

<link rel="canonical" href="http://www.example.com/page-1" />

Konfigurasi URL desktop dan semua perangkat seluler

Dalam konfigurasi ini, situs akan ditayangkan ke perangkat desktop pada satu URL dan ke semua perangkat seluler (dengan kata lain, smartphone dan ponsel menengah) pada URL yang terpisah. Contoh:

  • http://www.example.com/page-1 ditayangkan ke pengguna desktop
  • http://m.example.com/page-1 ditayangkan ke pengguna smartphone dan ponsel menengah

Dalam hal ini, anotasi pada http://www.example.com/page-1 adalah sebagai berikut: 

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />

Pada halaman m.example.com, sertakan tag berikut: 

<link rel="canonical" href="http://www.example.com/page-1" />

rel="canonical" ini perlu disertakan, terlepas dari apakah halaman tersebut adalah halaman ponsel menengah atau smartphone atau bukan.

Server harus menyertakan header HTTP Vary: User-Agent dalam responsnya. Header ini akan memberi sinyal ke cache internet dan Googlebot bahwa respons server mungkin berbeda bergantung pada agen penggunanya. Googlebot menggunakan sinyal ini untuk melakukan crawling.

Konfigurasi URL ponsel menengah yang terpisah

Dalam konfigurasi ini, situs ditayangkan ke desktop dan smartphone pada satu URL menggunakan desain web yang responsif atau penayangan dinamis, dan ke ponsel menengah pada URL yang terpisah. Contoh:

  • http://www.example.com/page-1 ditayangkan ke pengguna desktop dan smartphone
  • http://m.example.com/page-1 ditayangkan ke pengguna ponsel menengah

Dalam hal ini, anotasi pada http://www.example.com/page-1 adalah tag berikut: 

<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />

Anotasi pada http://m.example.com/page-1 adalah tag berikut: 

<link rel="canonical" href="http://www.example.com/page-1" />

Pengalihan dan header HTTP Vary

Jika situs Anda secara otomatis mengalihkan pengunjung seluler yang membuka situs desktop ke situs seluler, atau sebaliknya, pastikan untuk mengonfigurasi server Anda agar menyertakan header HTTP Vary.

Peta situs

Rekomendasi kami untuk menggunakan peta situs ponsel menengah dan peta situs untuk URL alternatif smartphone tetap sama.