Next.js SEO Guide – Metadata, Sitemap & AI-ready Data

Next.js hat sich als bevorzugtes React-Framework für produktionsreife Webanwendungen etabliert. Doch selbst die schnellste App nützt wenig, wenn sie von Suchmaschinen nicht gefunden wird. Dieser Next.js SEO Guide zeigt dir, wie du mit der Metadata API, dynamischen Sitemaps und strukturierten Daten eine solide SEO-Grundlage schaffst – inklusive KI-Optimierung für moderne Search Engines.

Warum SEO in Next.js besonders ist

Next.js bietet durch Server-Side Rendering (SSR) und Static Site Generation (SSG) entscheidende Vorteile gegenüber klassischen Client-Side-React-Apps:

Vollständiger HTML-Content beim ersten Request
Schnellere Ladezeiten durch automatisches Code-Splitting
Flexible Rendering-Strategien pro Route

Trotzdem musst du SEO aktiv implementieren. Dieser Next.js SEO Guide konzentriert sich auf den App Router (Next.js 13+), zeigt aber auch Pages Router Alternativen.

Metadata API: Der moderne Weg zu Title & Meta-Tags

Die Metadata API im App Router ist type-safe und vermeidet Boilerplate. Du exportierst ein metadata-Objekt oder eine generateMetadata-Funktion aus deinen Layout- oder Page-Komponenten.

Statische Metadata

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

export const metadata: Metadata = {
  title: 'Tech Blog | lonexa.de',
  description: 'Tutorials zu Next.js, TypeScript und modernem Webdev',
  keywords: ['Next.js', 'TypeScript', 'React', 'SEO'],
  authors: [{ name: 'Long Huynh' }],
  openGraph: {
    title: 'Tech Blog',
    description: 'Praktische Entwickler-Tutorials',
    type: 'website',
    locale: 'de_DE',
    url: 'https://lonexa.de/blog',
    images: [
      {
        url: '/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'lonexa.de Tech Blog',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Tech Blog',
    description: 'Praktische Entwickler-Tutorials',
    images: ['/og-image.jpg'],
  },
};

export default function BlogPage() {
  return <main>{/* Content */}</main>;
}

Dynamische Metadata

Für Blog-Artikel oder Produktseiten brauchst du dynamische Werte:

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

interface Props {
  params: { slug: string };
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await fetchPost(params.slug);
  
  return {
    title: `${post.title} | lonexa.de`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.publishedAt,
      authors: ['Long Huynh'],
      images: [post.coverImage],
    },
    alternates: {
      canonical: `https://lonexa.de/blog/${params.slug}`,
    },
  };
}

async function fetchPost(slug: string) {
  // Datenbank-Abfrage oder CMS-Call
  return {
    title: 'Next.js SEO Guide',
    excerpt: 'Kompletter Leitfaden für SEO in Next.js',
    publishedAt: '2025-01-15',
    coverImage: '/covers/nextjs-seo.jpg',
  };
}

Wichtig für diesen Next.js SEO Guide: alternates.canonical verhindert Duplicate Content Issues, besonders bei Query-Parametern.

Dynamische XML-Sitemap generieren

Eine Sitemap hilft Suchmaschinen, alle wichtigen URLs zu crawlen. Next.js bietet eine sitemap.ts Convention:

// 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 postPages = posts.map((post) => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
  }));
  
  return [...staticPages, ...postPages];
}

async function fetchAllPosts() {
  // Beispiel-Daten
  return [
    { slug: 'nextjs-seo-guide', updatedAt: '2025-01-15' },
    { slug: 'typescript-best-practices', updatedAt: '2025-01-10' },
  ];
}

Die Sitemap ist dann unter https://deine-domain.de/sitemap.xml verfügbar. Next.js generiert automatisch korrektes XML.

Pages Router Alternative

// pages/api/sitemap.xml.ts
import { GetServerSideProps } from 'next';

const generateSitemap = (posts: any[]) => `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://lonexa.de</loc>
    <lastmod>${new Date().toISOString()}</lastmod>
    <priority>1.0</priority>
  </url>
  ${posts.map((post) => `
  <url>
    <loc>https://lonexa.de/blog/${post.slug}</loc>
    <lastmod>${post.updatedAt}</lastmod>
    <priority>0.7</priority>
  </url>`).join('')}
</urlset>`;

