Audyt mobilny SEO checklista to praktyczny poradnik, który pomoże Ci sprawdzić, czy Twoja witryna jest prawidłowo dostosowana do urządzeń mobilnych. Dowiesz się z niego, jak krok po kroku zweryfikować responsywność, szybkość ładowania oraz ewentualne problemy z indeksacją. Wszystkie te elementy mają bezpośredni wpływ na Twoje pozycje w wyszukiwarce i ostateczne wskaźniki konwersji.
Jak sprawdzić indeksowanie mobilne w Google
Zanim przystąpisz do przeprowadzenia audytu SEO, musisz mieć pewność, że roboty Google prawidłowo widzą Twoją wersję mobilną. To absolutna podstawa, od której należy rozpocząć każdą dogłębną analizę techniczną. Odpowiednie narzędzia diagnostyczne dostępne w Google Search Console (GSC) dokładnie pokażą Ci, co dzieje się w tle Twojej strony.
Weryfikacja błędów w Mobile Usability
Sekcja "Obsługa na urządzeniach mobilnych" w Google Search Console to pierwszy przystanek podczas audytu indeksowania. Raport ten wskazuje konkretne błędy, na które natknął się Google, próbując wyświetlić Twoją stronę na telefonach. Ignorowanie tych ostrzeżeń może spowodować utratę cennych pozycji w wynikach wyszukiwania.
- Tekst poza ekranem – treść jest szersza niż ekran urządzenia, zmuszając użytkownika do niewygodnego przewijania w poziomie. Warto sprawdzić ten element w DevTools przy szerokości 320 px.
- Elementy zbyt blisko siebie – przyciski lub linki są tak stłoczone, że precyzyjne kliknięcie staje się niemal niemożliwe. Zalecany minimalny rozmiar obszaru dotykowego to około 48 × 48 px.
- Czcionka zbyt mała – tekst mniejszy niż 16 px bywa nieczytelny na małych ekranach. Google sugeruje stosowanie co najmniej 16 px dla głównego tekstu, aby zapewnić komfort czytania.
Kliknij każdy zgłoszony problem w raporcie GSC, aby przejrzeć przykłady i zrzuty ekranu – to zaoszczędzi Ci sporo czasu. Po naprawieniu błędów jeden po drugim, pamiętaj, by w panelu Google Search Console zgłosić ponowne sprawdzenie poprawek.
Analiza przekierowań i łańcuchów URL
Nieprawidłowe przekierowania to cichy wróg wydajności na smartfonach, który może irytować zarówno użytkowników, jak i roboty wyszukiwarki. Jeśli po wpisaniu adresu URL następuje seria kilku przekierowań, zanim użytkownik dotrze do celu, Google uzna to za błąd. Wykorzystaj Google Search Console, aby wykryć takie niepożądane łańcuchy i skutecznie je wyeliminować.
Popularne narzędzia, takie jak Screaming Frog, posiadają funkcję filtrowania, która pozwala szybko zidentyfikować łańcuchy przekierowań. Sprawdź kolumnę "Redirect Chains", aby zobaczyć wszystkie błędne ścieżki występujące w obrębie Twojej witryny. Każde zbędne przekierowanie to dodatkowe opóźnienie dla urządzeń mobilnych i negatywny sygnał dla algorytmów Google.
Kontrola plików robots.txt i meta tagów
Twój plik robots.txt nie może blokować dostępu do wersji mobilnej ani do zasobów CSS i JS niezbędnych do poprawnego renderowania. Częstym błędem jest dyrektywa blokująca całe katalogi z mobilną treścią, co uniemożliwia robotom poprawne zrozumienie strony. Zweryfikuj to dokładnie krok po kroku, korzystając z testera plików robots.txt dostępnego w narzędziach Google.
Meta tag noindex to kolejna pułapka, która może całkowicie wykluczyć Twoją stronę z wyników wyszukiwania. Jeśli przez pomyłkę umieścisz noindex w kodzie wersji na telefony, Google po prostu jej nie zaindeksuje. Przejrzyj kod źródłowy (Ctrl+U) i upewnij się, że nie ma tam zapisu blokującego indeksowanie – jeśli jest, usuń go natychmiast.
Pamiętaj o ustawieniu prawidłowego tagu rel="canonical" na każdej podstronie, co jest kluczowe przy indeksowaniu Mobile-First. W nagłówku HTTP lub kodzie HTML musisz wyraźnie wskazać Google, która wersja adresu URL jest tą główną i "oficjalną". Na wersji desktopowej dodaj odpowiedni link alternate wskazujący na wersję mobilną, a na mobilnej link canonical prowadzący do wersji desktopowej.
Responsywność i konfiguracja meta viewport
Pełna responsywność strony internetowej to absolutna podstawa każdej skutecznej strategii mobilnej. Bez odpowiednio skonfigurowanego tagu meta viewport, Twoja witryna będzie wyglądać jak pomniejszone, zupełnie nieczytelne zdjęcie. Mimo że jest to element techniczny, jego wpływ na końcową użyteczność serwisu jest ogromny.
Prawidłowe ustawienie znacznika viewport
Pamiętaj, aby umieścić fragment kodu <meta name="viewport" content="width=device-width, initial-scale=1"> w sekcji <head> każdej podstrony. Jego brak sprawi, że responsywność przestanie działać, a układ strony na telefonach ulegnie całkowitemu rozregulowaniu. W takim przypadku, narzędzia deweloperskie przeglądarki (Chrome DevTools) szybko wskażą elementy wychodzące poza ekran.
Należy również upewnić się, że żadne style CSS czy skrypty ładowane później nie nadpisują tych ustawień. Czasem automatycznie robią to wtyczki JavaScript, niepotrzebnie wprowadzając zamieszanie w kodzie. Warto otworzyć DevTools (F12), przejść do zakładki "Elements" i sprawdzić, czy znajduje się tam tylko jeden tag meta viewport.
Testowanie na różnych rozdzielczościach ekranu
Chociaż tag meta viewport instruuje przeglądarkę, w jaki sposób ma wyświetlać content, niezbędne jest jeszcze przetestowanie strony na rzeczywistych urządzeniach. Narzędzia takie jak Google Mobile-Friendly Test pokażą dokładnie, jak Twoją witrynę widzą algorytmy wyszukiwarki. Regularnie korzystaj z trybu responsywnego w Chrome DevTools, sprawdzając wygląd strony zarówno w orientacji pionowej, jak i poziomej.
Do najczęstszych problemów należą niepożądane przewijanie w poziomie, przycięte elementy oraz zbyt mała czcionka. Wszystkie te usterki można łatwo naprawić, stosując elastyczne jednostki w CSS. Pamiętaj, że obecnie podejście mobile-first to standard, a nie jedynie opcjonalny dodatek.
- Szerokość 320 px – odpowiada najmniejszym standardowym ekranom, np. starszym iPhone'om; strona musi tu wyświetlać się idealnie, bez poziomego paska przewijania.
- Szerokość 375 px – odpowiada popularnym modelom iPhone 6/7/8; to rozdzielczość, w której większość użytkowników przegląda content.
- Szerokość 414 px – dotyczy nowoczesnych, większych smartfonów; treść powinna pozostawać czytelna bez konieczności dodatkowych modyfikacji.
- Tablet 768 px – to strefa iPadów i tabletów z Androidem; stanowią one pomost między wersją mobilną a desktopową i wymagają szczególnej uwagi.
Po każdej modyfikacji kodu wciśnij F12, uruchom DevTools i przełącz widok na tryb responsywny. Ta chwila poświęcona na testy może zaoszczędzić dni spędzonych na naprawianiu błędów na żywym serwerze.
Elastyczne jednostki CSS i układy Grid
Podczas projektowania responsywnych stron należy zapomnieć o sztywnych pikselach przy definiowaniu szerokości i wysokości elementów. Zamiast nich używaj jednostek względnych, takich jak %, vw, vh czy rem. Ustawienie właściwości width na 100% spowoduje, że element będzie się płynnie dopasowywał do każdej dostępnej rozdzielczości.
Twoimi największymi sprzymierzeńcami w dbaniu o odpowiedni układ są technologie CSS Grid i Flexbox. Grid umożliwia tworzenie kolumn, które automatycznie reorganizują się w zależności od wolnego miejsca na ekranie. Flexbox doskonale radzi sobie z równomiernym rozkładaniem elementów wewnątrz kontenera – warto go testować na szerokościach od 320 px do 1024 px.
Optymalizacja Core Web Vitals i prędkości
Core Web Vitals to kluczowe dla Google wskaźniki wydajności, które obejmują: LCP (czas ładowania największego elementu treści), CLS (stabilność wizualną) oraz FID/INP (interaktywność). Zaniedbanie któregokolwiek z nich może skutkować utratą wysokich pozycji w wynikach wyszukiwania. Próba przeprowadzenia pełnego audytu SEO bez analizy Core Web Vitals to jak budowa domu bez solidnych fundamentów.
Poprawa LCP, CLS i FID na mobile
Wskaźnik LCP (Largest Contentful Paint) mierzy, jak szybko pojawia się na ekranie największy widoczny element – zwykle jest to główne zdjęcie lub nagłówek. Jego wartość powinna być niższa niż 2,5 sekundy. Jeśli Twoja strona zawiera duży obraz typu "hero", warto przekonwertować go do formatu WebP i zmniejszyć jego wagę do poniżej 300 KB. Zastosowanie lazy loadingu dla elementów znajdujących się poza pierwszym ekranem również znacząco poprawia wyniki Core Web Vitals.
CLS (Cumulative Layout Shift) ocenia stabilność struktury wizualnej strony. Elementy, które przesuwają się w trakcie ładowania (np. przez asynchronicznie wczytujące się reklamy), pogarszają doświadczenie użytkownika i są negatywnie oceniane przez algorytmy Google. Aby temu zapobiec, zawsze rezerwuj przestrzeń pod reklamy i definiuj precyzyjne wymiary (width i height) dla wszystkich grafik.
Metryki FID (First Input Delay) oraz nowsza INP (Interaction to Next Paint) badają responsywność witryny podczas interakcji użytkownika (kliknięcia, dotknięcia). Blokada głównego wątku przez skrypty JavaScript może powodować opóźnienia powyżej 200 ms, co bezpośrednio wpływa na satysfakcję odwiedzających. Rozwiązaniem jest usunięcie blokujących skryptów, zastosowanie atrybutów defer lub async oraz podział dużych plików JS na mniejsze porcje.
Kompresja i cache statycznych zasobów
Przeprowadzając audyt szybkości strony SEO, zawsze zacznij od sprawdzenia kompresji zasobów na serwerze. Włączenie GZIP lub Brotli może zmniejszyć wielkość transferowanych danych o 70-90%, co radykalnie przyspieszy działanie witryny. W narzędziach deweloperskich sprawdź nagłówek Content-Encoding – jeśli nie ma tam "gzip" lub "br", koniecznie skonfiguruj to w pliku.htaccess lub serwerze nginx.
- Ustaw Cache-Control dla plików statycznych – używając wartości max-age=31536000 dla obrazów, CSS i JS, sprawisz, że przeglądarka nie będzie ich ponownie pobierać przez cały rok.
- Wykorzystaj CDN – sieć dostarczania treści (Content Delivery Network) serwuje zasoby z lokalizacji najbliższej użytkownikowi, co ma ogromne znaczenie, gdy serwer jest w Europie, a odbiorca w Azji.
- Zredukuj TTFB (Time To First Byte) – czas odpowiedzi serwera nie powinien przekraczać 200 ms. W przeciwnym razie cała witryna będzie działać wolno. Optymalizuj bazę danych, usuń zbędne wtyczki i rozważ zmianę hostingu.
- Minifikuj kod CSS i JavaScript – narzędzia takie jak cssnano i terser usuwają zbędne znaki z kodu, redukując jego objętość bez utraty funkcjonalności czy wpływu na HTTP.
Warto regularnie monitorować te wskaźniki za pomocą narzędzia Google Search Console, a konkretnie sekcji poświęconej Core Web Vitals. Raporty są tam aktualizowane co kilka dni, co daje Ci bieżący wgląd w sytuację. Po wprowadzeniu poprawek obserwuj trendy – powinny one wskazywać na systematyczną poprawę wydajności.
Testowanie przy ograniczonej przepustowości sieci
Wiele sklepów internetowych testuje swoje strony wyłącznie w warunkach szybkiego łącza biurowego, co jest poważnym błędem. Tymczasem użytkownicy często przeglądają treści w ruchu, korzystając z wolniejszych połączeń 3G lub 4G. Aby zweryfikować realną wydajność, w narzędziach deweloperskich (DevTools) włącz opcję "Throttling" i ustaw ją na "Slow 3G".
Jeśli strona ładuje się dłużej niż 5 sekund w takich warunkach, oznacza to poważny problem wymagający naprawy. Testy przy słabym zasięgu ujawniają błędy, takie jak zbyt ciężkie obrazy (pamiętaj o atrybucie alt) czy nadmiarowy kod JavaScript. To najlepszy sposób na symulację rzeczywistych warunków mobilnych, w których działa większość Twoich klientów.
Dane strukturalne i optymalizacja treści mobilnych
Dane strukturalne precyzyjnie przekazują wyszukiwarce Google informacje o zawartości Twojej strony, identyfikując konkretne elementy, takie jak artykuły, produkty czy wydarzenia. Bez nich roboty muszą samodzielnie interpretować kontekst, co nie zawsze się udaje. Wdrożenie tych znaczników często skutkuje lepszą widocznością dzięki atrakcyjnym, rozszerzonym wynikom wyszukiwania.
Równie kluczowa jest optymalizacja treści mobilnych pod kątem mniejszych ekranów. Należy stosować zwięzłe tytuły, krótkie akapity oraz czytelne, odpowiednio duże czcionki, aby zapewnić komfortowy odbiór na smartfonach.
Implementacja schema.org dla rich results
Warto wzbogacić podstrony o dane strukturalne, wybierając popularne formaty, takie jak Product, Article czy FAQPage. Najlepszym rozwiązaniem technicznym jest wykorzystanie formatu JSON-LD, umieszczanego wewnątrz tagu <script>. Google zdecydowanie preferuje to podejście, ponieważ kod jest oddzielony od warstwy wizualnej strony.
- Product schema – niezbędny dla sklepów internetowych, przekazuje kluczowe informacje: nazwę, cenę, oceny oraz dostępność produktu. Pozwala to Google wyświetlić te szczegóły bezpośrednio w wynikach wyszukiwania.
- Article schema – idealny dla blogów, definiuje tytuł, datę publikacji oraz autora. Tak opisana treść ma większe szanse na wyróżnienie w usługach takich jak Google News.
- FAQPage schema – służy do oznaczania sekcji pytań i odpowiedzi. Wyszukiwarka może wyświetlić je jako wyróżniony fragment na samej górze wyników.
- BreadcrumbList schema – wizualizuje ścieżkę nawigacji (np. Strona główna › Kategoria › Produkt), poprawiając doświadczenie użytkownika i zwiększając współczynnik klikalności (CTR).
Po wdrożeniu znaczników koniecznie sprawdź ich poprawność za pomocą narzędzia Google Rich Results Test. Zielony status oznacza sukces, a wszelkie błędy wymagają natychmiastowej poprawy. Pamiętaj, że nawet drobne usterki mogą uniemożliwić wyświetlanie się rozszerzonych wyników.
Meta tagi i nagłówki dostosowane do mobile
Ze względu na ograniczoną przestrzeń na ekranach smartfonów, title i meta opis muszą być niezwykle zwięzłe. Zaleca się, aby title nie przekraczał 60 znaków, co zapobiega jego obcięciu w mobilnych wynikach. Dłuższe teksty są skracane przez Google, przez co użytkownik może nie zobaczyć kluczowych informacji.
Treści mobilne powinny mieć czytelną i logiczną hierarchię nagłówków. Strona musi zawierać tylko jeden nagłówek H1, po którym następują sekcje H2 i H3. Zbyt długie śródtytuły stają się nieczytelne na telefonie, dlatego należy dbać o ich zwięzłość.
Każdy obrazek na stronie musi mieć wypełniony atrybut alt, który służy jako opis dla robotów i osób niewidomych. Zamiast ogólnych fraz, używaj precyzyjnych opisów, np. „czarna kurtka zimowa na modelu”. Taka praktyka wspiera pozycjonowanie, podczas gdy atrybut title jest zazwyczaj ignorowany na urządzeniach dotykowych.
Canonical i sitemap dla wersji mobilnej
Jeśli posiadasz oddzielne adresy URL dla wersji desktopowej i mobilnej, musisz poprawnie skonfigurować tagi kanoniczne. Mechanizm ten informuje Google, że obie wersje reprezentują tę samą treść. Zazwyczaj jako wersję kanoniczną wskazuje się URL przeznaczony na komputery.
Plik sitemap.xml powinien zawierać wszystkie ważne adresy URL, zarówno dla telefonów, jak i komputerów. W przypadku oddzielnych adresów, użyj atrybutów rel="alternate", aby wskazać powiązania między wariantami strony. Prawidłowa konfiguracja zapobiega duplikacji i problemom widocznym w raportach GSC (Google Search Console).
UX mobilny i eliminacja błędów crawlowania
Nawet doskonałe podstawy techniczne strony nie zrekompensują słabego UX mobilnego, który szybko zniechęci użytkownika do pozostania w witrynie. Irytujące pop-upy zasłaniające treść, zbyt małe przyciski czy skomplikowane formularze skutecznie zwiększają współczynnik odrzuceń. Google dostrzega takie problemy, co często skutkuje negatywnym wpływem na pozycję w wynikach wyszukiwania.
Optymalizacja CTA i formularzy kontaktowych
Twoje wezwanie do działania (CTA) musi być widoczne natychmiast, bez konieczności przewijania strony. Najlepiej umieścić je nad linią zanurzenia (above the fold), aby było pierwszym elementem, na który trafi wzrok użytkownika. Sam przycisk powinien mieć co najmniej 44 piksele wysokości, aby umożliwić łatwe dotknięcie go palcem.
- CTA nad linią fold – kluczowe jest, aby pierwszy widoczny element zachęcał użytkownika do konkretnej akcji. Hasła takie jak „Kup teraz” czy „Pobierz PDF” muszą być widoczne bez przewijania.
- Przycisk o wysokości minimum 44 px – sprawdzanie błędów crawlowania obejmuje również analizę interakcji użytkownika, a zbyt małe, frustrujące elementy mogą być przez nie wychwycone.
- Kolor kontrastowy – przycisk musi mocno kontrastować z tłem i otoczeniem. Wybierz barwy, które natychmiast przyciągają uwagę, takie jak intensywna zieleń na białym tle.
- Formularz z maksymalnie 3-4 polami – pamiętaj, że każde dodatkowe pole może obniżyć konwersję nawet o 10%. Na urządzeniach mobilnych stawiaj na prostotę i zbieraj tylko niezbędne dane, takie jak imię i adres e-mail.
Warto wdrożyć funkcję autouzupełniania pól, używając atrybutów HTML, np. autocomplete="email" lub autocomplete="tel". Znacznie ułatwi to wprowadzanie danych na telefonie. Upewnij się także, że przycisk „Wyślij” jest duży, wyraźny i ma co najmniej 48 pikseli szerokości.
Po wysłaniu danych wyświetl użytkownikowi jasny komunikat potwierdzający, np. „Dziękuję, Twoja wiadomość została wysłana”. Nie pozostawiaj go w niepewności co do powodzenia akcji. Jeśli formularz przekierowuje na inny URL, upewnij się, że strona docelowa działa poprawnie i nie generuje błędów.
Usuwanie pop-upów i nieobsługiwanych elementów
Agresywne, pełnoekranowe reklamy blokujące dostęp do zawartości negatywnie wpływają na UX mobilny i są negatywnie oceniane przez algorytmy. Google wyraźnie komunikuje, że kary mogą spotkać strony stosujące takie inwazyjne praktyki. Jeśli musisz wyświetlić okno (np. informację o plikach cookies), zadbaj o duży, wyraźny przycisk zamykania.
- Eliminuj Flash i wtyczki – technologia Flash nie jest obsługiwana na iOS i większości urządzeń z Androidem. Zastąp ją nowoczesnymi rozwiązaniami, takimi jak wideo HTML5 lub lekkie animacje CSS.
- Unikaj JavaScriptu zależnego od Flasha – jeżeli Twoje skrypty wymagają do działania przestarzałych wtyczek, należy jak najszybciej zmienić to podejście.
- Testuj stronę w Mobile-Friendly Test – narzędzia takie jak Google Search Console precyzyjnie wskażą elementy, które nie renderują się poprawnie na smartfonach.
Regularnie monitoruj potencjalne problemy w sekcji Mobile Usability w Google Search Console. To narzędzie szczegółowo wskazuje błędy utrudniające korzystanie ze strony na urządzeniach mobilnych. Do najczęstszych należą zbyt mała czcionka, nakładające się na siebie elementy oraz uciążliwe pop-upy.
Nawigacja i linki przyjazne dla mobile
Menu na stronie mobilnej musi być maksymalnie uproszczone, najlepiej w formie ikony „hamburgera”. Na małym ekranie nie ma miejsca na tradycyjne, poziome paski nawigacyjne. Każda pozycja w menu powinna być na tyle duża, aby można ją było łatwo dotknąć palcem.
Wszystkie linki – zarówno wewnętrzne, jak i zewnętrzne – powinny mieć odpowiednio duży obszar klikalny, wynoszący co najmniej 48 × 48 pikseli. Jeśli sam tekst odnośnika jest mały, warto dodać w CSS marginesy wewnętrzne (padding), aby powiększyć aktywną strefę. Odnośniki powinny także mieć wyraźny, rozpoznawalny kolor, zazwyczaj niebieski.
Wdróż nawigację okruszkową (breadcrumbs), która znacznie ułatwia orientację na stronie i pozwala szybko wrócić do poprzedniej kategorii. Taka struktura pomaga obniżyć współczynnik odrzuceń i zajmuje mało miejsca. Dodaj ją jako dane strukturalne, a Google może wyświetlić tę pomocną ścieżkę bezpośrednio w wynikach wyszukiwania.