Przejdź do treści

Jak przeprowadzić audyt techniczny SEO w React i Next.js

Poznaj sprawdzone metody na audytowanie nowoczesnych aplikacji webowych. Sprawdź jak wykrywać problemy blokujące indeksację robotów Google i poprawić pozycje witryny.

Maciej Sala

Founder StriveLab

15 min czytaniaOpublikowano 17 marca 2026 (Aktualizacja 19 czerwca 2026)

Jeśli szukasz nie teorii, tylko diagnozy i poprawek wdrożonych wprost w kodzie, to dokładnie zakres mojej usługi Audyt techniczny SEO.

Czym właściwie jest audyt techniczny SEO

Audyt techniczny SEO to ustrukturyzowana analiza warstwy technicznej serwisu pod kątem widoczności w wyszukiwarkach. W odróżnieniu od audytu treści (czy piszesz o właściwych rzeczach) i audytu off-site (kto do Ciebie linkuje), audyt techniczny odpowiada na jedno bardzo ważne pytanie: czy nic nie blokuje wyszukiwarce dostępu do Twojej treści i jej zrozumienia?

W praktyce audyt techniczny SEO sprawdza:

  1. Dostępność dla robotów, czyli czy crawler może wejść na stronę i pobrać zasoby?
  2. Renderowanie, czyli czy po wykonaniu JavaScriptu widać tę samą treść co u użytkownika?
  3. Indeksację, czyli czy strony trafiają do indeksu i czy te właściwe?
  4. Architekturę, czyli czy struktura URL-i i linkowania wewnętrznego jest logiczna?
  5. Wydajność, czyli czy Core Web Vitals i realne odczucie szybkości są na poziomie?
  6. Mobile-first, czyli czy wersja mobilna jest pełnowartościowa?
  7. Bezpieczeństwo, czyli czy działa HTTPS, kody statusu są poprawne i nie ma mixed content?
  8. Dane strukturalne, czyli czy schema.org pomaga zrozumieć i cytować treść?
  9. Sygnały techniczne treści, czyli czy canonical, hreflang, paginacja, parametry URL i przekierowania po migracji nie rozbijają indeksacji?

Audyt nie jest wyliczeniem danych z narzędzi takich jak Lighthouse czy Ahrefs, ponieważ wartość leży w ich interpretacji w kontekście biznesowym. Przykładowo, błąd 404 na zarchiwizowanym wpisie to drobiazg, podczas gdy ten sam błąd na stronie produktu, która wciąż generuje kliknięcia z Google, to już jednak problem ze zmniejszonym przychodem.

Dlaczego dla React i Next.js audyt jest trudniejszy

Klasyczna strona internetowa (np. WordPress) wysyła do przeglądarki gotowy HTML z treścią, crawler dostaje wszystko praktycznie od razu. W aplikacjach React sprawa się komplikuje, ponieważ o widoczności decyduje strategia renderowania:

  • CSR (Client-Side Rendering) oznacza, że serwer odsyła niemal pustą skorupę <div id="root"></div>, a treść dorysowuje JavaScript w przeglądarce. Taki jest domyślny tryb pure React (np. Vite, Create React App), który jest dla SEO najbardziej problematyczny i ryzykowny.

  • SSR (Server-Side Rendering) oznacza HTML z treścią generowany na serwerze przy każdym żądaniu, dzięki czemu crawler dostaje gotową stronę.

  • SSG (Static Site Generation) oznacza HTML budowany tylko raz, podczas builda. To rozwiązanie najszybsze i najbezpieczniejsze dla SEO.

  • ISR (Incremental Static Regeneration) to hybrydowe podejście Next.js, w którym statyczne strony odświeżane są w tle co określony czas.

Problem w tym, że w jednej aplikacji Next.js (zwłaszcza w App Routerze z React Server Components) różne podstrony mogą używać różnych strategii i część krytycznej treści potrafi „uciec” do renderowania po stronie klienta, gdzie crawler zobaczy ją z opóźnieniem albo wcale.

Do tego dochodzą jeszcze inne potencjalne problemy:

  • dynamiczne metadane, czyli title i description wstrzykiwane przez JS zamiast renderowane serwerowo,
  • hydration, czyli ciężki, wolny proces „ożywiania” HTML-a, który psuje INP; kiedy hydratacja się wywraca, Googlebot widzie co innego niż użytkownik, a ten scenariusz rozkładam dokładnie w artykule o hydration mismatch i indeksacji,
  • bundle size, czyli za dużo JavaScriptu ładowanego eagerly, blokującego główny wątek,
  • soft 404, czyli SPA zwracające status 200 OK na nieistniejących adresach, zamiast prawdziwego 404,
  • layout shift, czyli obrazy i komponenty bez zarezerwowanego miejsca, psujące CLS.

