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 pada saran kami untuk situs smartphone, sebaiknya Anda menggunakan header HTTP Vary.
  • URL khusus tablet yang terpisah: Dalam hal ini, sebaiknya Anda mengizinkan Googlebot melakukan crawling 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 menayangkan pada 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 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="[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 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 semua perangkat seluler (dengan kata lain, smartphone maupun ponsel menengah) pada URL yang terpisah. Misalnya:

  • 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 pada cache Internet dan Googlebot bahwa respons server mungkin berbeda bergantung pada agen penggunanya. Googlebot menggunakan sinyal ini untuk 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 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 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 agar menyertakan header HTTP Vary.

Peta situs

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