← Wszystkie posty12 min czytania

Post · 09

Next.js a SEO — dlaczego indeksuje się 5x lepiej niż React SPA

Next.js indeksuje się w Google w godziny zamiast tygodni (jak React SPA), wyciąga Core Web Vitals 95+ out of the box, ma natywną obsługę schema.org i dynamic OG images. Konkretne case study niżej: migracja klienta z WordPress dała +180% ruchu organicznego i przesunięcie z pozycji 14 na 5 w 6 miesięcy.

  • Next.js
  • SEO
  • indeksacja

Czemu React SPA jest słabe pod SEO

Klasyczny React Single Page Application (z Create React App, Vite) wysyła do przeglądarki pusty `<div id="root"></div>` plus bundle JavaScript. Treść strony renderowana jest dopiero po wykonaniu JS w przeglądarce.

Google bot teoretycznie potrafi uruchomić JavaScript i odczytać treść SPA, ale w praktyce robi to w drugiej fazie crawlu (rendering queue) — z opóźnieniem 7-21 dni od pierwszego crawl. Nowa podstrona wchodzi do indeksu po 2-4 tygodniach zamiast godzin.

Drugi problem: Core Web Vitals. SPA ma typowy LCP 3.5-5s (czeka na JS bundle download + parse + execute + render). Google używa LCP, INP, CLS jako sygnałów rankingowych od 2021. Niski Lighthouse = niższe pozycje na konkurencyjnych frazach.

Trzeci: social sharing. Facebook, LinkedIn, Twitter scrapują OG meta tags z HTML response. Na CSR site OG tags często są w `<head>` ale puste (template hardcoded), bo dynamic content nie zdąża się wygenerować przed scrape. Wynik: brzydkie preview na social mediach, niższy CTR.

Czwarty: AI search. ChatGPT, Perplexity, Gemini crawlują strony szybciej niż Google ale gorzej obsługują JavaScript. SSR sites są cytowane częściej w AI Overviews.

Co daje Next.js z Server Components

Server-side rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR) — każdy route w Next.js domyślnie renderuje się na serwerze i wysyła do przeglądarki gotowy HTML. Google bot dostaje treść w pierwszej odpowiedzi, indeksuje natychmiast.

**Pierwsza indeksacja**: SSR/SSG 2-12 godzin, CSR 7-21 dni. Re-crawl po update content z ISR + webhook: minuty zamiast tygodni. To realna przewaga w dynamice publikacji.

**React Server Components (RSC)** — komponenty domyślnie renderują się na serwerze i NIE wysyłają JS do klienta. Klient dostaje HTML + minimalny JavaScript do interaktywności. Bundle size spada o 30-60%, LCP poniżej 1.5s nawet na średnich urządzeniach.

**Image optimization** — `next/image` automatycznie generuje WebP/AVIF, lazy loading, responsive srcset, blur placeholder, priority dla above-the-fold. Lighthouse Performance 95+ standard.

**Font optimization** — `next/font` self-hosted Google Fonts z preload, brak FOIT/FOUT, brak CLS od fontów. Detektor `font-display: swap` z `size-adjust` calculations automatic.

SEO standardy out of the box

**Sitemap.xml** — `app/sitemap.ts` generuje dynamicznie z kodu, automatycznie aktualizuje przy każdym deploy. Może czytać CMS, listę postów, slug-i serwisów.

**Robots.txt** — `app/robots.ts` z instrukcjami per crawler. Możesz allowować GoogleBot, blokować GPTBot lub odwrotnie. Granularność per route.

**Schema.org JSON-LD** per route — `Person`, `Organization`, `Service`, `Article`, `BreadcrumbList`, `FAQPage`, `LocalBusiness`. Wstrzykiwane przez `<Script type="application/ld+json">` w komponencie. Google rich snippets + AI search entity recognition działają.

**Dynamic metadata per route** — `generateMetadata()` async funkcja zwracająca title, description, OG image, Twitter card per podstronę. Czyta z CMS lub bazy danych.

**Open Graph images** — `next/og` generuje obrazki 1200x630 dla Facebook/Twitter/LinkedIn dynamicznie z React komponentu. Każda podstrona ma własny preview, nie ten sam dla wszystkich.

**Canonical URLs** — `alternates.canonical` w metadata zapobiega duplicate content przy parametrach URL, paginacji, filtracja.

Case study: migracja WordPress → Next.js

Konkretny klient: kancelaria prawna (B2B, target Wrocław + Niemcy). Stara strona na WordPress + Avada theme + WooCommerce do płatności online za konsultacje.

**Stan przed migracją** — Lighthouse Performance 47, LCP 4.2s, indeksowane 200/350 podstron, średnia pozycja głównych fraz: 14, ruch organiczny: 800 wizyt/mc, koszt Google Ads CPC: 8.50 zł.

**Migracja** — 6 tygodni, stack Next.js + Sanity (zachowany workflow redakcji) + Vercel. URL-e zachowane 1:1 (lub 301 redirects gdzie struktura uproszczona). Schema.org Service + LocalBusiness + FAQPage. Search Console submit + URL inspection dla 350 podstron.

