SEO witryn mobilnych na urządzenia innego typu

Tablety

Podczas przygotowywania witryny dla użytkowników urządzeń mobilnych webmasterzy powinni pamiętać o osobach, które będą przeglądać ich witrynę na tablecie. Nie mamy specjalnych zaleceń z zakresu tworzenia witryn przyjaznych dla wyszukiwarek i zoptymalizowanych pod kątem tabletów, ale zawarliśmy tu kilka wskazówek przydatnych podczas tworzenia stron na komputery, smartfony i tablety.

Elastyczne projektowanie witryn

Zalecamy projektowanie stron elastycznych. Witryny elastyczne przekazują ten sam kod HTML wszystkim urządzeniom i nakładają odmienne style CSS, które pozwalają im dostosować ich interfejs do przeglądarki na komputerze, smartfonie lub tablecie.

Jeśli Twoja witryna jest zaprojektowana w sposób elastyczny, przetestuj ją na różnych tabletach, by mieć pewność, że wszystko dobrze się wyświetla. Ekrany tabletów mają przecież różne rozmiary i rozdzielczości (jak w przypadku smartfonów).

Treści dostosowane do typu urządzenia

Witryna może pokazywać różne strony na różnych urządzeniach (inny kod HTML, CSS, JavaScript itd.). Adresy URL tych stron mogą być takie same (dynamiczne wyświetlanie stron) lub różne (inny adres URL dla każdej strony).

Może się zdarzyć, że Twoja witryna będzie wyświetlać inne strony na komputerach, a inne na smartfonach, jednak nie będzie mieć stron przygotowanych specjalnie na tablety. Wiemy z doświadczenia, że w takiej sytuacji użytkownicy tabletów wolą przeglądać witryny w wersji na komputery.

Jeśli witryna ma strony zoptymalizowane pod kątem tabletów, skorzystaj z tych praktycznych wskazówek:

  • Dynamiczne wyświetlanie treści: strony w wersji na komputery, smartfony i tablety mają wspólny adres URL, ale kod HTML (i CSS) różni się w zależności od wykrytego klienta. Zgodnie z naszymi zaleceniami dotyczącymi witryn na smartfony zdecydowanie zalecamy używanie nagłówka HTTP Vary.
  • Oddzielne adresy URL dla tabletów: w tym przypadku zdecydowanie zalecamy, by zezwolić Googlebotowi na zindeksowanie adresów URL dla tabletów, a także użyć tagu rel="canonical" w każdym tabletowym adresie URL, by wskazać powiązany adres URL w wersji na komputery.

Telefony z podstawową przeglądarką

Twórcom witryn przeznaczonych dla użytkowników smartfonów zalecamy projektowanie stron elastycznych (jeśli to możliwe). Ponieważ jednak telefony z podstawową przeglądarką nie obsługują definicji „media” w CSS, webmasterzy, którzy chcą skonfigurować swoje witryny na potrzeby tych urządzeń, muszą zastosować technikę dynamicznego wyświetlania treści lub udostępniać odpowiednie treści pod osobnym adresem URL.

Zalecamy też, by wszystkie strony na telefony z podstawową przeglądarką zawierały tag <link rel="alternate" media="handheld"> zgodnie z poniższym opisem.

W tej części opisujemy sposoby wdrożenia każdej z tych konfiguracji.

Dynamiczne wyświetlanie treści

Sposób konfiguracji serwera, który z tego samego adresu URL ma dynamicznie przesyłać treści zoptymalizowane pod kątem telefonów z internetem oraz innych urządzeń, jest taki sam jak w przypadku smartfonów. Skonfiguruj serwer tak, by w odpowiedzi wysyłał nagłówek HTTP Vary: User-Agent. Oprócz tego zapoznaj się z najczęstszymi problemami z wykrywaniem klientów użytkownika. Dodatkowo na stronie umieść następujący tag:

<link rel="alternate" media="handheld" href="[current page URL]" />

Osobne adresy URL

Webmasterzy, którzy udostępniają różne adresy URL dla użytkowników komputerów, smartfonów i telefonów z podstawową przeglądarką, mogą użyć jednej z trzech obsługiwanych konfiguracji. Konfiguracje te opierają się na adnotacjach, które opisaliśmy wcześniej w sekcji na temat tworzenia witryn zoptymalizowanych pod kątem telefonów z podstawową przeglądarką i smartfonów.

Konfiguracja ze specjalnymi adresami URL

Konfiguracja wygląda tak:

  • http://www.example.com/page-1 dla użytkowników komputerów,
  • http://m.example.com/page-1 dla użytkowników smartfonów,
  • http://phone.example.com/page-1 dla użytkowników innych telefonów z podstawową przeglądarką.

Zalecamy, by w przypadku takiej konfiguracji dodać następujące adnotacje, dzięki którym nasze algorytmy będą mogły rozpoznać relacje między równoważnymi stronami na poszczególne urządzenia:

Do strony www.example.com/page-1 dodaj:

<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" />

Do strony m.example.com/page-1 dodaj:

<link rel="canonical" href="http://www.example.com/page-1" />

Do strony phone.example.com/page-1 dodaj:

<link rel="canonical" href="http://www.example.com/page-1" />

Konfiguracja adresów URL na komputery i wszystkie urządzenia mobilne

W tej konfiguracji witryna z jednego adresu URL udostępnia treści na komputery, a z innego na wszystkie urządzenia mobilne, tzn. smartfony i telefony z podstawową przeglądarką. Na przykład:

  • http://www.example.com/page-1 dla użytkowników komputerów,
  • http://m.example.com/page-1 dla użytkowników smartfonów i innych telefonów z podstawową przeglądarką.

Adnotacja na http://www.example.com/page-1:

<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" />

Do strony m.example.com dodaj:

<link rel="canonical" href="http://www.example.com/page-1" />

Tag rel="canonical" trzeba dodać niezależnie od tego, czy strony są przeznaczone na telefony z podstawową przeglądarką czy smartfony.

Serwer w odpowiedzi powinien wysyłać nagłówek HTTP Vary: User-Agent. To informacja dla internetowych pamięci podręcznych i Googlebota, że odpowiedź serwera może być różna w zależności od klienta użytkownika. Googlebot uwzględnia ją podczas indeksowania.

Konfiguracja osobnych adresów URL na telefony z podstawową przeglądarką

W tej konfiguracji witryna udostępnia treści na komputery i smartfony z jednego adresu URL (dzięki zastosowaniu technik projektowania elastycznego lub dynamicznego wyświetlania treści), a na telefony z internetem z innego adresu URL. Na przykład:

  • http://www.example.com/page-1 dla użytkowników desktopów i smartfonów,
  • http://m.example.com/page-1 dla użytkowników innych telefonów z podstawową przeglądarką.

Adnotacja na http://www.example.com/page-1:

<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />

Adnotacja na http://m.example.com/page-1:

<link rel="canonical" href="http://www.example.com/page-1" />

Przekierowania i nagłówek HTTP Vary

Jeśli użytkownicy urządzeń mobilnych są w witrynie automatycznie przekierowywani ze strony w wersji komputerowej do wersji mobilnej lub odwrotnie, musisz skonfigurować serwer tak, by dołączał nagłówek HTTP Vary.

Mapy witryn

Nasze zalecenia na temat używania map witryn dla telefonów z podstawową przeglądarką i map witryn odnoszących się do osobnych adresów URL dla smartfonów pozostają bez zmian.