Next.js hat sich als das führende Framework für React-Anwendungen etabliert – und das hat auch SEO-Gründe. Klassische React-Apps rendern ihre Inhalte clientseitig: Was der Browser sieht, sieht Google erst nach einem aufwendigen Render-Prozess. Next.js löst dieses Problem mit Server-Side Rendering und Static Site Generation. Das Ergebnis sind schnelle, sofort indexierbare Websites – der direkte Weg zu besseren Rankings. Dieser Artikel zeigt, wie Sie das volle SEO-Potenzial von Next.js ausschöpfen.
Warum Next.js SEO besser macht als reines React
Bei einer Standard-React-App liefert der Server nur eine fast leere HTML-Datei mit einem JavaScript-Bundle. Der Inhalt erscheint erst nach der Ausführung des JavaScripts im Browser. Für Google bedeutet das: Crawlen, in die Render-Warteschlange einreihen, Tage später rendern, indexieren.
Next.js bietet drei Rendering-Ansätze, die das ändern:
Server-Side Rendering (SSR): Der Server rendert die Seite vollständig bei jeder Anfrage und liefert fertiges HTML. Google erhält den kompletten Inhalt beim ersten Crawl.
Static Site Generation (SSG): Seiten werden beim Build zu statischen HTML-Dateien kompiliert. Kein Server-Rendering bei jeder Anfrage – die Dateien werden direkt ausgeliefert. Schnellste Option für Inhalte, die sich selten ändern.
Incremental Static Regeneration (ISR): Statische Seiten werden im Hintergrund nach einem Zeitintervall neu generiert – ohne vollständigen Build. Ideal für Inhalte, die sich regelmäßig ändern.
Next.js-Websites werden im Schnitt 3–5x schneller von Google indexiert als reine Client-Side-React-Anwendungen – SSG-Seiten sofort, SSR-Seiten innerhalb von Stunden.
Metadata in Next.js App Router
Ab Next.js 13 mit dem App Router gibt es eine dedizierte Metadata API. Kein Herumbasteln mit <Head>-Tags mehr – Metadata wird in der Komponente direkt exportiert.
Statische Metadata:
export const metadata = {
title: 'Seitentitel – Markenname',
description: 'Meta Description max. 155 Zeichen.',
openGraph: {
title: 'OG-Titel',
description: 'OG-Beschreibung',
images: [{ url: '/og/seite.png' }],
},
};Dynamische Metadata (z. B. für Blog-Artikel):
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.description,
};
}Achten Sie darauf, dass jede Seite eine einzigartige title und description hat. Duplicate Title Tags sind ein häufiger SEO-Fehler bei Next.js-Projekten, der bei technischen SEO-Audits regelmäßig auftaucht.
Nutzen Sie die `metadataBase`-Option in der Root-Layout.tsx, um eine Basis-URL zu setzen. Dann können Sie in Metadata-Objekten relative Pfade für Open-Graph-Bilder verwenden, ohne die vollständige URL wiederholen zu müssen.
Sitemap und robots.txt automatisch generieren
Next.js 13.3+ kann Sitemaps und robots.txt über spezielle Dateien im app/-Verzeichnis automatisch generieren.
Sitemap.xml:
Erstellen Sie app/sitemap.ts:
export default async function sitemap() {
const posts = await getAllPosts();
return posts.map((post) => ({
url: `https://ihredomain.de/blog/${post.slug}`,
lastModified: post.date,
changeFrequency: 'monthly',
priority: 0.8,
}));
}Next.js rendert diese Datei automatisch unter /sitemap.xml. Reichen Sie die URL in der Google Search Console ein.
robots.txt:
Erstellen Sie app/robots.ts:
export default function robots() {
return {
rules: { userAgent: '*', allow: '/' },
sitemap: 'https://ihredomain.de/sitemap.xml',
};
}Canonical Tags richtig setzen
In Next.js können Canonical Tags in der Metadata-API gesetzt werden:
export const metadata = {
alternates: {
canonical: 'https://ihredomain.de/seite/',
},
};Setzen Sie Canonical Tags auf allen Seiten – besonders wichtig wenn Ihre Seiten mit und ohne Trailing Slash oder mit Query-Parametern erreichbar sind. Das verhindert Duplicate Content.
Strukturierte Daten (Schema.org)
Next.js macht es einfach, JSON-LD Schema-Markup in den <head> zu injizieren:
export default function BlogPost({ post }) {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: post.title,
datePublished: post.date,
author: { '@type': 'Organization', name: 'SEOFX' },
}),
}}
/>
{/* Seiteninhalt */}
</>
);
}Strukturierte Daten ermöglichen Rich Snippets in den Suchergebnissen – Sternebewertungen, FAQs, Breadcrumbs. Das kann die Klickrate deutlich steigern.
Das `dangerouslySetInnerHTML` bei JSON-LD ist in diesem Kontext sicher – Sie injizieren selbst erzeugten, kontrollierten JSON-Code. Es ist der offizielle Weg in React/Next.js um strukturierte Daten einzubinden. Achten Sie aber darauf, keine Nutzereingaben direkt einzubetten.
Bildoptimierung mit next/image
Die next/image-Komponente optimiert Bilder automatisch für SEO:
- Lazy Loading standardmäßig aktiv
- Automatische Größenanpassung für verschiedene Viewport-Größen
- WebP-Konvertierung wenn der Browser es unterstützt
- Verhindert Layout Shifts (CLS) durch automatische
width/height-Dimensionen
import Image from 'next/image';
<Image
src="/images/hero.jpg"
alt="Beschreibender Alt-Text für SEO"
width={1200}
height={630}
priority // für above-the-fold Bilder
/>Das priority-Attribut nutzen Sie für das erste sichtbare Bild (above the fold) – es wird preloaded und verbessert den LCP.
Häufige SEO-Fehler in Next.js-Projekten
Kein alt-Attribut: Next.js erzwingt alt bei next/image – bei nativen <img>-Tags nicht. Prüfen Sie alle Bilder.
Fehlende Canonical-Tags: Besonders bei E-Commerce mit Filterkombinationen explodiert die Anzahl der URLs ohne Canonical.
Zu langsame Bundle-Größe: Große JavaScript-Bundles verschlechtern die Core Web Vitals. Nutzen Sie next/dynamic für Code Splitting bei selten genutzten Komponenten.
Missing generateStaticParams: Bei dynamischen Routen mit [slug] muss generateStaticParams definiert sein, damit die Seiten statisch generiert werden können. Ohne diese Funktion rendert Next.js dynamisch – mit langsamerer TTFB.
Bei Next.js-Audits finden wir in 70 % der Projekte fehlende oder doppelte Meta-Descriptions und unvollständige Open-Graph-Tags – beides lässt sich mit der Metadata-API in Stunden beheben.
Performance und Core Web Vitals
Next.js hat gute Ausgangswerte für Core Web Vitals, aber eine schlechte Implementierung kann das zunichtemachen. Prüfen Sie:
- Verwenden Sie Schriften über
next/font(eliminiert layout shifts durch Schriftladung) - Aktivieren Sie Image Optimization (Standard, nicht deaktivieren)
- Nutzen Sie
<Suspense>-Boundaries um Ladezeiten zu parallelisieren - Messen Sie mit Lighthouse und dem PageSpeed Insights Tool
Wenn Sie JavaScript-SEO-Probleme aus einer Legacy-React-Anwendung kennen, löst ein Wechsel zu Next.js mit SSG oder SSR diese Probleme strukturell – statt sie zu bekämpfen.