Dopasuj stronę do ekranu telefonu
Opis
To kryterium sprawdza, czy strona wyświetla się poprawnie na telefonie. iPand wczytuje ją na symulowanym telefonie Pixel 7 o szerokości 412 px i sprawdza cztery rzeczy: metatag viewport deklaruje width=device-width i nie blokuje powiększania, strona nie wychodzi poza szerokość ekranu, co najmniej 60% widocznego tekstu ma rozmiar 12 px lub większy, a układ strony prawie się nie przesuwa podczas ładowania (CLS najwyżej 0,1).
Dlaczego to ważne dla AI
Google indeksuje mobilną wersję twoich stron, którą odwiedza jego robot dla smartfonów, a AI Overviews i AI Mode korzystają z tego indeksu. Google zalicza też dostosowanie do urządzeń mobilnych do elementów dobrego doświadczenia na stronie (page experience), które zaleca z myślą o swoich funkcjach AI.
- Bez metatagu viewport telefon pokazuje stronę jak pomniejszony ekran komputera: drobny tekst i konieczność powiększania.
- Blokada powiększania (user-scalable=no) nie pozwala czytać strony osobom słabowidzącym; wytyczne dostępności WCAG wymagają możliwości co najmniej dwukrotnego powiększenia.
- Treść, która przesuwa się podczas ładowania, sprawia, że klika się nie tam, gdzie trzeba: CLS mierzy te przesunięcia, a web.dev uznaje wynik do 0,1 za dobry.
Jak to poprawić
- 1 Zadeklaruj obszar wyświetlania Umieść w sekcji <head> strony tag <meta name="viewport" content="width=device-width, initial-scale=1">. Nie dodawaj user-scalable=no ani maximum-scale mniejszego niż 2: twoi odwiedzający muszą móc powiększać stronę. Ten punkt waży w kryterium najwięcej.
- 2 Usuń przewijanie w poziomie Strona nie może być szersza niż ekran, który w iPand ma 412 px. Poszukaj elementów o stałej szerokości: obrazów, tabel, osadzonych filmów, bloków o wymiarach podanych w pikselach. Nadaj obrazom max-width: 100% i zamiast stałych szerokości wybieraj elastyczne układy (Flexbox, Grid).
- 3 Powiększ tekst Co najmniej 60% widocznego tekstu musi mieć rozmiar 12 px lub większy. Tekst główny utrzymuj w rozmiarze zbliżonym do 16 px, czyli domyślnego rozmiaru przeglądarek. Sprawdź też informacje prawne, menu i stopki, często pisane zbyt małą czcionką.
- 4 Zarezerwuj miejsce na obrazy i osadzone elementy CLS nie może przekraczać 0,1. Podaj width i height dla obrazów i filmów, zarezerwuj wysokość banerów, reklam i widżetów przed ich załadowaniem i nie wstawiaj treści nad tym, co jest już wyświetlone.
Do zapamiętania
Google czyta mobilną wersję twojej strony. Zadeklaruj obszar wyświetlania bez blokowania powiększania, unikaj przewijania w poziomie i dbaj o czytelny tekst oraz stabilny układ.
