Tablet
Saat memikirkan tentang cara mengonfigurasi situs web Anda untuk pengguna seluler, biasanya terpikirkan pula tentang pengunjung yang menggunakan perangkat tablet untuk mengakses situs Anda. Meskipun kami tidak memiliki saran khusus untuk membuat situs yang dioptimalkan bagi tablet dan sesuai untuk mesin telusur, ada beberapa tips untuk membuat situs web yang cocok bagi pengguna desktop, smartphone, dan tablet.
Desain Web Responsif
Saran umum dari kami adalah menggunakan desain web responsif. Artinya, situs web Anda menyajikan 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, seperti smartphone, tablet memiliki berbagai ukuran dan resolusi layar.
Konten khusus perangkat
Situs web dapat menampilkan halaman yang berbeda (HTML, CSS, JavaScript yang berbeda, dsb.) untuk perangkat yang berbeda. 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 untuk smartphone.
Jika situs web Anda memiliki situs yang dioptimalkan untuk tablet, pedoman ini dapat membantu Anda mengonfigurasi situs:
- Penayangan dinamis: Berikut adalah URL sama yang melayani pengguna desktop, smartphone, dan tablet dengan menayangkan HTML (dan CSS) yang berbeda, tergantung 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" di setiap URL tablet untuk mengarahkan ke URL desktop yang setara.
Ponsel menengah
Sebisa mungkin gunakan desain web responsif jika situs ditayangkan untuk pengguna smartphone. Namun, karena ponsel menengah tidak memiliki kemampuan untuk mengikuti kueri media CSS, webmaster yang ingin melayani pengguna ponsel menengah perlu mengonfigurasi situs agar menggunakan penayangan dinamis atau URL terpisah yang menayangkan konten ponsel menengah.
Kami juga menyarankan agar semua halaman yang ditujukan untuk mendukung ponsel menengah menyertakan
tag <link rel="alternate" media="handheld"> seperti dijelaskan di bawah.
Bagian ini menunjukkan cara menerapkan masing-masing 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 perlu menyertakan header tanggapan 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 menayangkan URL yang berbeda ke, pengguna desktop, smartphone, dan ponsel menengah. Konfigurasi ini menggunakan anotasi, yang sebelumnya telah kami jelaskan, untuk membuat situs yang dioptimalkan untuk ponsel menengah dan smartphone.
Konfigurasi URL khusus
Dalam konfigurasi ini, pengaturannya seperti berikut:
http://www.example.com/page-1ditayangkan ke pengguna 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, sebuah situs web akan menayangkan ke perangkat desktop pada satu URL, dan semua perangkat seluler, yaitu smartphone dan ponsel menengah, pada URL yang terpisah. Misalnya:
http://www.example.com/page-1ditayangkan ke pengguna desktophttp://m.example.com/page-1ditayangkan ke pengguna smartphone dan ponsel menengah
Dalam hal ini, anotasi pada http://www.example.com/page-1 adalah:
<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:
<link rel="canonical" href="http://www.example.com/page-1" />
rel="canonical" ini perlu disertakan terlepas dari apakah halaman tersebut untuk ponsel menengah atau untuk smartphone.
Server perlu menyertakan header HTTP Vary: User-Agent dalam tanggapannya. Header ini mengirimkan sinyal ke cache internet dan Googlebot bahwa tanggapan server dapat berbeda, tergantung pada agen pengguna. Googlebot seluler akan menggunakan sinyal ini untuk merayapi.
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 pada http://www.example.com/page-1 adalah:
<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />
Dan pada http://m.example.com/page-1 adalah:
<link rel="canonical" href="http://www.example.com/page-1" />
Pengalihan dan Header Vary HTTP
Harap diperhatikan, 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
Saran kami tetap sama untuk menggunakan peta situs ponsel menengah dan peta situs untuk URL alternatif smartphone.