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.