W Next.js dochodzi jeszcze warstwa frameworka. Audyt musi sprawdzić, czy generuje poprawne title, description, canonical, robots i Open Graph dla każdej trasy; czy dynamiczne strony mają właściwe statusy przez notFound() zamiast miękkiego komunikatu 404; czy app/sitemap.ts i app/robots.ts odzwierciedlają realną strukturę serwisu; czy granica między i Client Components nie wypycha kluczowej treści do hydracji; oraz czy cache, ISR i rewalidacja nie serwują Google starych metadanych po zmianach w CMS-ie.

To są dokładnie te miejsca, w których strona „wygląda świetnie”, a mimo to nie rośnie w Google. Audyt frontendowy szuka ich u źródła, czyli w kodzie, w danych i w konfiguracji frameworka, nie w raporcie PDF.

Nowa rzeczywistość 2026 z Googlebotem i crawlerami AI

Do niedawna audyt projektowaliśmy pod jednego odbiorcę, czyli . Dzisiaj Twoją stronę odwiedza co najmniej kilkunastu nie-ludzkich konsumentów, a najważniejsi z nich to crawlery silników AI: GPTBot (ChatGPT), ClaudeBot, PerplexityBot, Google-Extended i inne.

Z technicznego punktu widzenia, jest jedna kluczowa rzecz warta zapamiętania: praktycznie żaden z crawlerów AI nie renderuje JavaScriptu. Crawlery AI zazwyczaj biorą wyłącznie surowy HTML i nic poza nim nie widzą. Dla porównania, Googlebot renderuje, ale w drugim podejściu (fali), ponieważ najpierw interesuje go czysty HTML.

Konsekwencje są bardzo wyraźne, ponieważ aplikacja w potrafi być poprawnie zindeksowana przez Google, a jednocześnie praktycznie niewidoczna w ChatGPT Search i Perplexity. Cała treść, którą dorysowuje JavaScript, dla tych silników jest traktowana, jakby nie istniała.

To właśnie tu spotykają się SEO i oraz . Jeśli zależy Ci na cytowaniach w odpowiedziach AI, w 2026 to realne źródło ruchu i autorytetu, więc krytyczna treść musi być w HTML-u, zanim wykona się JavaScript. Innymi słowy, SSR lub SSG stało się standardem, jeśli zależy Ci (a powinno) na widoczności w narzędziach AI i w podpowiedziach AI w Google.

Praktyczna wskazówka, którą stosuję: crawluję serwis Screaming Frogiem z user-agentem GPTBot lub PerplexityBot i wyłączonym renderowaniem JS. To, czego nie widać w tym widoku, jest niewidoczne dla AI.

Jak wyszukiwarka widzi Twoją stronę: crawling → rendering → indexing

Żeby audyt miał sens, trzeba rozumieć trzy fazy, które strona musi przejść, zanim pojawi się w wynikach.

1. Crawling

Googlebot odkrywa adresy, przechodząc po linkach i czytając mapy witryny. Każdy serwis ma swój crawl budget, czyli limit podstron, które robot odwiedzi w danym oknie czasowym. Błędy techniczne (łańcuchy przekierowań, masa parametrów URL, strony 5xx) marnują ten budżet, zostawiając wartościowe podstrony nieodwiedzone. Przy większych serwisach sam crawl z zewnątrz nie wystarcza, więc realne zachowanie robota najlepiej weryfikować w logach Cloudflare i analizie crawl budgetu.

2. Rendering (tu giną aplikacje JS)

Googlebot działa w dwóch falach: najpierw pobiera surowy HTML, jeśli zasoby na to pozwalają, kolejkuje stronę do renderowania, czyli wykonania JavaScriptu, by zobaczyć pełną treść. Między falą pierwszą a drugą jest zauważalna luka czasowa.

To ma trzy konsekwencje dla aplikacji React/Next.js:

  1. Treść dostępna dopiero po wykonaniu JS jest indeksowana później niż treść w HTML-u.
  2. Googlebot zobaczy pustą stronę, jeśli JS się wywróci, przekroczy timeout albo zablokujesz jego pliki w robots.txt.
  3. Crawlery AI w ogóle nie dochodzą do drugiej fali, ponieważ dla nich liczy się tylko surowy HTML.

Najprostszy test, od którego zaczynam audyt każdej aplikacji JS:

Code
# Co crawler dostaje w surowym HTML-u, zanim wykona JavaScript?
curl -s https://twojadomena.pl/wazna-podstrona | grep "fragment-twojej-tresci"

