Technical SEO für Next.js: Der Developer's Guide zum Ranking #1

Als Entwickler haben Sie enormen Einfluss auf SEO – mehr als Content-Optimierung allein. Technisches SEO in Next.js 15 kann Ihre Rankings dramatisch verbessern. Dieser Guide zeigt wie.

1. SEO-Grundlagen Die Jeder Entwickler Kennen Sollte

• Google rankt schnelle Websites höher (Core Web Vitals)

• Structured Data hilft Google Ihre Inhalte zu verstehen

• Mobile-First Indexing ist Standard

• HTTPS ist Ranking-Faktor

• Sitemap und robots.txt sind essentiell

Performance ist dabei ein kritischer Ranking-Faktor.

2. Structured Data (JSON-LD) Implementieren

Structured Data hilft Google Ihre Seite zu verstehen und Rich Results anzuzeigen:

// components/ArticleJsonLd.tsx
export function ArticleJsonLd({ article }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": article.title,
    "description": article.excerpt,
    "image": article.featuredImage,
    "datePublished": article.publishedAt,
    "dateModified": article.updatedAt,
    "author": {
      "@type": "Person",
      "name": "Andy Staudinger"
    }
  };

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

3. Core Web Vitals Messen und Verbessern

Google nutzt Core Web Vitals als Ranking-Faktor:

• LCP (Largest Contentful Paint): < 2.5s

• FID (First Input Delay): < 100ms

• CLS (Cumulative Layout Shift): < 0.1

Server Components helfen drastisch bei der Verbesserung dieser Metriken.

4. Dynamische Sitemaps und robots.txt

Automatisieren Sie Sitemap-Generierung für bessere Indexierung:

// app/sitemap.ts
export default async function sitemap() {
  const posts = await getBlogPosts();

  const blogUrls = posts.map(post => ({
    url: `https://example.com/blog/${post.slug}`,
    lastModified: post.updatedAt,
    changeFrequency: 'weekly',
    priority: 0.7,
  }));

  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    ...blogUrls
  ];
}

5. Internationales SEO mit next-intl

Für mehrsprachige Sites implementieren Sie hreflang-Tags:

// app/[locale]/layout.tsx
export function generateMetadata({ params: { locale } }) {
  return {
    alternates: {
      canonical: `https://example.com/${locale}`,
      languages: {
        'de': 'https://example.com/de',
        'en': 'https://example.com/en',
      }
    }
  };
}

6. Performance-Optimierung für SEO

• Image Optimization mit next/image

• Code Splitting für kleinere Bundles

• Server-Side Rendering für schnelleren FCP

• Edge Functions für globale Performance

Diese Optimierungen sind besonders wichtig für Deployment-Strategie.

Fazit

Technical SEO in Next.js ist eine mächtige Waffe. Implementieren Sie Structured Data, optimieren Sie Core Web Vitals, automatisieren Sie Sitemaps und fokussieren Sie auf Performance. Mit diesen Techniken können Sie in Google Rankings deutlich steigen.