19. Januar 2026

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

App Router, Metadata API, Server Components: So stellst du sicher, dass Google deine Next.js-Website sauber crawlt, rendert und richtig versteht.

Next.js SEO und technische Optimierung
Technisches SEO ist in Next.js schnell gelöst – wenn die Basics stimmen.

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.

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.

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.

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.

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 erklärt

5) Crawlability: Sitemap, Robots, interne Links

Du willst:

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

Nächster Schritt

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

Weiterlesen

Server Components vs Client Components: Das SEO- & Performance-Mindset für Next.js
Warum die richtige Aufteilung (Server/Client) dein JS-Budget, deine Core Web Vitals und am Ende auch deine Rankings beeinflusst.
TTFB, CDN & Caching: Wie du Ladezeit-SEO wirklich beschleunigst
Wenn deine Seite sich "zäh" anfühlt, ist es oft TTFB + Caching. So denkst du CDNs, Cache-Control, Revalidation und Deployment richtig.
Onepager: Wann sinnvoll – und wann du dir damit SEO kaputt machst
Onepager sind schnell – aber nicht immer klug. Hier ist die ehrliche Entscheidungsmatrix: Ziel, SEO, Content-Struktur und Conversion.

Passend dazu

Webseiten
Webdesign & Entwicklung für Websites, die konvertieren.
Services
SEO, Performance, Tracking & laufende Optimierung.

FAQ

Ist Next.js gut für SEO?
Ja – wenn du SSR/SSG richtig nutzt, Metadata sauber setzt und unnötigen Client-JS vermeidest. Dann bekommst du schnelle HTML-Auslieferung + gute Crawlability.
Muss ich für SEO alles serverseitig rendern?
Die wichtigen Inhalte und Links sollten im HTML stehen. Interaktive Extras können clientseitig sein, solange der Kern der Seite serverseitig verfügbar bleibt.
Wie setze ich Titles/Descriptions korrekt im App Router?
Über `export const metadata` oder `generateMetadata()` pro Route. Das ist serverseitig und wird zuverlässig im HTML ausgeliefert.
Schadet zu viel JavaScript dem SEO?
Meist indirekt: mehr JS = langsamere Nutzererfahrung, schlechtere Core Web Vitals, höhere Absprungrate. Das kann Rankings und Conversion drücken.
Was sind die häufigsten SEO-Fallen bei Next.js?
Fehlende interne Links (Buttons statt Links), falsche Canonicals, zu viel Client Components, Bilder ohne Optimierung und keine saubere Sitemap/Robots.