Jeśli curl (albo Ctrl+U / „Pokaż źródło strony”) nie zawiera Twojej kluczowej treści, nagłówków i linków nawigacji, masz problem renderowania, niezależnie od tego, jak ładnie strona wygląda w przeglądarce. Drugą stroną tego testu jest porównanie surowego HTML-a z wyrenderowanym DOM-em (zakładka Elements w DevTools) oraz z widokiem w narzędziu Kontrola adresu URL w .

3. Indexing

Po renderowaniu Google analizuje treść i zapisuje ją w indeksie. Tylko zindeksowane strony pojawiają się w wynikach. Tu polują takie problemy jak zduplikowana treść, błędne canonical, przypadkowy noindex albo soft 404.

Kiedy przeprowadzić audyt

Audyt techniczny to nie jednorazowa akcja, tylko element higieny, ale są też momenty, w których po prostu musisz go wykonać:

  • przed startem nowej strony lub aplikacji (taniej naprawić przed indeksacją niż po),

  • po migracji, gdy zmieniasz framework, przechodzisz na App Router, zmieniasz domenę, redesign lub hosting,

  • po nagłym spadku ruchu organicznego,
  • cyklicznie, czyli w dużych serwisach i e-commerce co kwartał, a w mniejszych stronach firmowych co 6 do 12 miesięcy,

  • po każdym większym wdrożeniu, ponieważ w aplikacjach JS jeden przypadkowy noindex czy zepsuty canonical potrafi skasować tygodnie pracy. Dlatego u siebie pilnuję tego automatycznymi testami regresji SEO w CI/CD.

Audyt krok po kroku w 9 warstwach

Poniżej kompletna lista kontrolna. Ułożyłem ją w warstwy od najważniejszej (jeśli crawler nie wejdzie, reszta nie ma znaczenia) do uzupełniających.

Warstwa 1: Crawl i indeksacja

robots.txt to pierwszy plik, jaki sprawdza robot, a najczęstszy, poważny błąd w aplikacjach JS to blokowanie plików .js i .css. Oznacza to, że Googlebot nie wyrenderuje strony. Upewnij się też, że nie ma globalnego Disallow: / (zostawionego po stagingu) i że na końcu jest ścieżka do mapy witryny.

sitemap.xml powinna zawierać wyłącznie kanoniczne adresy ze statusem 200, bez duplikatów i parametrów, z aktualnym lastmod. W Next.js generuj ją dynamicznie (np. app/sitemap.ts), żeby nie rozjeżdżała się z realną zawartością serwisu.

Stan indeksacji w GSC wynika z raportu „Indeksowanie stron”, który jest bezpośrednim źródłem prawdy od Google. Przeanalizuj strony wykluczone i z błędami; każdy status (np. „Strona z przekierowaniem”, „Wykryta, obecnie niezindeksowana”, „Strona zawiera tag noindex”) to konkretna wskazówka.

Kody statusu HTTP są ważne, bo błędy 4xx psują UX i marnują crawl budget. Podczas gdy błędy 5xx to już coś znacznie poważniejszego, ponieważ potrafią doprowadzić do wypadnięcia z indeksu. W SPA pilnuj zwłaszcza soft 404, bo nieistniejący adres musi zwracać prawdziwy status 404/410.

Migracje i przekierowania wymagają szczególnej kontroli, bo po zmianie domeny, CMS-a, frameworka albo struktury URL najpoważniejsze błędy są w mapie przekierowań. Audyt powinien sprawdzić, czy stare adresy z ruchem i linkami prowadzą przez 301 do najbliższych odpowiedników, a nie do strony głównej. Trzeba też sprawdzić czy nie ma łańcuchów przekierowań oraz czy linki kanoniczne po migracji wskazują już nowe, docelowe adresy.

Warstwa 2: Renderowanie (warstwa frontendowa)

