Narzędzie do sprawdzania SEO Next.js

Przeprowadź audyt swojej witryny Next.js pod kątem problemów z SSR, renderowaniem, metadanymi i możliwością indeksowania. Ponad 20 kontroli w 7 kategoriach.

Problem SEO numer 1 w Next.js

Nadmierne użycie dyrektyw „użyj klienta” powoduje, że treść jest wyświetlana tylko w przeglądarkach. Wyszukiwarki i roboty AI (ChatGPT, Claude, Perplexity) mogą zamiast treści zobaczyć pustą powłokę HTML.

  • Wykryj problemy SSR i CSR
  • Sprawdź dostępność metadanych
  • Analizuj podstawowe wskaźniki internetowe

Działa najlepiej z witrynami Next.js, ale może analizować dowolną witrynę

Często zadawane pytania

Co sprawdza to narzędzie?

To narzędzie wykonuje ponad 20 kontroli SEO w 7 kategoriach:

  • Renderowanie i SSR: Wykrywa puste powłoki HTML, renderowanie tylko dla klienta, problemy z nawodnieniem
  • Metadane i head: Tytuł, opis, otwarty wykres, kanoniczny, rzutnia
  • Wydajność: Podstawowe wskaźniki internetowe (FCP, LCP, TTFB), zasoby blokujące renderowanie
  • Obrazy: Tekst alternatywny, użycie następnego/obrazu, leniwe ładowanie
  • Dane strukturalne: Weryfikacja znaczników schematu JSON-LD
  • Możliwość indeksowania: Robots meta, linki wewnętrzne, hreflang
  • Semantyczny HTML: Nagłówki, punkty orientacyjne, atrybuty ARIA

Dlaczego SSR/SSG jest ważne dla SEO?

Wyszukiwarki i roboty AI początkowo widzą tylko nieprzetworzony kod HTML z Twojego serwera. Jeśli Twoja treść jest renderowana tylko za pomocą JavaScript (po stronie klienta), roboty indeksujące mogą zobaczyć pustą stronę. Renderowanie po stronie serwera (SSR) lub statyczne generowanie witryny (SSG) zapewniają, że Twoja treść znajdzie się w początkowej odpowiedzi HTML.

Na czym polega problem „Pusta powłoka HTML”?

Dzieje się tak, gdy aplikacja Next.js zwraca minimalny kod HTML z treścią ładowaną w całości za pomocą JavaScript. Najczęstsze przyczyny:

  • Nadmierne używanie dyrektyw „użyj klienta”.
  • Nieużywanie getServerSideProps ani getStaticProps
  • Pobieranie danych tylko w hakach useEffect

Jak rozwiązać problemy z renderowaniem?

Aby mieć pewność, że treść będzie dostępna dla robotów:

  • Router stron: Użyj getServerSideProps lub getStaticProps
  • Router aplikacji: Domyślnie zachowaj komponenty jako komponenty serwera, dodaj opcję „użyj klienta” tylko w razie potrzeby
  • Pobieranie danych: Pobierz krytyczne dane po stronie serwera, a nie w useEffect
  • Metadane: Użyj next/head lub API metadanych