Next.js SEO 2026 (App Router): Was wirklich zählt – technisch & praktisch

Next.js ist SEO-stark – aber nicht automatisch. Im App Router ist vieles sauber gelöst (Metadata API, SSG/SSR), trotzdem gibt’s typische Fallen.

Dieser Guide ist bewusst praktisch: Was musst du in Next.js (App Router) wirklich tun, damit Google deine Seiten crawlen, indexieren und richtig verstehen kann?

Quick-Check (2 Minuten)

Wenn du nur schnell prüfen willst, ob die Basics stimmen:

• Ist der Hauptinhalt ohne JS im HTML sichtbar?
• Sind Navigation & CTA echte Links (kein Button ohne Link)?
• Gibt es saubere Canonicals?
• Sind robots.txt und sitemap.xml erreichbar?
• Werden Bilder optimiert und verursachen kein CLS?

Wenn hier 2+ Punkte wackeln, lohnt sich ein sauberer Fix.

0) SEO in Next.js richtig denken: Crawl → Render → Index

Google muss:

1. die URL finden (interne Links, Sitemap)
2. sie crawlen (Statuscodes, Robots)
3. sie rendern (HTML + ggf. JS)
4. sie indexieren (Meta Robots, Canonical, Duplicate Content)

Next.js kann das hervorragend – aber nur, wenn du die Signale sauber auslieferst.

1) Inhalte & Links müssen im HTML sein

Google kann JS rendern, aber: Crawl-Budget + Rendering-Kosten sind real. Dein Ziel:

• Haupttext im initialen HTML
• Navigation als echte Links (<a href> / next/link)
• Keine „versteckten“ Inhalte nur in Interaktionen

Wenn du Section-Navigation hast (z.B. /#team-section), nutze echte Links – SEO-Tools und Crawler zählen das als interne Verlinkung.

Interne Links: typische Fehler (und Fix)

• Fehler: CTA ist ein Button, der per JS navigiert → Fix: next/link nutzen.
• Fehler: Inhalte sind in Tabs/Accordion komplett „weg“ → Fix: Inhalte serverseitig rendern, UI nur als Enhancement.
• Fehler: Infinite Scroll ohne echte URLs → Fix: Pagination oder „Load more“ mit indexierbaren URLs.

Wenn du Content strategisch aufbauen willst (und nicht nur einzelne Artikel): Interne Links & Topic Cluster.

2) Metadata API richtig nutzen

Im App Router sind Title/Description serverseitig.

• Global: app/layout.jsx
• Pro Seite: export const metadata = { ... }
• Dynamisch: generateMetadata()

Wichtig: Canonical pro Blogpost/Seite korrekt setzen, sonst verwässerst du Signale.

Canonical: wann ist es kritisch?

• gleiche Inhalte unter mehreren URLs (z.B. Parameter, Tracking-URLs)
• mit/ohne Slash, www/non-www, http/https (sollte per Redirect gelöst sein)
• Pagination, Filter, Sortierung

Wenn du viele Parameter/Filter hast, brauchst du eine klare Index-Strategie (welche URLs dürfen rein, welche nicht).

3) Indexierung: Robots, Meta Robots, Statuscodes

Das klingt banal, ist aber ein häufiger Relaunch-Killer.

Robots & Meta Robots

• robots.txt darf nicht versehentlich wichtige Bereiche blockieren.
• Meta Robots pro Seite: index,follow für indexierbare Seiten.
• Staging darf blockiert sein – Produktion nicht.

Statuscodes

• 200 für normale Seiten
• 404 für nicht vorhandene Inhalte (und eine hilfreiche 404-Seite)
• 301/308 für dauerhafte Weiterleitungen

Wenn du eine Launch-Checkliste willst: Website Launch Checkliste.

3) Server Components vs Client Components

Faustregel:

• Alles, was nur anzeigen muss: Server Component
• Client Component nur für echte Interaktion (Filter, Animationen)

So reduzierst du JS und verbesserst Core Web Vitals.

Praxisregel: Wenn dein Text/Content erst nach useEffect erscheint, ist das ein Warnsignal.

4) Bilder: LCP & CLS sind Ranking-/Conversion-Hebel

Große Hero-Bilder sind oft dein LCP. Fixes:

• sinnvolle Größen, komprimiert
• width/height setzen (verhindert CLS)
• lazy-loading nur da, wo es Sinn macht

Mehr dazu:

• Core Web Vitals verständlich erklärt
• LCP: Bilder in Next.js optimieren

5) Crawlability: Sitemap, Robots, interne Links

Du willst:

• /sitemap.xml aktuell
• /robots.txt sauber
• pro Content-Seite sinnvolle interne Links

Sitemap: was rein sollte (und was nicht)

• rein: indexierbare Seiten (Leistungen, Blogposts, Case Studies)
• raus: Filter-/Sortier-URLs, interne Suchseiten, Parameter-URLs

Wenn du dir unsicher bist: Robots & Sitemap richtig nutzen.

6) Structured Data (JSON-LD): wann es Sinn macht

Structured Data bringt nicht „automatisch“ Ranking – aber hilft Google beim Verstehen und kann Rich Results unterstützen.

Typische Schema-Typen:

• Blog: Article
• Unternehmen: Organization / LocalBusiness
• Navigation: BreadcrumbList

Wichtig: Nur auszeichnen, was wirklich stimmt (keine Fake-Reviews).

Guide dazu: Structured Data / JSON-LD lokal.

7) Pagination, Filter, Parameter: SEO-Strategie statt Chaos

Viele Next.js-Projekte bekommen Duplicate Content, weil Filter-URLs indexiert werden.

Saubere Ansätze:

• Nur die „Hauptseite“ indexieren, Filter auf noindex (oder per Robots blocken), wenn sie keinen eigenen Suchintent haben.
• Wenn Filter-Seiten eigenen Suchintent haben: als echte Landingpages bauen (sauberer Content, eigener Title, interne Links).

8) Messen & Debuggen: so findest du SEO-Probleme schnell

• Search Console: Indexierung, Abdeckung, Core Web Vitals
• URL-Prüfung: sieht Google die Seite wie erwartet?
• „site:domain.de“ grob für Sichtbarkeit (kein exaktes Tool, aber schnell)
• Logik: „Kann ein Bot alles finden, ohne zu klicken?“

Häufige Next.js SEO-Fallen (Checkliste)

• CTA/Navi sind Buttons statt Links
• Canonical falsch oder fehlt
• noindex aus Staging in Produktion übernommen
• Sitemap enthält Parameter/Filter-URLs
• zu viele Client Components → unnötiges JS
• Bilder ohne feste Größe → CLS
• Tracking/Third-Party bremst die Seite

Wenn Tracking ein Thema ist, mach es sauber: Cookie-Banner & Tracking DSGVO-konform.

Nächster Schritt

Wenn du willst, schauen wir einmal technisch drüber (Metadata, Canonicals, CWV, Indexierung) und priorisieren die 20%-Hebel.

• Kontakt
• Webseiten
• Services