To serce audytu aplikacji JS:

  • Strategia renderowania per typ strony. Strony marketingowe, blog, podstrony usługowe i kategorie powinny iść przez SSR lub SSG (innymi słowy, wszystko, co ma zdobywać pozycje w wyszukiwarce). CSR zostaw dla zalogowanych paneli i widoków, które i tak nie będą nigdy indeksowane.
  • Diff HTML vs DOM. Porównaj surowe źródło z wyrenderowanym DOM-em. Treść, która pojawia się dopiero po client-side rendering, jest dla crawlerów AI niewidoczna, a dla Google opóźniona.
  • Dynamiczne metadane. title, description, canonical, Open Graph muszą być renderowane serwerowo. W Next.js korzystaj z Metadata API (generateMetadata), a nie z wstrzykiwania znaczników po stronie klienta. W czystym React rozważ przeniesienie krytycznych tras na renderowanie serwerowe zamiast łatać react-helmet.
  • Statusy tras w Next.js. Nieistniejąca podstrona powinna kończyć się prawdziwym 404 przez notFound(), a usunięta treść często lepiej działa jako 410. Komunikat „nie znaleziono” wyrenderowany w aplikacji przy statusie 200 jest dla SEO soft 404 i potrafi negatywnie wpływać na indeks.
  • Granice Server/Client Components. "use client" jest potrzebne dla interakcji, ale nie powinno obejmować całych layoutów, list artykułów, opisów usług czy bloków contentowych. Im więcej krytycznej treści trafia do Client Components, tym większe ryzyko pustego HTML-a, ciężkiej hydratacji i gorszego INP.
  • Cache i rewalidacja. W App Routerze problemy SEO potrafią wynikać nie z samego HTML-a, tylko z tego, kiedy się odświeża. Audyt sprawdza, czy zmiana tytułu, linku kanonicznego, ceny produktu albo opisu kategorii w CMS-ie faktycznie odświeża odpowiednią trasę, sitemapę i dane strukturalne.
  • Treść ukryta za interakcją. Zakładki, akordeony i „pokaż więcej” muszą trzymać treść w DOM, a nie wstrzykiwać ją dopiero po onClick. Inaczej crawler jej nie zobaczy. Sam akordeon jest bezpieczny, ale pod jednym warunkiem: odpowiedź siedzi w wyrenderowanym serwerowo HTML i jest tylko chowana CSS-em, a nie odmontowywana z drzewa do czasu kliknięcia. To rozróżnienie staje się krytyczne przy crawlerach AI. Google wykona JavaScript i prędzej czy później rozwinie panel albo odczyta treść zdublowaną w danych strukturalnych (FAQPage w JSON-LD), więc tam masz dwie siatki bezpieczeństwa. W wypadku silników AI nie ma żadnej, ponieważ nie wykonują JS i zwykle nie parsują JSON-LD, tylko interesuje je widoczny tekst strony. Komponent typu „doklej się dopiero po hydracji” jest dla nich pustym div-em, a structured data nie nadrobi tej luki. Jedyne, co realnie widzą, to treść obecna w surowym HTML.
  • Nawigacja w statycznym HTML. Główne menu i stopka muszą być linkami (<a href>) dostępnymi bez wykonywania JS. Hamburger renderowany dopiero po kliknięciu potrafi ukryć przed crawlerem całą strukturę serwisu.
  • Test pod crawlery AI. Crawl z user-agentem GPTBot/PerplexityBot bez renderowania JS. Pokazuje, co widzą silniki, które nie wykonują JavaScriptu.

Warstwa 3: Architektura i linkowanie wewnętrzne

  • Struktura URL powinna mieć krótkie, czytelne adresy, małe litery, myślniki zamiast podkreśleń i brak zbędnych parametrów. Struktura powinna odzwierciedlać hierarchię serwisu.
  • Linkowanie wewnętrzne powinno prowadzić do kluczowych podstron w 3 do 4 kliknięciach od strony głównej. Szukaj stron osieroconych (bez żadnych linków przychodzących), napraw zepsute linki oraz stosuj strategię klastrów tematycznych wraz z opisowymi anchor textami.
  • Tagi canonical wskazują wersję oryginalną i bronią przed duplikacją. Uważaj na pętle i łańcuchy kanoniczne oraz na link kanoniczny wskazujący na noindex.
  • Paginacja i listingi nie mogą pozwalać kategoriom bloga, listingom produktów i archiwom tworzyć nieskończonej liczby słabych podstron bez wartości. Audyt sprawdza, czy paginacja ma logiczne adresy, linkowanie do kolejnych stron, unikalne linki kanoniczne tam, gdzie strony mają być indeksowane, i sensowną decyzję, które listingi mają pracować w Google.
  • Parametry URL i filtry potrafią przez sortowanie, UTM-y, warianty widoku, wyszukiwarkę wewnętrzną i filtry e-commerce wygenerować tysiące duplikatów. W React/Next.js szczególnie łatwo ukryć ten problem za stanem aplikacji i searchParams. Trzeba rozdzielić parametry użyteczne dla SEO od technicznych, które powinny być kanonikalizowane, blokowane, ignorowane albo oznaczone noindex.
  • Wersje językowe wymagają współpracy i , jeśli serwis ma kilka języków. Każda wersja językowa powinna wskazywać własny link kanoniczny i komplet alternatyw. W Next.js App Router zwykle robi się to przez alternates.languages w generateMetadata().

Warstwa 4: Core Web Vitals i wydajność

