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

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.

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.