Posted inSEO Suchmaschinenoptimierung

SEO für Next.js-Websites

SEO für Next.js-Websites

SEO für Next.js-Websites: So rankst du 2026 (und verärgerst dabei niemanden)

Bevor wir loslegen, eine kleine Zeitansage: Am 6. August 2026 hat das Next.js-Team Version 16.3 veröffentlicht – mit Instant Navigations, einem flotteren Dev-Server und einem experimentellen Rust-basierten React Compiler. Und während die Dev-Community feiert, schauen Google & Co. schon längst nicht mehr nur auf „sauberes HTML“. Wer heute eine Next.js-Website betreibt, braucht mehr als eine schicke App Router-Struktur: Er braucht ein SEO-Konzept, das sowohl klassische Crawler als auch die neuen KI-Agenten glücklich macht. Genau darum geht’s in diesem Artikel – locker, praktisch und mit ein paar Code-Schnipseln, die du direkt klauen darfst.

Warum Next.js und SEO eigentlich ein Traumpaar sind

Next.js ist für SEO prädestiniert, weil es dir beide Welten bietet: Server Side Rendering (SSR), Static Site Generation (SSG) und sogar Edge Rendering – je nachdem, was deine Seite braucht. Suchmaschinen bekommen fertiges HTML ausgeliefert, ohne auf JavaScript-Ausführung zu warten. Das spart Zeit beim Crawlen und verhindert die berüchtigten „Ghost Pages“, die viele Client-only-React-Apps plagt.

Aber Vorsicht: Nur weil Next.js out of the box gut aussieht, heißt das noch lange nicht, dass du nichts tun musst. Die Grundlagen hängen sonst im Nichts. Hier kommt der Kram, der wirklich zählt.

1. Die Metadata API – dein SEO-Schweizer Taschenmesser

Im App Router gibt es kein next/head mehr. Stattdessen exportierst du einfach eine metadata-Konstante oder nutzt die generateMetadata-Funktion. Das ist nicht nur sauberer, sondern auch grundsolide für SEO, weil Titel, Description und Co. direkt im Server-renderten HTML landen.

// app/ueber-uns/page.tsx
export const metadata = {
  title: "Über uns | Meine Agentur für nachhaltiges Web",
  description: "Wir bauen schnelle Next.js-Websites, die Google liebt – und echte Menschen auch.",
  alternates: {
    canonical: "https://www.example.de/ueber-uns",
  },
  openGraph: {
    title: "Über uns",
    description: "Lerne unser Team kennen.",
    type: "website",
    url: "https://www.example.de/ueber-uns",
    images: ["https://www.example.de/og-ueber-uns.png"],
  },
};

Pro-Tipp: Vergebt immer einen eindeutigen title pro Seite (Richtwert: 50–60 Zeichen) und nutzt die Canonical-URLs konsequent. Und ja, Open-Graph-Tags sind kein Nice-to-have mehr – die werden von LinkedIn, WhatsApp und auch von immer mehr KI-Readern ausgewertet.

Braucht ihr dynamische Daten? Dann setzt auf generateMetadata:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.seoTitle,
    description: post.metaDescription,
    alternates: { canonical: `https://www.example.de/blog/${params.slug}` },
  };
}

2. Das viewport-Objekt – klein, aber fein

Mal ehrlich: Wer hat schon mal über das viewport nachgedacht? Die meisten nicht – bis der Lighthouse-Bericht meckert. Im App Router exportierst du viewport separat von metadata, denn ein theme-color-Tag, das in die Metadata API wandert, wird einfach ignoriert.

export const viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#0f172a",
};

3. Sitemap, Robots & Structured Data – die heilige Dreifaltigkeit

Eine sitemap.xml und eine robots.txt gehören zu den ersten Dingen, die ein Crawler sucht. In Next.js 15+ kannst du beides einfach als Datei ins app-Verzeichnis legen:

// app/sitemap.ts
export default async function sitemap() {
  const posts = await getAllPosts();
  return [
    {
      url: "https://www.example.de",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
    ...posts.map((post) => ({
      url: `https://www.example.de/blog/${post.slug}`,
      lastModified: post.updatedAt,
      changeFrequency: "monthly",
      priority: 0.7,
    })),
  ];
}
// app/robots.ts
export default function robots() {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/admin", "/_next/static"],
    },
    sitemap: "https://www.example.de/sitemap.xml",
  };
}

