Next.js SEO-Prüfer

Prüfen Sie Ihre Next.js-Website auf SSR-, Rendering-, Metadaten- und Crawlbarkeits-Probleme. Über 20 Prüfungen in 7 Kategorien.

Das größte Next.js SEO-Problem

Die übermäßige Verwendung von "use client"-Direktiven führt dazu, dass Inhalte nur im Browser gerendert werden. Suchmaschinen und KI-Crawler (ChatGPT, Claude, Perplexity) sehen möglicherweise nur eine leere HTML-Hülle anstelle Ihrer Inhalte.

  • SSR- vs. CSR-Probleme erkennen
  • Metadaten-Verfügbarkeit prüfen
  • Core Web Vitals analysieren

Funktioniert am besten mit Next.js-Websites, kann aber jede Website analysieren

Häufig gestellte Fragen

Was prüft dieses Tool?

Dieses Tool führt über 20 SEO-Prüfungen in 7 Kategorien durch:

  • Rendering & SSR: Erkennt leere HTML-Hüllen, Client-seitiges Rendering, Hydration-Probleme
  • Metadaten & Head: Titel, Beschreibung, Open Graph, Canonical, Viewport
  • Performance: Core Web Vitals (FCP, LCP, TTFB), Render-blockierende Ressourcen
  • Bilder: Alt-Text, next/image-Verwendung, Lazy Loading
  • Strukturierte Daten: JSON-LD Schema-Markup-Validierung
  • Crawlbarkeit: Robots-Meta, interne Links, Hreflang
  • Semantisches HTML: Überschriften, Landmarks, ARIA-Attribute

Warum ist SSR/SSG wichtig für SEO?

Suchmaschinen und KI-Crawler sehen zunächst nur das reine HTML von Ihrem Server. Wenn Ihr Inhalt nur über JavaScript (Client-seitig) gerendert wird, sehen Crawler möglicherweise eine leere Seite. Server-Side Rendering (SSR) oder Static Site Generation (SSG) stellt sicher, dass Ihr Inhalt in der initialen HTML-Antwort enthalten ist.

Was ist das Problem der "Leeren HTML-Hülle"?

Dies tritt auf, wenn Ihre Next.js-App minimales HTML zurückgibt und der Inhalt vollständig über JavaScript geladen wird. Häufige Ursachen:

  • Übermäßige Verwendung von "use client"-Direktiven
  • Keine Verwendung von getServerSideProps oder getStaticProps
  • Datenabruf nur in useEffect-Hooks

Wie behebe ich Rendering-Probleme?

Um sicherzustellen, dass Inhalte für Crawler verfügbar sind:

  • Pages Router: Verwenden Sie getServerSideProps oder getStaticProps
  • App Router: Belassen Sie Komponenten standardmäßig als Server-Komponenten, fügen Sie "use client" nur bei Bedarf hinzu
  • Datenabruf: Rufen Sie kritische Daten Server-seitig ab, nicht in useEffect
  • Metadata: Verwenden Sie next/head oder die Metadata-API