Next.js hat sich zum Standard-Framework für SEO-optimierte React-Anwendungen entwickelt. Mit Version 14 und dem App Router gibt es mächtige neue Features für technisches SEO. Dieser Guide zeigt Ihnen, wie Sie das Maximum aus Next.js für Ihre Rankings herausholen.
Warum Next.js für SEO?
Im Gegensatz zu reinen Client-Side React Apps bietet Next.js Server-Side Rendering (SSR) und Static Site Generation (SSG). Das bedeutet: Suchmaschinen sehen sofort vollständig gerenderte Seiten – kein Warten auf JavaScript-Ausführung, keine leeren Seiten im Cache.
SEO-Vorteile von Next.js:
- Server-Side Rendering für sofort crawlbare Inhalte
- Automatische Code-Splitting für schnelle Ladezeiten
- Built-in Image Optimization für Core Web Vitals
- Native Metadata API für konsistente Meta-Tags
- Incremental Static Regeneration (ISR) für frische Inhalte
- Edge Runtime für globale Performance
Metadata API: Der neue Standard
Mit dem App Router kommt die neue Metadata API. Statt next/head verwenden Sie jetzt ein exported metadata Objekt oder eine generateMetadata Funktion. Das ist typsicher, übersichtlicher und ermöglicht dynamische Metadaten basierend auf Daten.
Wichtig: Jede Seite sollte einen einzigartigen Title (50-60 Zeichen) und eine Description (150-160 Zeichen) haben. Verwenden Sie Keywords natürlich, nicht forciert.
Structured Data richtig implementieren
Structured Data (JSON-LD) hilft Suchmaschinen, Ihre Inhalte zu verstehen. Für Artikel verwenden Sie das Article Schema, für FAQs das FAQPage Schema. Mit Next.js können Sie diese einfach als Script-Tag mit type="application/ld+json" einbinden.
Wichtige Schema-Typen:
- Organization - Für Ihre Firmenseite
- WebSite - Mit SearchAction für Sitelinks-Searchbox
- Article - Für Blog-Posts mit Autor und Datum
- FAQPage - Für FAQ-Seiten (Featured Snippets)
- BreadcrumbList - Für Breadcrumb-Navigation
- Service - Für Ihre Dienstleistungsseiten
Core Web Vitals optimieren
Google misst LCP (Largest Contentful Paint), FID (First Input Delay) und CLS (Cumulative Layout Shift). Next.js hilft mit automatischer Optimierung, aber Sie müssen selbst auf Bildgrößen, Fonts und Layout-Stabilität achten.
Quick Wins für bessere Core Web Vitals:
- Verwenden Sie next/image mit sizes-Attribut
- Laden Sie Fonts mit next/font (kein Layout Shift)
- Setzen Sie width/height auf alle Bilder
- Lazy-loaden Sie Content unterhalb des Folds
- Minimieren Sie Third-Party-Scripts
- Verwenden Sie loading="lazy" für Iframes
Sitemap und robots.txt
Next.js 14 generiert Sitemaps automatisch mit der sitemap.ts Datei im app-Verzeichnis. Für robots.txt gibt es die robots.ts Datei. Beide werden zur Build-Zeit generiert und sind statisch gecacht.
Fazit: SEO ist kein Nachgedanke
Mit Next.js haben Sie alle Werkzeuge für erstklassiges technisches SEO. Nutzen Sie sie von Anfang an: Metadata API, Structured Data, Image Optimization, Core Web Vitals Monitoring. Ihre Rankings werden es Ihnen danken.