Aktualne progi (2026), które Google nagradza w rankingu:

  • LCP (Largest Contentful Paint) < 2,5 s mierzy szybkość załadowania największego elementu (zwykle hero image lub główny blok tekstu).
  • INP (Interaction to Next Paint) < 200 ms mierzy responsywność interfejsu; zastąpił FID w marcu 2024.
  • CLS (Cumulative Layout Shift) < 0,1 mierzy stabilność layoutu.

W aplikacjach React głównym winowajcą jest JavaScript, więc diagnozę prowadzę po konkretnych elementach:

  • LCP: hero image bez priority/preloadu, lazy-loading głównego obrazu, render-blocking resources, wolny TTFB.
  • INP: długie taski na głównym wątku, ciężka hydratacja, za duży bundle, nadmiar JS ładowanego eagerly. Lekarstwo: dzielenie kodu, web workers, odraczanie niekrytycznego JS, ograniczenie hydratacji. Pięć najczęstszych wzorców kodu, które niszczą INP w React, opisuję w osobnym artykule o INP.
  • CLS: obrazy bez podanych wymiarów, fonty bez font-display: swap, dynamicznie wstrzykiwana treść i reklamy bez zarezerwowanego miejsca.

I rzecz najważniejsza, o której musisz pamiętać: PageSpeed Insights jest sygnałem o potencjalnych nieprawidłowościach, ale nie jest diagnozą. Audyt ma odpowiedzieć, co konkretnie powoduje słaby wynik, na przykład obrazy, fonty, JS, layout shift czy third-party scripts.

W 2026 warto dodać do tej warstwy jeszcze jedną rzecz: Przeglądanie Agentowe w Lighthouse. To eksperymentalna kategoria, która patrzy na accessibility tree, CLS, llms.txt i WebMCP. Nie jest czynnikiem rankingowym, ale dobrze pokazuje, czy strona jest czytelna i stabilna dla agentów AI, a nie tylko dla klasycznego crawlera.

Warstwa 5: Optymalizacja mobilna

Google stosuje mobile-first indexing, więc do oceny używa wersji mobilnej. Audytuj z user-agentem Googlebot Smartphone, nie desktopowym. Testuj na symulacji średniopółkowego telefonu: ciężki bundle JS, który MacBook Pro przełyka bez problemu, na realnym smartfonie potrafi się dławić i psuć INP. Sprawdź responsywność (RWD), czytelność czcionek i odstępy.

Warstwa 6: Bezpieczeństwo

  • HTTPS powinien działać na całej witrynie, bez mixed content, ze starymi adresami HTTP przekierowanymi przez 301. Monitoruj datę wygaśnięcia certyfikatu SSL, bo wygasły potrafi zatrzymać crawlowanie.
  • Obsługa kodów stanu obejmuje przekierowania 301 dla przeniesionych treści, prawdziwe 404/410 dla usuniętych i brak długich łańcuchów redirectów.

Warstwa 7: Dostępność i semantyka HTML

Dostępność nie jest tylko osobnym wymaganiem WCAG, ponieważ dla SEO ma znaczenie, ponieważ porządna semantyka pomaga crawlerom i silnikom AI zrozumieć strukturę dokumentu. W audycie sprawdzam, czy strona ma jeden sensowny h1, logiczną hierarchię nagłówków, linki opisujące cel przejścia, teksty alternatywne dla obrazów niosących informację oraz elementy interaktywne zbudowane jako prawdziwe przyciski i linki, a nie klikalne div-y.

W React i Next.js częste błędy pojawiają się w komponentach współdzielonych. Przykładowo, ikony dostają rolę obrazka bez alternatywy, link jest zastąpiony handlerem onClick, menu mobilne istnieje dopiero po hydracji, a komponent karty ma kilka konkurujących linków. Te wszystkie błędy nie zawsze mają bezpośredni wpływ na pozycje, ale pogarsza crawlowalność, UX, wiarygodność strony i ostatecznie jakość danych, które trafiają do narzędzi AI.

Warstwa 8: Dane strukturalne (schema.org)

Dane strukturalne pomagają wyszukiwarce zrozumieć treść i otwierają drogę do rich snippets. W 2026 mają drugą, równie ważną funkcję: to po nich silniki AI często wybierają, co zacytować. Zadbaj o schema.org dla organizacji, usług, breadcrumbs, FAQ i artykułów, waliduj w Rich Results Test i walidatorze Schema.org. To jeden z najtańszych sposobów na jednoczesne korzyści zarówno w Google, jak i w AI search.

W Next.js dane strukturalne powinny wynikać z tego samego źródła danych co treść strony. Jeśli tytuł artykułu, cena produktu albo autor zmieniają się w CMS-ie, JSON-LD musi zmienić się razem z nimi. Rozjazd między widoczną treścią, metadanymi i schema.org to negatywny sygnał jakościowy, i dla Google, i dla silników odpowiedzi.

