Alle Artikel
Next.js5 min

Next.js SEO Guide – Metadata, Sitemap & Indexing

Next.js hat sich als eines der führenden React-Frameworks etabliert – nicht zuletzt wegen seiner hervorragenden SEO-Funktionen. In diesem Next.js SEO Guide zeige ich dir, wie du die Metadata API, automatische Sitemaps und robots.txt optimal konfigurierst, damit deine Website von Google & Co. perfekt indexiert wird.

Warum Next.js ideal für SEO ist

Im Gegensatz zu klassischen Client-Side-React-Apps rendert Next.js deine Seiten serverseitig (SSR) oder statisch (SSG). Suchmaschinen-Crawler erhalten vollständig gerenderten HTML-Code, was die Indexierung deutlich verbessert. Seit Next.js 13 mit dem App Router macht das Framework SEO noch einfacher – durch file-based Routing und die neue Metadata API.

Die Metadata API verstehen

Die Metadata API ist das Herzstück dieses Next.js SEO Guide. Sie ersetzt die alte <Head>-Komponente durch ein typsicheres, strukturiertes System.

Statische Metadata

Für statische Seiten exportierst du ein metadata-Objekt:

// app/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Startseite – Meine Next.js App',
  description: 'Professionelle Webentwicklung mit Next.js und React',
  keywords: ['Next.js', 'React', 'Webentwicklung'],
  authors: [{ name: 'Long Huynh' }],
  openGraph: {
    title: 'Startseite',
    description: 'Professionelle Webentwicklung',
    url: 'https://example.com',
    siteName: 'Meine App',
    images: [
      {
        url: 'https://example.com/og-image.jpg',
        width: 1200,
        height: 630,
      },
    ],
    locale: 'de_DE',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Startseite',
    description: 'Professionelle Webentwicklung',
    images: ['https://example.com/twitter-image.jpg'],
  },
}

export default function HomePage() {
  return <main>Inhalt</main>
}

Dynamische Metadata

Für dynamische Routen verwendest du generateMetadata:

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'

type Props = {
  params: { slug: string }
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await fetchPost(params.slug)
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author],
      images: [post.coverImage],
    },
  }
}

Root Layout für globale SEO

Im Root Layout (app/layout.tsx) definierst du globale Metadata:

// app/layout.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://lonexa.de'),
  title: {
    default: 'Meine App',
    template: '%s | Meine App',
  },
  description: 'Standard-Beschreibung',
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  verification: {
    google: 'dein-google-verification-code',
  },
}

Die template-Eigenschaft ist besonders praktisch: Sie fügt automatisch einen Suffix an alle Titel-Seiten an.

Sitemap automatisch generieren

Ein wichtiger Teil jedes Next.js SEO Guide ist die Sitemap-Generierung. Next.js macht das unglaublich einfach:

// app/sitemap.ts
import { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = 'https://lonexa.de'
  
  // Statische Seiten
  const staticPages = [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'monthly' as const,
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: 'yearly' as const,
      priority: 0.8,
    },
  ]
  
  // Dynamische Blog-Posts
  const posts = await fetchAllPosts()
  const blogPages = posts.map(post => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
  }))
  
  return [...staticPages, ...blogPages]
}

Die Sitemap wird automatisch unter /sitemap.xml verfügbar und aktualisiert sich bei jedem Build.

robots.txt konfigurieren

Die robots.txt steuerst du ebenfalls über eine TypeScript-Datei:

// app/robots.ts
import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/admin/', '/api/'],
      },
      {
        userAgent: 'Googlebot',
        allow: '/',
        disallow: ['/admin/'],
      },
    ],
    sitemap: 'https://lonexa.de/sitemap.xml',
  }
}

Structured Data mit JSON-LD

Für Rich Snippets in den Suchergebnissen empfiehlt sich JSON-LD:

// app/blog/[slug]/page.tsx
export default function BlogPost({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    image: post.coverImage,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: {
      '@type': 'Person',
      name: post.author,
    },
  }
  
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{/* Content */}</article>
    </>
  )
}

Canonical URLs und Alternates

Für mehrsprachige Seiten oder URL-Varianten:

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://lonexa.de/blog/nextjs-seo',
    languages: {
      'de-DE': 'https://lonexa.de/de/blog/nextjs-seo',
      'en-US': 'https://lonexa.de/en/blog/nextjs-seo',
    },
  },
}

Image Optimization für SEO

Next.js optimiert Bilder automatisch, aber für SEO solltest du immer alt-Texte verwenden:

import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Next.js SEO Guide – Metadata und Sitemap Konfiguration"
  width={1200}
  height={630}
  priority
/>

Performance = SEO

Core Web Vitals sind Ranking-Faktoren. Next.js hilft mit:

  • Automatischem Code-Splitting: Jede Route lädt nur nötigen Code
  • Image Optimization: WebP-Konvertierung, Lazy Loading
  • Font Optimization: Mit next/font für besseres CLS
// app/layout.tsx
import { Inter } from 'next/font/google'

const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="de" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

Checkliste für Next.js SEO

Dieser Next.js SEO Guide zusammengefasst:

  • ✅ Metadata API in jedem Layout/Page verwenden
  • ✅ Dynamische generateMetadata für Content-Seiten
  • ✅ sitemap.ts mit allen relevanten URLs
  • ✅ robots.txt korrekt konfigurieren
  • ✅ Open Graph und Twitter Cards setzen
  • ✅ JSON-LD für Structured Data
  • ✅ Canonical URLs definieren
  • ✅ Alt-Texte für alle Bilder
  • ✅ Core Web Vitals optimieren

Google Search Console einrichten

Nach dem Deployment:

  1. Property in Google Search Console anlegen
  2. Sitemap unter /sitemap.xml einreichen
  3. URL-Inspection für wichtige Seiten durchführen
  4. Core Web Vitals überwachen

Fazit

Mit diesem Next.js SEO Guide hast du alle Werkzeuge, um deine Next.js-App suchmaschinenfreundlich zu gestalten. Die Metadata API, automatische Sitemaps und typsichere Konfiguration machen SEO in Next.js deutlich einfacher als in klassischen React-Apps.

Der Schlüssel liegt in der Kombination: Technisch saubere Implementation plus hochwertiger Content. Next.js liefert dir das Framework – den Rest machst du.

Du arbeitest an einem Next.js-Projekt und brauchst Unterstützung bei SEO-Optimierung oder Performance? Ich helfe dir gerne.

Next.js SEO GuideNext.jsFreelancerWebentwicklungDüsseldorf
Anfrage senden