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 istnieją pewne wskazówki przydatne 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 strona jest zaprojektowana w sposób elastyczny (czyli responsywny), 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 na tablety: w tym przypadku zdecydowanie zalecamy, by zezwolić Googlebotowi na zindeksowanie adresów URL na tablety, 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ą (inne niż smartfony)

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

Zalecamy też, by wszystkie strony na telefony z przeglądarką starszego typu 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 podstawową przeglądarką 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 proponują 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 dostępnych 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 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, tj. 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 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 technik projektowania elastycznego 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 dla użytkowników komputerów i smartfonów,
  • http://m.example.com/page-1 dla użytkowników 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

Pamiętaj, że jeśli użytkownicy komórek 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 na telefony z podstawową przeglądarką i map witryn odnoszących się do osobnych adresów URL na smartfony pozostają bez zmian.

Wyślij opinię na temat...