Warstwa 9: Warstwa GEO/AEO

To rozszerzenie, które musi być częścią współczesnego audytu technicznego.

  • krytyczna treść w surowym HTML (patrz: crawlery AI nie renderują JS),
  • jasna, dobrze ustrukturyzowana treść z nagłówkami i sekcjami FAQ, które AI łatwo cytuje,
  • schema.org jako sygnał dla silników generatywnych,
  • świadoma i przemyślana decyzja, czy i które boty AI (GPTBot, ClaudeBot, PerplexityBot, Google-Extended) dopuszczasz w robots.txt. Blokada oznacza brak cytowań w danym silniku.

Narzędzia do audytu technicznego

Narzędzia dostarczają dane; wartość leży w interpretacji i łączeniu sygnałów z różnych źródeł.

NarzędzieTypDo czego w audycie
Google Search ConsoleDarmoweIndeksacja, Core Web Vitals (dane realne), błędy crawl, mapy witryn, Kontrola adresu URL (render Google)
Screaming Frog SEO SpiderFreemium/PłatneGłębokie crawlowanie, statusy HTTP, przekierowania, crawl pod user-agentem GPTBot/PerplexityBot
PageSpeed Insights / LighthouseDarmoweDiagnoza Core Web Vitals, render-blocking resources, rekomendacje i eksperymentalne audyty Przeglądania Agentowego
WebPageTest / GTmetrixFreemiumWaterfall zasobów, zaawansowana wizualizacja ładowania
Chrome DevToolsDarmoweDiff DOM vs źródło, Performance/Coverage, analiza bundle i głównego wątku
Ahrefs / SemrushPłatneSite Audit, duplikacja treści, analiza linków i konkurencji
Analiza logów serweraZależnie od stosuCo Googlebot naprawdę crawluje, odstęp między falą crawl a render, ponieważ to oddziela audyt seniorski od juniorskiego

Same narzędzia nie są jednak procedurą audytu. W profesjonalnej diagnostyce ważne jest zestawienie kilku perspektyw: tego, co widzi crawler bez JavaScriptu; tego, co widzi Google po renderowaniu; tego, co zapisuje indeks; tego, jak zachowuje się aplikacja po deployu; i tego, które błędy mają realny wpływ na ruch, leady albo sprzedaż. To dlatego dwa identyczne komunikaty w narzędziu mogą dostać zupełnie inny priorytet w backlogu.

Najczęstsze błędy (ze szczególnym uwzględnieniem React/Next.js)

Indeksacja

  • blokowanie plików .js/.css w robots.txt (uniemożliwia renderowanie),

  • przypadkowy noindex zostawiony po stagingu lub wstrzyknięty warunkowo przez komponent,

  • błędne canonical (pętle, wskazania na noindex, niespójność z og:url),

  • nieaktualna mapa witryny z adresami 404/301,
  • brak lub niespójny hreflang w wersjach językowych,
  • parametry URL indeksowane jako osobne duplikaty.

Renderowanie i framework

  • krytyczna treść tylko w CSR, przez co jest opóźniona dla Google i niewidoczna dla AI,

  • metadane wstrzykiwane po stronie klienta zamiast serwerowo,
  • soft 404 w SPA (status 200 zamiast 404),
  • nadmierna, wolna hydratacja psująca INP,
  • zbyt szerokie użycie Client Components dla treści, która powinna być renderowana na serwerze,

  • cache lub ISR serwujące nieaktualne metadane po zmianach w CMS-ie.

Wydajność i mobile

  • nieskompresowane, ciężkie obrazy bez WebP/AVIF i bez wymiarów (CLS),

  • za duży bundle JS ładowany eagerly,
  • audytowanie tylko na desktopie zamiast na symulacji mobilnej.

Struktura

  • strony osierocone bez linków wewnętrznych,
  • zbyt głęboka struktura (ważne strony 5+ kliknięć od HP),
  • nawigacja niedostępna bez wykonania JS,
  • paginacja bez jasnej decyzji indeksować/nie indeksować,
  • przekierowania po migracji prowadzące przez łańcuchy albo do zbyt ogólnych stron.

Co zrobić z wynikami audytu technicznego SEO?

Raport to dopiero początek i najważniejsze, by zalecenia w dokumencie PDF nie wylądowały w szufladzie. Pisałem o tym szerzej w audyt SEO to nie lista TODO, tylko pull requesty.

