Tablet
Saat memikirkan cara mengonfigurasi situs bagi pengguna seluler, Anda biasanya akan teringat dengan pengunjung yang mengaksesnya di perangkat tablet. Meskipun kami tidak memiliki rekomendasi khusus untuk membuat situs ramah mesin telusur yang dioptimalkan untuk tablet, berikut adalah 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 menggunakan desain web yang responsif, uji situs Anda di berbagai tipe tablet untuk memastikan rendering situs yang benar; karena seperti smartphone, tablet juga memiliki ukuran dan resolusi layar yang bervariasi.
Konten spesifik perangkat
Situs bisa mengembalikan halaman yang berbeda (misalnya HTML, CSS, dan JavaScript yang berbeda) untuk perangkat yang berbeda. Halaman ini bisa ditayangkan pada URL yang sama (sebuah konfigurasi yang disebut penayangan dinamis) atau pada URL spesifik 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 akan lebih memilih situs desktop, bukan halaman smartphone situs.
Jika situs Anda memiliki situs yang dioptimalkan untuk tablet, panduan ini bisa membantu Anda mengonfigurasinya:
- Penayangan dinamis: Berikut adalah satu URL yang sama-sama kompatibel dengan pengguna desktop, smartphone, dan tablet dengan menayangkan HTML (dan CSS) yang berbeda menurut agen-pengguna. Seperti yang dijelaskan dalam rekomendasi kami untuk situs smartphone, sebaiknya Anda menggunakan header HTTP Vary.
- URL khusus tablet yang terpisah: Dalam hal ini, sebaiknya izinkan 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 pada situs yang ditayangkan untuk pengguna smartphone. Namun, karena ponsel menengah tidak memiliki kemampuan untuk mengikuti kueri media CSS, webmaster yang ingin melayani ponsel menengah perlu mengonfigurasi situsnya agar menggunakan penayangan dinamis atau URL yang terpisah untuk menayangkan konten ponsel menengah.
Kami juga merekomendasikan agar halaman yang ditujukan untuk mendukung ponsel menengah
menyertakan tag <link rel="alternate" media="handheld"> seperti yang dijelaskan di bawah ini.
Bagian ini menunjukkan cara mengimplementasikan masing-masing konfigurasi.
Penayangan Dinamis
Mengonfigurasi server agar secara dinamis menayangkan konten yang dioptimalkan untuk
ponsel menengah pada satu URL yang juga menayangkan di perangkat lain memerlukan
implementasi yang sama seperti ketika menayangkan di smartphone. Server perlu
menyertakan header respons HTTP Vary: User-Agent dan Anda juga perlu menyadari
adanya kendala umum saat mendeteksi agen-pengguna. Selain itu, tambahkan tag berikut di halaman Anda:
<link rel="alternate" media="handheld" href="[current page URL]" />
URL Terpisah
Webmaster memiliki tiga konfigurasi yang didukung saat melayani pengguna desktop, smartphone, dan ponsel menengah pada URL yang berbeda. Konfigurasi ini menggunakan anotasi yang telah kami jelaskan 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-1ditayangkan ke permintaan desktophttp://m.example.com/page-1ditayangkan ke pengguna smartphonehttp://phone.example.com/page-1ditayangkan ke pengguna ponsel menengah
Dalam konfigurasi ini, sebaiknya tambahkan anotasi berikut guna membantu algoritme kami memahami hubungan antara halaman sepadan yang menargetkan perangkat yang berlainan:
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 semua perangkat seluler (dengan kata lain, smartpone maupun ponsel menengah) pada URL yang terpisah. Contohnya:
http://www.example.com/page-1ditayangkan ke pengguna desktophttp://m.example.com/page-1ditayangkan ke pengguna smartphone dan ponsel menengah
Dalam hal ini, anotasi di 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" />
Di halaman m.example.com, sertakan tag berikut:
<link rel="canonical" href="http://www.example.com/page-1" />
rel="canonical" ini harus disertakan meskipun halaman ditujukan bagi ponsel menengah
maupun smartphone, atau bukan keduanya.
Server harus menyertakan header HTTP Vary: User-Agent dalam responsnya. Hal ini akan
memberi sinyal pada cache Internet dan Googlebot bahwa respons server mungkin berbeda
tergantung pada agen-pengguna. Googlebot menggunakan sinyal ini untuk crawling.
Konfigurasi URL ponsel menengah yang terpisah
Dalam konfigurasi ini, situs web ditayangkan ke desktop dan smartphone pada satu URL menggunakan desain web responsif atau penayangan dinamis, dan ponsel menengah pada URL yang terpisah. Misalnya:
http://www.example.com/page-1ditayangkan ke pengguna desktop dan smartphonehttp://m.example.com/page-1ditayangkan ke pengguna ponsel menengah
Dalam hal ini, anotasi di http://www.example.com/page-1 adalah tag berikut:
<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />
Anotasi di 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 agar menyertakan header HTTP Vary.
Peta situs
Rekomendasi kami untuk menggunakan peta situs ponsel menengah dan peta situs untuk URL alternatif smartphone tetap sama.