Najpierw mobile i viewport

Moduł 4: Szybkość, urządzenia mobilne i https · Czas czytania: 10 minut

Cel lekcji: Po tej lekcji będą Państwo potrafili wyjaśnić, co oznacza mobile-first indexing, rozpoznać i napisać poprawne ustawienie viewport oraz uniknąć pułapek, przez które strona mobilna pokazuje mniej lub działa gorzej niż wersja na komputer.

Kluczowe pojęcia: mobile-first indexing, robot indeksujący dla smartfonów, projekt responsywny (responsive), dynamic serving, oddzielna witryna mobilna, <meta name="viewport">, width=device-width, initial-scale, blokowanie powiększania, ta sama treść, natarczywe wyskakujące okna (interstitials), elementy dotykowe

Google patrzy przez telefon

Przez długi czas Google oglądał stronę internetową tak jak komputer. To już przeszłość. Do indeksowania i ustalania pozycji Google używa wersji mobilnej Państwa stron i pobiera ją za pomocą robota Googlebot dla smartfonów. Nazywa się to mobile-first indexing. W październiku 2023 roku Google napisał, że przejście zostało zakończone: dla niemal wszystkich witryn jest to teraz po prostu "indeksowanie". Od lipca 2024 roku Google odwiedza robotem mobilnym także ostatnie witryny, które wcześniej były odwiedzane robotem dla komputerów; to, czego w ogóle nie da się otworzyć na telefonie, nie może już zostać zaindeksowane.

Co to oznacza w praktyce? To, czego nie ma na Państwa stronie mobilnej, dla Google nie istnieje. Jeśli na telefonie pominą Państwo fragment tekstu, tabelę, godziny otwarcia lub dane strukturalne "bo ekran jest mały", Google również tego fragmentu nie zobaczy.

Trzy sposoby budowania wersji mobilnej

Nowoczesne kreatory stron i motywy WordPress są niemal wszystkie responsywne. Strona zbudowana w AI Builder również jest responsywna: jedna strona, która się dopasowuje. Jeśli mają Państwo starą witrynę z oddzielną wersją m., przejście na projekt responsywny jest często największym usprawnieniem, jakie mogą Państwo wprowadzić.

Viewport: wiersz, dzięki któremu wszystko działa

Przeglądarka w telefonie sama z siebie nie wie, że Państwa strona jest przygotowana na mały ekran. Bez instrukcji zachowuje się tak, jakby ekran był znacznie szerszy, na przykład 980 pikseli (przykład podawany w dokumentacji MDN), i pomniejsza całą stronę, aż zmieści się na ekranie. Efekt: maleńki tekst, który trzeba powiększać. Nawet projekt responsywny wtedy nie działa, bo CSS „myśli”, że ekran jest szeroki.

Rozwiązaniem jest jeden wiersz w sekcji <head> każdej strony:

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

• width=device-width oznacza: ustaw szerokość strony równą szerokości ekranu urządzenia. Wtedy CSS może korzystać z szerokości ekranu.
• initial-scale=1 oznacza: zacznij bez powiększania i pomniejszania.

To dokładnie ten wiersz, który zaleca Lighthouse (narzędzie kontroli w Chrome i PageSpeed Insights). Lighthouse oznacza stronę jako niezgodną, jeśli brakuje wiersza viewport lub nie zawiera on width=.

Czego lepiej nie robić

Niektóre witryny dodają więcej:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

W ten sposób odwiedzający nie może już powiększać strony. Wygląda to schludnie („układ się nie rozsypuje”), ale dla osoby słabowidzącej jest to bariera. Wytyczne dostępności WCAG 2.2 w kryterium sukcesu 1.4.4 (Zmiana rozmiaru tekstu, poziom AA) wymagają, aby tekst można było powiększyć do 200 procent bez utraty treści lub funkcji. Oficjalna reguła testowa W3C, "Meta viewport allows for zoom", odrzuca viewport z user-scalable=no lub z maximum-scale mniejszym niż 2. Prosimy więc pominąć te elementy. (Safari na iPhonie obecnie domyślnie je ignoruje, ale inne przeglądarki nie.)

Błędem jest też stała szerokość, na przykład width=1024. Wtedy telefon znów zachowuje się tak, jakby ekran miał 1.024 piksele szerokości, a projekt responsywny staje się bezużyteczny.

Ta sama treść na urządzeniach mobilnych i komputerach

W dokumentacji dotyczącej mobile-first indexing Google wymienia kilka elementów, które muszą być takie same w obu wersjach. W witrynie responsywnej dzieje się to samo, przy dynamic serving i oddzielnej witrynie mobilnej trzeba to sprawdzić:

