Beranda Panduan Referensi Fitur Bantuan

SEO seluler untuk perangkat lainnya

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-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 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-1 ditayangkan ke pengguna desktop
  • http://m.example.com/page-1 ditayangkan 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-1 ditayangkan ke pengguna desktop dan smartphone
  • http://m.example.com/page-1 ditayangkan 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.