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 witryna 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 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 internetem

Twórcom witryn przeznaczonych dla użytkowników smartfonów zalecamy projektowanie stron elastycznych (jeśli to możliwe). Ponieważ jednak telefony z internetem 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 zaproponować osobne adresy URL dla telefonów z internetem.

Zalecamy też, by wszystkie strony na telefony z internetem 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 proponują różne adresy URL dla użytkowników komputerów, smartfonów i telefonów z internetem, 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 internetem 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 internetem.

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 komórki

W tej konfiguracji witryna z jednego adresu URL udostępnia treści na komputery, a z innego na wszystkie komórki, tzn. smartfony i telefony z internetem. 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 internetem.

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 zwykłe telefony z internetem 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 internetem

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 internetem.

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 dla telefonów z internetem i map witryn odnoszących się do osobnych adresów URL dla smartfonów pozostają bez zmian.

Wyślij opinię na temat...