Und dann das Wichtigste in Zeiten von AI Overviews: Structured Data. Sorgt dafür, dass Google eure Inhalte als Rich Snippets anzeigen kann – und dass LLMs eure Seite „verstehen“, wenn sie Antworten zusammenbauen. Ein klassisches JSON-LD für einen Blogpost:

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }) {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "BlogPosting",
            headline: post.title,
            datePublished: post.publishedAt,
            dateModified: post.updatedAt,
            author: { "@type": "Organization", name: "Example GmbH" },
            mainEntityOfPage: {
              "@type": "WebPage",
              "@id": `https://www.example.de/blog/${params.slug}`,
            },
          }),
        }}
      />
      <article>...</article>
    </>
  );
}

Achtung: JSON-LD müsst ihr hier selbst bauen – Next.js liefert keine „Structured Data“-API mit. Aber genau das ist die Chance, den @id-Verweis auf eure Canonical-URL sauber zu setzen. SEO-Feingold, sag ich euch.

4. Core Web Vitals: Der schnellste Weg nach oben

Seit Google im Sommer 2025 die Seite mit den schlechteren Core Web Vitals im Serp im Search Central Blog markiert hat, ist Speed buchstäblich sichtbar geworden. In der Praxis heißt das: LCP, INP und CLS sind kein theoretisches Geschwafel mehr, sondern handfeste Ranking-Faktoren.

Next.js gibt euch dafür mächtige Werkzeuge:

  • Image Optimization: Das eingebaute next/image liefert WebP/AVIF, Lazy Loading und richtige Dimensionen – mit priority-Attribut fürs LCP-Bild.
  • ISR (Incremental Static Regeneration): Für Inhalte, die sich selten ändern, ist statisches HTML die beste Antwort auf die Frage „Wie schnell ist schnell?“
  • Streaming & Suspense: Mit loading.tsx und Suspense können kritische Inhalte sofort rendern, während langsame Teile nachlaufen.
  • Instant Navigations aus Next.js 16.3: Prefetching auf Steroiden – der erste Content nach einem Klick erscheint praktisch sofort. Das pusht euer INP enorm.
import Image from "next/image";

export default function Hero() {
  return (
    <Image
      src="/img/hero.webp"
      alt="Team arbeitet an einer Next.js-Website"
      width={1200}
      height={675}
      priority
    />
  );
}

5. Interne Verlinkung – das unterschätzte Multitalent

Next.js macht es euch mit <Link> unfassbar leicht, interne Links zu setzen – die Prefetch- und Client-Side-Navigation funktioniert mit SEO-Handicap so gut wie kaum woanders. Nutzt das! Jede Unterseite sollte von mindestens einer anderen, thematisch verwandten Seite verlinkt sein. Das verteilt Authority, hilft Google beim Verstehen eurer Seitenstruktur und sorgt dafür, dass eure Inhalte überhaupt erst „entdeckt“ werden.

6. Die neue Front: SEO für KI-Agenten & AI Overviews

2026 ist es offiziell: Es reicht nicht mehr, nur für Google zu optimieren. Die großen Suchmaschinen haben KI-Snippets, und Agenten wie ChatGPT und Perplexity crawlen Websites mit eigenen Bots. Was bedeutet das für eure Next.js-Website?

  • Klare, strukturierte Inhalte: Eine H1, logische Überschriftenhierarchie, kurze Absätze. Das ist seit 20 Jahren SEO 101 – aber jetzt geht’s auch um Maschinen, die Texte lesen statt nur indexieren.
  • Sauberes Server-Side Rendering: KI-Crawler sind oft noch ungeduldiger als Googlebot. Wenn eure Seite nur mit JavaScript zustande kommt, riskiert ihr, komplett übersehen zu werden. Next.js mit SSR/SSG ist hier im Vorteil.
  • Kontext liefern: Stellt euch die Frage: „Kann ein Bot diese Seite verstehen, wenn er sie nicht mit 15 weiteren Tabs im Browser öffnet?“ Wenn nein, verdichtet die Antworten.

7. Langfristig denken: „SEO als Marathon“

Ein letzter Tipp von mir: Betrachtet SEO nicht als einmaliges Projekt, sondern als laufenden Prozess. Next.js 16.3 ist da euer Freund – dank lastModified in der Sitemap, ISR und schnellen Rebuilds könnt ihr Inhalte regelmäßig aktualisieren, ohne die halbe Nacht an eurem Build-System zu sitzen. Und genau das belohnen Google und die neuen AI-Sucher: frische, gut strukturierte Inhalte, die schnell laden.

Also: Ran an die Metadata API, sitemap.ts rausgekramt, JSON-LD eingebaut und den Lighthouse-Bericht von der Kippe geholt. Eure Rankings – und eure KI-Crawler – werden es euch danken. Happy Ranking!