Jak wygląda sensowny proces? Mniej więcej tak:

  1. Priorytetyzacja nadaje każdemu problemowi wagę: krytyczny (blokuje indeksację/widoczność), ważny, drobne usprawnienie.
  2. Kontekst i kierunek wdrożenia oznacza nie „popraw LCP”, tylko „hero image ładuje się lazy; dodaj priority, preload i przejdź na AVIF”.
  3. Wdrożenie w kodzie sprawia, że wybrane poprawki trafiają wprost do commitów i PR-ów, a nie wracają jako luźna lista zadań.
  4. Pomiar before/after odbywa się na tych samych metrykach i typach podstron: GSC (indeksacja, CWV, widoczność zapytań), GA4 (czy ruch i konwersje realnie rosną), Lighthouse/WebPageTest (diagnoza techniczna).

Dla aplikacji React/Next.js dochodzi jeszcze tłumaczenie problemów SEO na zadania frontendowe: zmiana granicy Server/Client Components, poprawienie generateMetadata(), naprawa statusów tras, uporządkowanie searchParams, rozdzielenie stanu UI od indeksowalnych URL-i, dodanie testów regresji dla noindex i linków kanonicznych albo spięcie rewalidacji z CMS-em. To jest ten moment, w którym audyt przestaje być marketingowym dokumentem, a staje się realną pracą inżynierską.

SEO techniczne nie kończy się w dniu merge'a, ponieważ po zmianach trzeba zweryfikować, czy Google widzi nowy stan i czy nie pojawiły się nowe problemy. Pomaga w tym wykrywanie anomalii SEO z Search Console, BigQuery i AI.

Jak wygląda audyt w StriveLab

W StriveLab prowadzę audyt techniczny SEO z perspektywy, która łączy SEO, frontend i produkt. Trzy rzeczy, które go wyróżniają:

  • Widoczność techniczna pozwala mi zweryfikować, czy Google i silniki AI dostają właściwy HTML, metadane i strukturę URL, a nie pustą skorupę do dorysowania przez JS.
  • Core Web Vitals u źródła oznaczają diagnozę LCP, INP i CLS po konkretnych elementach kodu (obrazy, fonty, bundle, hydratacja, third-party), a nie po ogólnym wyniku narzędzia.
  • Next.js bez ślepej wiary w framework oznacza, że sprawdzam Metadata API, statusy tras, sitemapę, robots.ts, hreflang, cache, ISR i granice Server/Client Components. Jest to o tyle istotne, że sam wybór Next.js nie gwarantuje technicznego SEO na odpowiednim poziomie.
  • Poprawki w kodzie, a nie raport sprawiają, że audyt kończy się listą zmian z priorytetami albo ich wdrożeniem w repozytorium, z porównaniem przed/po na tych samych metrykach.

Sprint ma największy sens dla stron i aplikacji w Next.js oraz React, serwisów po migracji technologicznej, stron usługowych zależnych od ruchu organicznego, landing page'y, portali contentowych i produktów B2B z publiczną częścią SEO.

Audyt techniczny i optymalizacja pod kątem SEO i GEO.
Audyt techniczny SEO

Często zadawane pytania

Czym jest audyt techniczny SEO?

To dogłębna analiza warstwy technicznej strony, która sprawdza, czy wyszukiwarki i silniki AI mogą dotrzeć do serwisu, poprawnie go wyrenderować, zrozumieć i zindeksować. Obejmuje crawling, indeksację, renderowanie, architekturę, Core Web Vitals, mobile-first, bezpieczeństwo, dostępność, dane strukturalne, migracje, parametry URL i i18n.

Czym audyt SEO dla aplikacji React różni się od zwykłego audytu?

Dochodzi pełna warstwa renderowania. W React o widoczności decyduje strategia (CSR/SSR/SSG/ISR), a najczęstsze problemy, takie jak treść tylko w client-side rendering, dynamiczne metadane, wolna hydratacja i soft 404, leżą w kodzie, a nie w robots.txt. Audyt frontendowy szuka ich u źródła.

Czy Google indeksuje strony w React i Next.js?

Tak, Googlebot renderuje JavaScript, ale w dwóch falach i z opóźnieniem. Czysty React w CSR bywa indeksowany wolniej i z ryzykiem błędów. Dlatego dla stron, które mają rankować, rekomenduję SSR lub SSG, co w Next.js standard i rozwiązuje większość problemów indeksacji.

Dlaczego moja aplikacja jest w Google, ale nie pojawia się w ChatGPT czy Perplexity?

Bo crawlery AI (GPTBot, ClaudeBot, PerplexityBot) zazwyczaj nie renderują JavaScriptu, ponieważ widzą tylko surowy HTML. Jeśli Twoja treść powstaje po stronie klienta, dla tych silników nie istnieje. Rozwiązaniem jest SSR/SSG i krytyczna treść w surowym HTML. To obszar GEO/AEO.

Jakie są aktualne progi Core Web Vitals w 2026?

