Elastyczne projektowanie witryn

Elastyczne projektowanie witryn to konfiguracja, w której serwer zawsze wysyła taki sam kod HTML do wszystkich urządzeń, a strona odpowiednio wyświetla się na urządzeniu na podstawie zapytań o CSS. Jeśli wszystkie klienty użytkownika Googlebota mają możliwość indeksowania zasobów strony (CSS, JavaScriptu i obrazów), nasze algorytmy powinny automatycznie wykryć tę konfigurację.

Graficzne przedstawienie działania elastycznego projektowania stron
Elastyczne projektowanie stron umożliwia dostarczanie różnym urządzeniom tego samego kodu określającego rozmiar ekranu.

TL;DR

  • Użyj tagu meta name="viewport", by poinformować przeglądarkę o tym, jak dostosować treść.
  • Więcej informacji znajdziesz na stronie Podstawy tworzenia witryn.

Stosowanie metatagu meta name="viewport"

Aby pokazać przeglądarkom, że Twoja strona dostosowuje się do różnych urządzeń, w nagłówku dokumentu dopisz ten metatag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Metatag viewport wskazuje przeglądarkom, jak dostosować rozmiar i skalowanie strony do szerokości ekranu urządzenia. Jeśli brakuje metatagu viewport, przeglądarki mobilne będą domyślnie renderować stronę na szerokość ekranu komputera (z reguły ok. 980 pikseli, ale ten rozmiar różni się w zależności od urządzenia). Następnie przeglądarki mobilne poprawiają wygląd tekstu, zwiększając rozmiar czcionki lub dopasowując zawartość strony w taki sposób, by na ekranie mieściła się cała treść lub jej odpowiedni fragment.

Dla użytkowników oznacza to, że rozmiary czcionek mogą być niespójne, a poruszanie się po treści lub jej czytanie wymaga dwukrotnego dotknięcia lub powiększenia fragmentu poprzez rozsunięcie palców. Jeśli na urządzeniach mobilnych trzeba korzystać z witryny w ten sposób, możemy uznać, że nie jest do nich dostosowana.

Strona po lewej nie ma określonego metatagu viewport, dlatego przeglądarka wyświetli ją w szerokości typowej dla komputerów i przeskaluje ją tak, by mieściła się na ekranie, przez co treść będzie mało czytelna. Ta sama strona po prawej ma widoczny obszar dopasowany do szerokości urządzenia (określony tagiem viewport) – przeglądarka mobilna nie musi niczego skalować, a treść strony jest łatwo czytelna.

W przypadku obrazów elastycznych stosuj element <picture>.

Ogólna zasada jest taka: jeśli witryna działa w nowoczesnej przeglądarce (np. Google Chrome czy mobilnej wersji Apple Safari), będzie też działać z naszymi algorytmami.

Co daje elastyczne projektowanie stron

Elastyczne projektowanie witryn, które zalecamy, ma wiele zalet:

  • Użycie pojedynczego adresu URL z wybraną treścią ułatwia użytkownikom jej udostępnianie i tworzenie do niej linków.
  • Algorytmy Google precyzyjnie przypisują stronie właściwości związane z indeksowaniem, zamiast sygnalizować istnienie strony mobilnej i strony w wersji na komputery.
  • Poświęcasz mniej czasu na dbanie o kilka stron, które mają taką samą treść.
  • Rzadziej zdarzają się typowe błędy spotykane na witrynach mobilnych.
  • Nie trzeba przekierowywać użytkowników, by pokazać im stronę zoptymalizowaną pod kątem odpowiedniego urządzenia, co skraca czas jej ładowania. Przekierowywanie na podstawie klienta użytkownika jest podatne na błędy i może obniżyć komfort użytkowników witryny (szczegóły znajdziesz w sekcji Problemy z wykrywaniem klientów).
  • Strona elastyczna (responsywna) oszczędza zasoby robotów Google. Strony elastyczne muszą zostać zindeksowane przez Googlebota tylko raz, niezależnie od klienta użytkownika. W przypadku innych rozwiązań Googlebot indeksuje je wielokrotnie dla różnych klientów, by odczytać wszystkie wersje treści strony. Ten wzrost wydajności indeksowania witryny pośrednio pozwala nam indeksować więcej znajdujących się w niej treści, dzięki czemu są one bardziej aktualne.

Jeśli potrzebujesz dodatkowej pomocy związanej z elastycznym projektowaniem witryn, w pierwszej kolejności przeczytaj naszego posta na blogu Centrum wyszukiwarki Google i artykuły na stronie Podstawy tworzenia witryn.

JavaScript

