Google ocenia stronę na podstawie jej wersji mobilnej, więc optymalizacja pod smartfony decyduje zarówno o wygodzie użytkownika, jak i o zawartości indeksu. Jak zatem zoptymalizować stronę internetową pod przeglądarki mobilne? Niżej opisujemy wybór między wersją mobilną a responsywną, progi szybkości podawane przez Google, rozmiar elementów dotykowych i układ tekstu oraz ich wpływ na pozycjonowanie strony w wyszukiwarce.
Czym jest mobile SEO
Mobile SEO to zestaw działań, które ułatwiają korzystanie ze strony internetowej na smartfonie i pozwalają Google poprawnie ją odczytać. Obejmuje dostosowanie tekstów, wyglądu, szybkości ładowania i nawigacji tak, żeby poruszanie się po małym ekranie było wygodne. Według dokumentacji Google do indeksowania i ustalania rankingu służy mobilna wersja zawartości. Od 5 lipca 2024 roku Google odwiedza strony wyłącznie robotem Googlebot na smartfony, a materiał, którego w ogóle nie da się otworzyć na telefonie, zgodnie z ogłoszeniem z 3 czerwca 2024 roku przestaje trafiać do wyszukiwarki.
Strona mobilna czy responsywna
Lepszym wyborem dla większości firm jest jeden projekt dopasowany do każdego ekranu, bo Google zaleca ten wzorzec jako najłatwiejszy we wdrożeniu i utrzymaniu. Strony mobilne to oddzielne wersje przygotowane pod telefony, często pod innym adresem URL (na przykład m.domena.pl), dla których dokumentacja Google ma osobną listę dodatkowych zaleceń. Projekt responsywny (Responsive Web Design) ma jeden kod, który automatycznie dopasowuje się do rozmiaru wyświetlacza.
Osobna wersja na telefony daje pełną kontrolę nad tym, co widzi użytkownik smartfona, ale podwaja pracę: każdą zmianę trzeba wprowadzić 2 razy. Google wymaga wtedy, żeby obie odmiany miały identyczny tekst, nagłówki, dane strukturalne i opisy alternatywne obrazów. W projekcie responsywnym te warunki są spełnione z definicji, bo chodzi o pojedynczą stronę pod tym samym adresem. Planowanie układu od najmniejszego ekranu (podejście mobile-first) ułatwia dotrzymanie tych wymagań od początku prac.
Jak właściwie optymalizować strony mobilne
Stronę na smartfony poprawia się w pięciu obszarach: układ, rozmieszczenie linków, czas ładowania, technologia i forma tekstu. Każdy z nich ma mierzalne kryteria w dokumentacji Google albo na web.dev, opisane w kolejnych punktach. Prace te przekładają się na indeksowanie mobile-first, które Google stosuje jako podstawę rankingu. Jeśli na stronie wyświetlasz reklamy, Google odsyła do wytycznych Better Ads Standards. Do kontroli służy Lighthouse w Chrome, bo 1 grudnia 2023 roku Google wycofał z Search Console raport Mobile Usability i narzędzie Mobile-Friendly Test.
Prosty i estetyczny wygląd strony mobilnej
Układ strony na telefonie powinien być prosty: jedna kolumna, menu schowane pod ikoną i główna informacja na pierwszym ekranie. Taka konstrukcja pozwala szybko znaleźć to, czego szukasz, i zmniejsza liczbę przypadkowych kliknięć, co pomaga utrzymać uwagę odwiedzającego. Google zaznacza też, że reklamy u góry mogą zajmować na urządzeniu mobilnym zbyt dużo miejsca, dlatego pierwszy widok zostaw dla treści.
Minimalistyczny projekt z odstępami między elementami poprawia ogólną użyteczność interfejsu. Zadbaj także o kontrast kolorów, który ułatwia lekturę na małym wyświetlaczu, nawet w mocnym słońcu. Kolejną sprawą jest wielkość czcionki: tekst powinien być czytelny bez powiększania palcami. Dokumentacja Google odradza też grafiki zbyt małe albo w niskiej rozdzielczości. Przykład poniżej: strona kancelarii mieści na starcie logo, ikonę menu, nagłówek z zakresem usług i link do kontaktu.
Jak rozmieścić linki na stronie mobilnej
Linki i przyciski na stronie mobilnej powinny mieć co najmniej 48 na 48 pikseli i odstęp rzędu 8 px od sąsiednich elementów. Według web.dev taki kwadrat odpowiada około 9 mm, czyli mniej więcej wielkości opuszka palca. Mniejsze odnośniki, ustawione ciasno obok siebie, prowadzą do kliknięć w niewłaściwe miejsce i frustracji.
Dobre rozmieszczenie odnośników ułatwia też odkrywanie treści i zachęca do dłuższego przeglądania. Stosuj wyraźne wskazówki wizualne (podkreślenie, kolor), które jednoznacznie odróżniają aktywny odsyłacz od zwykłego tekstu. Przemyślane rozplanowanie linków wewnętrznych wpływa na wygodę użytkownika i na strukturę SEO całej strony. Przykład poniżej: telefon, e-mail i profile społecznościowe jako duże okrągłe ikony w nagłówku, a oferta w kafelkach na całą szerokość ekranu.
Czas ładowania strony mobilnej
Strona mobilna powinna pokazać największy element w ciągu 2,5 sekundy, reagować na dotknięcie najpóźniej po 200 milisekundach i nie przesuwać układu bardziej niż o 0,1 w skali CLS. Są to progi Core Web Vitals z web.dev, liczone na 75. percentylu odsłon. Wolne ładowanie zniechęca odbiorców, którzy nie czekają na pełne wczytanie, dlatego kompresja obrazów i ograniczenie kodu JavaScript należą do pierwszych poprawek.
Obrazy i filmy niżej na stronie możesz wczytywać z opóźnieniem (lazy loading), czyli w chwili, gdy pojawią się na ekranie. Google zastrzega jednak, żeby głównej treści nie ładować leniwie dopiero po interakcji użytkownika, bo robot nie klika i nie przewija. Sieć CDN (Content Delivery Network) przyspiesza dostarczanie plików odbiorcom z różnych regionów. Według dokumentacji Google jego systemy korzystają z Core Web Vitals, więc szybkość należy do czynników rankingowych, choć dobry wynik w raporcie nie gwarantuje wysokich pozycji.
Rezygnacja z niedostosowanego oprogramowania
Technologii, których przeglądarki mobilne nie obsługują, trzeba się pozbyć całkowicie, bo zbudowana w nich zawartość po prostu się nie wyświetla. Najbardziej znany przykład to Flash: Adobe zakończył wsparcie Flash Playera 31 grudnia 2020 roku, a od 12 stycznia 2021 roku blokuje uruchamianie treści Flash. Animacja, menu albo galeria w tej technologii są puste na każdym urządzeniu, więc stronę zbudowaną w całości we Flashu trzeba przebudować od podstaw, drobne poprawki nie wystarczą.
Zamiast przestarzałych wtyczek opieraj się na HTML5, CSS3 oraz JavaScript, które działają we wszystkich współczesnych przeglądarkach mobilnych. Sprawdzaj stronę regularnie na kilku sprzętach, na przykład na telefonie z Androidem, na iPhonie i w trybie urządzenia w narzędziach Chrome. Progresywna aplikacja webowa (PWA) może dodatkowo dać funkcje znane z oprogramowania natywnego, bez instalacji ze sklepu.
Właściwie dopasowane treści na stronie mobilnej
Tekst na stronie mobilnej powinien być podzielony na krótkie akapity, nagłówki i listy, bo na wąskim ekranie każdy blok wydłuża się w pionie. Dobra organizacja pomaga utrzymać uwagę i ułatwia nawigację. Na telefonie użytkownik rzadko czyta całe bloki tekstu, zwykle przegląda je w poszukiwaniu konkretnej informacji.
Nagłówki i śródtytuły muszą jasno mówić, o czym jest sekcja, a listy punktowane zwiększają czytelność. Unikaj uciążliwych okien i reklam pełnoekranowych: według Google utrudniają one wyszukiwarkom interpretowanie zawartości, co może obniżać pozycję strony. Dopuszczalne są banery, które nie blokują dostępu do treści, oraz komunikaty wymagane prawem, na przykład weryfikacja wieku. Na zdjęciu poniżej karta produktu sklepu ma opis w krótkich akapitach i cechy w punktach.
Optymalizacja mobilna sprowadza się do kilku sprawdzalnych warunków: projekt responsywny, LCP do 2,5 sekundy, INP do 200 milisekund, CLS do 0,1, elementy dotykowe 48 na 48 pikseli, ta sama zawartość co na komputerze i brak technologii, których telefon nie uruchomi. Jest to proces ciągły, więc po każdej większej zmianie kontroluj te wartości w Lighthouse i w raporcie Core Web Vitals w Search Console.