**Stan po 6 miesiącach** — Lighthouse Performance 96, LCP 0.9s, indeksowane 350/350, średnia pozycja: 5, ruch organiczny: 2240 wizyt/mc (+180%), koszt Google Ads CPC: 5.90 zł (-30% przez lepszy Quality Score).

**Koszt migracji**: 35 tys. zł. **Zwrot z dodatkowego ruchu i tańszych ads**: 4 miesiące.

Konfiguracja Next.js pod SEO — checklist

**1. `app/layout.tsx`** — root metadata z `metadataBase`, default title template, OG defaults, Person/Organization JSON-LD.

**2. `app/sitemap.ts`** — dynamiczna generacja z listy stron + CMS posts + lista serwisów. Ostatnia modyfikacja per URL.

**3. `app/robots.ts`** — Allow GoogleBot/Bingbot/AI bots wg strategii, sitemap link.

**4. `app/[route]/page.tsx`** — per-route `generateMetadata` z title (max 65 znaków), description (150-160), canonical, OG image z `next/og`.

**5. Schema.org per typ** — Service na stronach usług, Article + BreadcrumbList + FAQPage na blogu, LocalBusiness w layoucie głównym (z geokoordynatami miasta).

**6. `next/image` z priority** dla LCP image (zwykle hero), `sizes` dla responsive.

**7. `next/font` self-hosted** z preload, brak Google Fonts CDN.

**8. Internal linking** — z każdej podstrony do powiązanych serwisów, z bloga do stron pieniężnych. Anchor text-em z głównymi keyword.

**9. Vercel Analytics + GA4 / Plausible** — monitoring real users, Core Web Vitals z Search Console.

**10. Search Console + Bing Webmaster** — verification, sitemap submit, regularne sprawdzanie coverage report.

Mit obalony: Next.js to NIE overkill dla małych stron

Powszechne nieporozumienie: 'Next.js jest dla dużych aplikacji, mała strona to overkill'. Nieprawda.

Mała strona Next.js + Vercel = 0 zł hosting + Lighthouse 95+ + indeksacja w godziny + automatic SSL + edge deployment globalny + szybsze wdrożenie niż walka z WordPress (hosting + cache plugins + Yoast + LiteSpeed config + security plugins + manual schema).

Krzywa uczenia? React Server Components są prostsze niż klasyczny React (mniej state management, mniej hooks). TypeScript łapie błędy zanim trafią do produkcji.

Cena? Owszem, Next.js dev kosztuje więcej (220-350 zł/h vs WP 100-180), ale dla strony 5-10 podstron różnica wynosi 3-5 tys. zł. Przy ruchu 1k+ wizyt/mc dodatkowy uplift z SEO często to nadrabia w pierwszym roku.

Realnie: jeśli budujesz NOWĄ stronę publiczną w 2026 i nie ma legalnego wymogu data residency w PL, default Next.js + Vercel + Sanity. To stack którego używa większość Awwwards SOTY winners, większość startupów Y Combinator, dokumentacja największych SaaS-ów.

FAQ

Najczęstsze pytania.

Czy Google indeksuje React SPA?
Tak, ale z opóźnieniem 7-21 dni i niższymi rankingami. Google bot uruchamia JS w drugiej fazie crawlu (rendering queue). Next.js z SSR daje gotowy HTML w pierwszej odpowiedzi — indeksacja w 2-12 godzin.
Ile wzrasta ruch po migracji z WordPress na Next.js?
Konkretny case z mojej praktyki: +180% ruchu organicznego w 6 miesięcy + spadek CPC w Google Ads o 30%. Wartość zależy od bazy startowej — większy uplift dla stron z niskim Lighthouse i niedoinwestowanym SEO.
Czy migracja na Next.js zachowuje pozycje SEO?
Tak, jeśli migracja zrobiona dobrze: URL-e zachowane 1:1 (lub 301 redirects), schema.org skopiowane, sitemap re-submit do Search Console, Core Web Vitals zielony. Typowy spadek 1-2 tygodnie po deploy, potem powrót i wzrost.
Czy Next.js działa z headless CMS pod SEO?
Tak, świetnie. Sanity / Contentful / Strapi dostarczają treść przez API, Next.js renderuje przy build (SSG) lub przy publikacji (ISR z webhook). Workflow redakcji = jak w WordPress, performance = jak SSG.
Co z AI search (ChatGPT, Perplexity, Gemini)?
Next.js z SSR jest cytowany przez AI bots częściej niż SPA. AI crawlery mają słabsze JS rendering niż Google. Dodatkowo schema.org + structured data zwiększają chance na entity recognition i cytowanie w AI Overviews.
Jak zmierzyć ranking poprawy po migracji?
Search Console: pozycje na docelowe frazy, CTR, kliki, impresje. PageSpeed Insights: Core Web Vitals z field data (28 dni). Senuto / Ahrefs / Semrush: pozycje na klastry fraz, organic traffic estimate. Sprawdzaj weekly przez 12-16 tygodni.

Powiązane usługi

Pogadajmy

Masz pytanie? Napisz.

Kontakt→