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 desktophttp://m.example.com/page-1
ditayangkan ke pengguna smartphonehttp://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 desktophttp://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 smartphonehttp://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.