Kurz gesagt: Die wichtigsten Hebel sind Metadaten pro Seite über die Metadata API, eine Sitemap aus dem Code, strukturierte Daten als JSON-LD, Rendering auf dem Server statt im Browser und gute Core Web Vitals durch
next/imageundnext/font.
Einleitung
Next.js bringt viel mit, was Suchmaschinen gefällt: HTML vom Server, schnelle Ladezeiten und Werkzeuge für Metadaten und Sitemaps. Automatisch gut gefunden wird eine Seite dadurch aber nicht. In diesem Artikel zeige ich dir die Maßnahmen, die in der Praxis den größten Unterschied machen. Die Code-Beispiele beziehen sich auf den App Router der aktuellen Next.js-Versionen. Die meisten davon nutze ich auch auf dieser Website.
Warum SEO für Next.js wichtig ist
Next.js bietet von Haus aus viele Funktionen, die SEO-freundlich sind, wie z.B. Server-Side Rendering (SSR) und Static Site Generation (SSG). Diese Funktionen verbessern die Ladezeiten und die Indexierbarkeit deiner Website, was zu besseren Rankings in den Suchmaschinen führt. Worin sich Next.js dabei von einer reinen React-Anwendung unterscheidet, erkläre ich in meinem Vergleich Next.js vs. React.
Vorteile von Next.js für SEO
- Server-Side Rendering (SSR): Verbessert die Ladezeiten und die Indexierbarkeit.
- Static Site Generation (SSG): Erzeugt statische HTML-Dateien, die schnell geladen werden.
- Automatisches Code-Splitting: Reduziert die Größe der JavaScript-Dateien.
- Integrierte Image Optimization: Optimiert Bilder für schnelle Ladezeiten.
Best Practices für SEO-Optimierung in Next.js
1. Meta-Tags und Structured Data
Meta-Tags und strukturierte Daten sind entscheidend für die Suchmaschinenoptimierung. Next.js bietet einfache Möglichkeiten, diese zu implementieren.
Beispiel für Meta-Tags
Im App Router legst du Metadaten über die Metadata API fest. Dazu exportierst du in einer page.tsx oder layout.tsx ein Objekt namens metadata:
// app/page.tsximport type { Metadata } from 'next'; export const metadata: Metadata = { title: 'SEO-optimierte Next.js-Website', description: 'Erfahre, wie du deine Next.js-Website für Suchmaschinen optimierst.', alternates: { canonical: 'https://www.example.com/', }, openGraph: { title: 'SEO-optimierte Next.js-Website', description: 'Erfahre, wie du deine Next.js-Website für Suchmaschinen optimierst.', images: ['/images/seo-optimierung-nextjs.jpg'], },}; export default function HomePage() { return <h1>Willkommen auf meiner SEO-optimierten Next.js-Website</h1>;}Für Seiten mit dynamischen Inhalten, etwa Blogartikel oder Produktseiten, nutzt du stattdessen die Funktion generateMetadata, die Titel und Beschreibung aus deinen Daten erzeugt. Im älteren Pages Router setzt du Meta-Tags weiterhin mit der Komponente aus next/head. Auf das Meta-Tag keywords kannst du verzichten, Google berücksichtigt es nicht für das Ranking.
Beispiel für strukturierte Daten
Strukturierte Daten nach Schema.org helfen Suchmaschinen, den Inhalt einer Seite zu verstehen, und können zu erweiterten Suchergebnissen führen. In Next.js bindest du sie als JSON-LD direkt in der Seite ein:
// app/blog/[slug]/page.tsx (vereinfacht)export default function BlogPost() { const jsonLd = { '@context': 'https://schema.org', '@type': 'Article', headline: 'SEO für Next.js', datePublished: '2024-12-27', author: { '@type': 'Person', name: 'Max Mustermann' }, }; return ( <article> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'), }} /> <h1>SEO für Next.js</h1> </article> );}Das Ersetzen der öffnenden spitzen Klammer schützt vor eingeschleustem HTML, falls Werte aus externen Quellen stammen. Ob deine Daten korrekt erkannt werden, prüfst du mit dem Test für Rich-Suchergebnisse von Google.
2. Performance-Optimierung
Die Ladegeschwindigkeit einer Website ist ein wichtiger Rankingfaktor. Google misst die Nutzererfahrung mit den Core Web Vitals:
- Largest Contentful Paint (LCP): Wie schnell das größte sichtbare Element geladen ist
- Interaction to Next Paint (INP): Wie schnell die Seite auf Eingaben reagiert
- Cumulative Layout Shift (CLS): Wie stark sich das Layout beim Laden verschiebt
Next.js bietet mehrere Möglichkeiten, diese Werte zu verbessern.
Tipps zur Performance-Optimierung
- Bildoptimierung: Verwende die integrierte Komponente aus
next/image. Sie liefert passende Größen und moderne Formate aus und verhindert Layout-Verschiebungen, weil sie den Platz für das Bild reserviert. - Schriften: Binde Schriften mit
next/fontein. Next.js hostet sie dann selbst und vermeidet sichtbare Sprünge beim Laden. - Server Components: Rendere so viel wie möglich auf dem Server, damit weniger JavaScript im Browser landet. Das verbessert vor allem INP.
- Skripte von Drittanbietern: Lade Analytics, Chat-Widgets und Werbung mit
next/scriptund der StrategieafterInteractiveoderlazyOnload, damit sie den Seitenaufbau nicht blockieren. - Code-Splitting: Nutze dynamische Imports, um nur den notwendigen Code zu laden.
- Caching: Implementiere Caching-Strategien für statische Assets.
3. Das passende Rendering wählen
Next.js lässt dich pro Seite entscheiden, wann das HTML entsteht. Für SEO ist wichtig, dass Suchmaschinen den Inhalt direkt im HTML vorfinden:
- Statisch (SSG): Das HTML wird beim Build erzeugt. Ideal für Inhalte, die sich selten ändern, etwa Landingpages, Dokumentation oder Blogartikel.
- Inkrementell (ISR): Statische Seiten werden nach einem festgelegten Zeitraum oder auf Anforderung neu erzeugt. Gut für Produktseiten oder Blogs mit häufigen Updates.
- Dynamisch (SSR): Das HTML wird bei jeder Anfrage auf dem Server erzeugt. Sinnvoll für Inhalte, die immer aktuell sein müssen.
- Nur im Browser (CSR): Inhalte, die erst im Browser per JavaScript geladen werden, sind für Suchmaschinen schwerer zugänglich. Nutze das nur für Bereiche, die nicht in den Suchergebnissen erscheinen müssen, etwa ein Nutzer-Dashboard.
4. Mobile Optimierung
Da immer mehr Nutzer über mobile Geräte auf Websites zugreifen, ist eine mobile Optimierung unerlässlich.
Mobile Best Practices
- Responsive Design: Stelle sicher, dass deine Website auf allen Geräten gut aussieht.
- Touch-Friendly Elements: Gestalte interaktive Elemente für Touchscreens.
- Mobile-First-Indexierung: Google bewertet vorrangig die mobile Version deiner Seite. Achte darauf, dass dort alle wichtigen Inhalte, Metadaten und strukturierten Daten vorhanden sind.
- App-Erlebnis: Wenn Nutzer deine Seite wie eine App installieren sollen, hilft dir meine Anleitung PWA mit Next.js erstellen.
5. Technische SEO
Technische SEO bezieht sich auf die Optimierung der technischen Aspekte einer Website, um die Indexierbarkeit zu verbessern.
Technische SEO-Tipps
- Sitemap: Erstelle eine XML-Sitemap und reiche sie in der Google Search Console ein.
- Robots.txt: Konfiguriere die
robots.txt-Datei, um Suchmaschinen-Crawlern den Zugriff zu erlauben oder zu verweigern. - Canonical Tags: Verwende Canonical Tags, um Duplicate Content zu vermeiden. Im App Router setzt du sie über
alternates.canonicalin den Metadaten (siehe Beispiel oben).
Beispiel für Sitemap und robots.txt
Im App Router erzeugst du beide Dateien direkt aus dem Code. Next.js liefert sie dann unter /sitemap.xml und /robots.txt aus:
// app/sitemap.tsimport type { MetadataRoute } from 'next'; export default function sitemap(): MetadataRoute.Sitemap { return [ { url: 'https://www.example.com', lastModified: new Date() }, { url: 'https://www.example.com/blog', lastModified: new Date() }, ];}// app/robots.tsimport type { MetadataRoute } from 'next'; export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://www.example.com/sitemap.xml', };}Bei vielen Seiten liest du die URLs in sitemap.ts aus deiner Datenquelle aus, zum Beispiel aus dem CMS oder den Markdown-Dateien deines Blogs.
6. Content-Optimierung
Qualitativ hochwertiger und relevanter Content ist der Schlüssel zu guten SEO-Rankings.
Content-Optimierungstipps
- Keyword-Recherche: Finde relevante Keywords für deine Nische.
- Qualitativ hochwertiger Content: Erstelle informative und ansprechende Inhalte.
- Interne Verlinkung: Verlinke verwandte Inhalte, um die Nutzerbindung zu erhöhen.
- Aktualität zeigen: Halte wichtige Artikel aktuell und gib das Änderungsdatum in der Sitemap (
lastModified) und in den strukturierten Daten (dateModified) an. Jahreszahlen in URLs solltest du vermeiden, sonst wirkt der Artikel im nächsten Jahr veraltet. - Erfolg messen: Beobachte, wie sich Besucherzahlen und Einstiegsseiten entwickeln. Datenschutzfreundlich geht das zum Beispiel mit Umami als Alternative zu Google Analytics.
Fazit
Next.js nimmt dir bei SEO viel technische Arbeit ab, aber nicht alles. Setze Metadaten und Canonical-URL für jede Seite, liefere wichtige Inhalte als HTML vom Server aus, erzeuge Sitemap und robots.txt aus dem Code und behalte die Core Web Vitals im Blick. Den Rest entscheidet der Inhalt: hilfreiche, aktuelle Artikel, die gut miteinander verlinkt sind.