• Sama treść. Tekst na urządzeniach mobilnych może znajdować się w rozwijanym bloku lub karcie, ale musi być w kodzie strony.
• Tytuł i metaopis (lekcja 3.1) muszą być równoważne.
• Dane strukturalne (moduł 5) muszą znajdować się w obu wersjach.
• Obrazy z tymi samymi tekstami alternatywnymi (alt) i w dobrej jakości.
• Brak treści ładowanej dopiero po działaniu użytkownika. Google pisze to wprost: nie należy ładować głównej treści dopiero wtedy, gdy odwiedzający przesunie palcem, kliknie lub coś wpisze; Googlebot tego nie robi.
• robots.txt nie może blokować stron mobilnych ani ich plików CSS, JavaScript i obrazów. Bez CSS Google nie widzi, jak strona wygląda.

Wygodnie na małym ekranie

Kilka punktów, które Google wymienia jako pytania dotyczące dobrego doświadczenia na stronie i które mogą Państwo sprawdzić na własnym telefonie:

• Czytelny tekst bez powiększania.
• Elementy dotykowe (przyciski, linki w menu) wystarczająco duże i nie za blisko siebie, aby nie dotknąć przypadkiem niewłaściwego.
• Brak natarczywych wyskakujących okien. Google pisze, że elementy zasłaniające treść (okno newslettera na całą stronę zaraz po wejściu) irytują odwiedzających i podważają zaufanie, a także utrudniają wyszukiwarkom zrozumienie Państwa treści. Lepiej użyć małego paska. Okna wymagane prawem, na przykład weryfikacja wieku, nie podlegają tej wytycznej.
• Brak przewijania w poziomie: zbyt szeroki obraz lub tabela przesuwa całą stronę na bok. Prosimy nadać tabelom własny pasek przewijania.

Pod koniec 2023 roku Google wycofał osobny test "Mobile-Friendly Test" oraz raport Mobile Usability w Search Console. Obecnie sprawdzają to Państwo na własnym telefonie, w widoku mobilnym narzędzi deweloperskich przeglądarki oraz za pomocą Lighthouse lub PageSpeed Insights (lekcja 4.3).

W praktyce: proszę sprawdzić samodzielnie

Prosimy otworzyć swoją witrynę w Chrome lub Firefox na komputerze, nacisnąć F12 i kliknąć ikonę telefonu i tabletu (pasek narzędzi urządzeń). Prosimy wybrać wąskie urządzenie i przejrzeć najważniejsze strony. Warto zwrócić uwagę na tekst wychodzący poza ekran, nachodzące na siebie przyciski i fragmenty, których brakuje w wersji mobilnej. Następnie prosimy sprawdzić w kodzie źródłowym (Ctrl+U), czy wiersz viewport jest obecny.

AI Builder sam umieszcza wiersz viewport width=device-width, initial-scale=1 na każdej stronie. Motywy WordPress robią to również, podobnie jak większość innych kreatorów stron. W przypadku samodzielnie zbudowanej lub starej witryny warto to sprawdzić: to tylko jeden wiersz, ale bez niego żaden element projektu mobilnego nie działa.

Podsumowanie

• Google indeksuje i ustala pozycję na podstawie mobilnej wersji Państwa stron; tego, czego tam brakuje, Google nie widzi.
• Projekt responsywny jest zalecanym sposobem: jeden adres, jeden HTML.
• Każda strona potrzebuje <meta name="viewport" content="width=device-width, initial-scale=1">.
• Prosimy nie blokować powiększania: bez user-scalable=no i bez maximum-scale poniżej 2 (WCAG 1.4.4).
• Treść, tytuł, metaopis i dane strukturalne powinny być takie same na urządzeniach mobilnych i komputerach; należy unikać wyskakujących okien zasłaniających stronę.

Quiz

Zadanie

Zadanie A4.2: Czy Państwa strona ma prawidłowy viewport? Prosimy wpisać adres strony (na przykład strony głównej). Program odczytuje HTML i sprawdza, czy w sekcji <head> znajduje się dokładnie jeden <meta name="viewport"> z width=device-width oraz czy powiększanie nie jest zablokowane (user-scalable=no lub maximum-scale poniżej 2). Następnie prosimy samodzielnie obejrzeć tę samą stronę w widoku mobilnym przeglądarki. Nie mają Państwo własnej witryny? Prosimy użyć www.wikipedia.org.

Więcej informacji

• Google Search Central, Mobile-first indexing best practices: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Avoid intrusive interstitials and dialogs: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, reguła ACT Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, metatag viewport: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
• Czy moja strona internetowa dobrze wygląda na telefonie?