LCP poniżej 2,5 s, INP poniżej 200 ms (zastąpił FID w marcu 2024) oraz CLS poniżej 0,1. W aplikacjach React głównym źródłem problemów z INP jest ciężki JavaScript i wolna hydratacja.

Jak często należy robić audyt techniczny SEO?

Duże serwisy i e-commerce warto audytować co kwartał. Mniejsze strony firmowe co 6 do 12 miesięcy. Zawsze przed startem nowej strony, po migracji lub redesignie oraz po nagłym spadku ruchu. W aplikacjach JS dodatkowo pilnuj regresji automatycznymi testami w CI/CD.

Ile kosztuje audyt techniczny SEO?

Koszt zależy od wielkości serwisu, technologii i zakresu (sam raport vs raport z wdrożeniem). To inwestycja w widoczność, a nie koszt, zwłaszcza gdy poprawki trafiają wprost do kodu i da się zmierzyć efekt before/after.

Co dostaję na koniec audytu w StriveLab?

Listę problemów z priorytetami, kontekstem i kierunkiem wdrożenia, przygotowaną tak, by przeszła wprost w commity i PR-y, a nie została luźną listą TODO. Wybrane poprawki wdrażam bezpośrednio w kodzie, z porównaniem stanu przed i po na tych samych metrykach.

Czy darmowy audyt SEO coś daje?

Darmowe narzędzia (GSC, PageSpeed Insights) to dobry start i pokazują powierzchowne problemy. Nie zastąpią jednak manualnej analizy, zwłaszcza w aplikacjach JS, gdzie przyczyna problemu leży w renderowaniu, routingu, cache, kodzie komponentów i danych zwracanych przez backend, a nie w samym wyniku narzędzia.

O autorze

Maciej Sala

Maciej Sala — konsultant technologiczny produktów cyfrowych i web developer z bogatym doświadczeniem w marketingu internetowym oraz SEO. Na co dzień pracuje z Reactem, Next.js i TypeScriptem, a ostatnio także z Astro i narzędziami do automatyzacji procesów AI. Sprawnie łączy perspektywę produktową z praktycznym podejściem do kodu. Przez kilka lat był związany z branżą gier wideo jako project manager i game designer. Absolwent historii na Uniwersytecie Jagiellońskim oraz studiów podyplomowych z marketingu internetowego na AGH w Krakowie. Po godzinach trenuje na siłowni, maluje figurki i rozwija własne projekty.

Pomagam przekładać takie tematy na konkretne wdrożenia w frontendzie, SEO, analityce i procesie produktowym.

Skontaktuj się ze mną

Biblioteka wiedzy na temat SEO

Czytaj dalej

Zobacz więcej wpisów
Next.js i SEO oraz przewaga nad czystym Reactem

Next.js to framework React, który rozwiązuje największy problem klasycznych aplikacji SPA : serwer wysyła gotowy HTML zamiast pustej strony. Dzięki temu Google widzi treść w początkowym HTML i nie musi czekać na JavaScript, żeby odkryć najważniejsze elementy strony. Do tego dostajesz wbudowane API do metadanych, automatyczną optymalizację obrazów i code splitting podział kodu ładowanego osobno dla każdej podstrony , który realnie poprawia Core Web Vitals.

Maciej Sala

Maciej Sala

Founder StriveLab

Optymalizacja Google Search Console w projektach Next.js

Trudno wyobrazić sobie współczesną analitykę bez Google Search Console GSC , czyli podstawowego narzędzia pokazującego dane bezpośrednio z Google Search. PageSpeed Insights mierzy wydajność, Ahrefs śledzi backlinki, ale GSC pokazuje dane o widoczności i problemach dotyczących strony internetowej. Dowiesz się z niego, które strony Google zna i indeksuje, jakie błędy crawlowania występują, na jakie frazy rankujesz oraz jakie wyniki Core Web Vitals osiąga strona podczas rzeczywistych wizyt użytkowników.

Maciej Sala

Maciej Sala

Founder StriveLab

Obsługa parametrów w URL bez duplikacji w Next.js i Astro

Parametry w URL mają, jak przysłowiowa moneta ma dwie strony. Z jednej, napędzają filtry, sortowanie, paginację i śledzenie kampanii, a z drugiej, jednocześnie potrafią cicho popsuć widoczność serwisu przez duplikacje treści, marnowany budżet indeksowania i rozwodnione link equity. W aplikacjach React, Next.js i Astro to problem architektoniczny i właśnie dlatego samo użycie rel="canonical" go nie rozwiązuje. W tym przewodniku przechodzę od klasyfikacji parametrów do decyzji o indeksacji, normalizacji URL-i, renderowania, paginacji oraz kontroli nawigacji fasetowej.

Maciej Sala

Maciej Sala

Founder StriveLab