Tablety i telefony z podstawową przeglądarką

Tablety

Podczas przygotowywania witryny dla użytkowników urządzeń mobilnych należy pamiętać o osobach, które będą przeglądać ją na tablecie. Nie mamy specjalnych zaleceń dotyczących 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 korzystanie z elastycznego projektowania witryn. 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, aby mieć pewność, że wszystko dobrze się wyświetla. Ekrany tabletów mają przecież różne rozmiary i rozdzielczości (zupełnie 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 treści) lub różne (osobny 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 użytkownika. Zgodnie z naszymi zaleceniami dotyczącymi witryn na smartfony zdecydowanie zalecamy używanie nagłówka HTTP Vary.
  • Osobne adresy URL dla tabletów: w tym przypadku zdecydowanie zalecamy, aby zezwolić Googlebotowi na zindeksowanie adresów URL tabletów, a także użyć tagu rel="canonical" w każdym adresie URL na tablety, żeby 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 elastyczne projektowanie witryn (jeśli to możliwe). Ponieważ jednak telefony z podstawową przeglądarką nie obsługują definicji „media” w CSS, właściciele witryn, 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ż, aby wszystkie strony na telefony z podstawową przeglądarką zawierały tag <link rel="alternate" media="handheld">.

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 podstawową przeglądarką oraz innych urządzeń, jest taki sam jak w przypadku smartfonów. Skonfiguruj serwer tak, aby uwzględniał nagłówek odpowiedzi HTTP Vary: User-Agent. Oprócz tego zapoznaj się z najczęstszymi problemami z wykrywaniem klientów użytkownika. Na stronie umieść też ten tag:

<link rel="alternate" media="handheld" href="URL for the current page" />

Osobne adresy URL

W przypadku udostępniania różnych adresów URL dla użytkowników komputerów, smartfonów i telefonów z podstawową przeglądarką można użyć jednej z 3 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, aby 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 komórki

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 jest dla użytkowników komputerów,
  • http://m.example.com/page-1 jest 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 na 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 elastycznego projektowania witryn lub dynamicznego wyświetlania treści), a na telefony z podstawową przeglądarką – z innego adresu URL. Na przykład:

  • http://www.example.com/page-1 jest dla użytkowników komputerów i smartfonów,
  • http://m.example.com/page-1 jest 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, aby 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.