Podczas tworzenia witryn przyjaznych dla urządzeń mobilnych trzeba dokładnie przemyśleć zastosowanie JavaScriptu do zmiany sposobu działania witryny i jej wyświetlania na różnych urządzeniach. JavaScript często stosuje się np. przy wyborze reklamy lub rozdzielczości obrazu, który zostanie wyświetlony na stronie.

W tej sekcji opisujemy różne sposoby wykorzystania JavaScriptu, odnosząc je do naszego zalecenia elastycznego projektowania stron.

Typowe konfiguracje

Trzy najczęstsze zastosowania JavaScriptu w witrynach zoptymalizowanych pod kątem smartfonów to:

  • JavaScript adaptacyjny: w tej konfiguracji wszystkie urządzenia otrzymują te same treści HTML, CSS i JavaScript. Sposób działania lub wyświetlania strony zmienia się odpowiednio podczas wykonywania JavaScriptu na urządzeniu. Jeśli witryna wymaga JavaScriptu, Google zaleca tę konfigurację.
  • Wykrywanie łączone: witryna korzysta z JavaScriptu po stronie klienta i technik wykrywania po stronie serwera, by określić możliwości urządzenia. Na tej podstawie przesyła odpowiednie treści.
  • JavaScript wysyłany dynamicznie: wszystkie urządzenia otrzymują taki sam kod HTML, ale JavaScript jest przesyłany z adresu URL. Kod JavaScript jest dobierany dynamicznie w zależności od klienta użytkownika.

Poniżej znajdziesz szczegółowe informacje o tych konfiguracjach.

JavaScript adaptacyjny

W tej konfiguracji adres URL wskazuje tę samą zawartość strony (HTML, CSS, JavaScript, obrazy) wszystkim urządzeniom. Dopiero po wykonaniu JavaScriptu na urządzeniu sposób działania i wyświetlania strony odpowiednio się zmienia. To rozwiązanie przypomina elastyczne projektowanie witryn z zapytaniami o multimedia CSS.

Powiedzmy, że wszystkie urządzenia otrzymują ze strony jednakowy kod HTML z elementem <script> odwołującym się do zewnętrznego adresu URL, z którego przesyłany jest JavaScript. Z tego adresu każde urządzenie pobiera taki sam kod JavaScript. W trakcie wykonywania JavaScript wykrywa typ urządzenia i na tej podstawie może coś zmienić na stronie, np. umieścić obraz czy dodać kod zoptymalizowany pod kątem smartfonów, a nie wersji komputerowej.

Ta konfiguracja jest bardzo zbliżona do elastycznego projektowania stron i nasze algorytmy wykrywają ją automatycznie. Poza tym nie wymaga ona nagłówka HTTP Vary, bo zawartość i zasoby strony nie są dynamicznie przekazywane z odpowiednich adresów URL. Ze względu na te zalety zalecamy to rozwiązanie, jeśli witryna wymaga użycia JavaScriptu.

Wykrywanie łączone

Wykrywanie łączone polega na współpracy serwera z JavaScriptem po stronie klienta, by określić możliwości urządzenia i odpowiednio zmienić wyświetlane treści.

Na przykład witryna może zmienić sposób renderowania treści w zależności od tego, czy urządzeniem jest komputer czy smartfon. W tym przypadku witryna może zawierać JavaScript, który sprawdza wymiary ekranu i przekazuje tę informację do serwera. Na tej podstawie serwer aktualizuje lub zmienia kod przesyłany do urządzenia. JavaScript zwykle zapisuje wykryte możliwości urządzenia w pliku cookie, który zostanie odczytany przez serwer, gdy użytkownik urządzenia znowu odwiedzi tę stronę.

Ponieważ serwer wysyła różny kod HTML w zależności od klienta użytkownika, wykrywanie łączone jest uważane za rodzaj konfiguracji dynamicznego serwowania treści. Szczegółowe informacje na ten temat znajdziesz w sekcji na temat dynamicznego przesyłania treści. W skrócie: chodzi o to, by po otwarciu strony, której kod HTML różni się w zależności od klienta użytkownika, witryna wysłała w odpowiedzi nagłówek HTTP „Vary: User-Agent”.

JavaScript przesyłany dynamicznie

W tej konfiguracji wszystkie urządzenia otrzymują taki sam kod HTML z elementem <script> odwołującym się do zewnętrznego pliku JavaScript, którego zawartość różni się w zależności od klienta użytkownika. Oznacza to, że JavaScript jest przesyłany dynamicznie.

W tym przypadku zalecamy, by plik JavaScript wysyłać razem z nagłówkiem HTTP „Vary: User-Agent”. Jest to sygnał dla internetowych pamięci podręcznych i Googlebota, że JavaScript może zmieniać się w zależności od klienta. Googlebot indeksuje wtedy plik JavaScript, korzystając z różnych klientów użytkownika.