export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  const posts = await fetchAllPosts();
  const sitemap = generateSitemap(posts);
  
  res.setHeader('Content-Type', 'text/xml');
  res.write(sitemap);
  res.end();
  
  return { props: {} };
};

export default function Sitemap() {}

Strukturierte Daten für Rich Snippets

JSON-LD strukturierte Daten erhöhen deine Sichtbarkeit in SERPs und sind essentiell für AI Search Engines wie Perplexity oder Google SGE.

Article Schema

// app/blog/[slug]/page.tsx
export default function BlogPost({ post }: { post: any }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.excerpt,
    image: `https://lonexa.de${post.coverImage}`,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: {
      '@type': 'Person',
      name: 'Long Huynh',
      url: 'https://lonexa.de',
    },
    publisher: {
      '@type': 'Organization',
      name: 'lonexa.de',
      logo: {
        '@type': 'ImageObject',
        url: 'https://lonexa.de/logo.png',
      },
    },
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': `https://lonexa.de/blog/${post.slug}`,
    },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{/* Content */}</article>
    </>
  );
}

Breadcrumb Navigation

const breadcrumbJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  itemListElement: [
    { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://lonexa.de' },
    { '@type': 'ListItem', position: 2, name: 'Blog', item: 'https://lonexa.de/blog' },
    { '@type': 'ListItem', position: 3, name: post.title },
  ],
};

Strukturierte Daten sind ein zentraler Bestandteil jedes Next.js SEO Guide, da sie die Basis für Featured Snippets und KI-Antworten bilden.

Robots.txt mit Next.js Convention

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

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

Die robots.txt ist unter https://deine-domain.de/robots.txt erreichbar.

Performance: Core Web Vitals optimieren

SEO ist mehr als Metadata. Google berücksichtigt Page Experience Signals:

Image Optimization:

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Next.js SEO Guide Illustration"
  width={1200}
  height={630}
  priority // Für Above-the-Fold Bilder
  placeholder="blur"
/>

Font Optimization:

// app/layout.tsx
import { Inter } from 'next/font/google';

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

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

AI-ready Content: Zukunftssicher strukturieren

Moderne AI Search Engines parsen strukturierte Inhalte besser:

Semantisches HTML: <article>, <section>, <header> korrekt verwenden
Heading-Hierarchie: H1 → H2 → H3 logisch strukturieren
Klare Antworten: FAQ-Sections mit @type: FAQPage Schema
Zitierbare Quellen: Eindeutige URLs, Publish Dates, Autorennamen

Dieser Next.js SEO Guide verwendet alle genannten Techniken, um nicht nur von Google, sondern auch von KI-Modellen optimal verstanden zu werden.

Monitoring & Debugging

Google Search Console integrieren:

// app/layout.tsx
export const metadata = {
  verification: {
    google: 'dein-verification-code',
  },
};

SEO-Testing Tools:

Lighthouse CI in deiner Deploy-Pipeline
next-seo Package für zusätzliche Validierung (optional)
Schema Validator von Google für strukturierte Daten

Fazit

Ein vollständiger Next.js SEO Guide deckt mehr ab als nur Meta-Tags: Von der Metadata API über dynamische Sitemaps bis hin zu KI-optimierten strukturierten Daten. Mit Next.js hast du alle Tools an der Hand, um technisch sauberes SEO zu implementieren – Server-Side Rendering liefert den Content, deine Umsetzung macht ihn sichtbar.

Die wichtigsten Takeaways:

Nutze die Metadata API für type-safe Meta-Tags
Generiere dynamische Sitemaps mit sitemap.ts
Implementiere JSON-LD strukturierte Daten für Rich Snippets
Optimiere Performance mit Next.js Image und Font Optimization
Strukturiere Content semantisch für AI Search Engines

Du arbeitest an einem Next.js Projekt mit SEO-Anforderungen? Ich helfe dir gerne bei der Implementierung einer nachhaltigen SEO-Strategie – von der technischen Umsetzung bis zur Content-Struktur.