Next.js 16 SEO Rehberi: App Router ile Teknik SEO Optimizasyonu

Neden Next.js 16 SEO İçin Önemli?

Next.js 16, React Server Components (RSC) mimarisini tam olarak olgunlaştırdı ve SEO açısından modern web geliştirmenin en güçlü framework'ü konumunda. App Router yapısı, metadata yönetimi, streaming SSR ve otomatik statik optimizasyon gibi özellikler, teknik SEO gereksinimlerini framework düzeyinde karşılıyor.

1. Metadata API ile SEO Etiketleri

Next.js 16, her route için metadata objesi veya generateMetadata fonksiyonu ile dinamik meta etiketler oluşturmanıza olanak tanır:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
    },
  };
}

Meta Description ve Title Tag optimizasyonu için sözlükümüze göz atın.

2. Sitemap ve Robots.txt Oluşturma

App Router'da app/sitemap.ts ve app/robots.ts dosyaları ile programatik olarak oluşturabilirsiniz:

// app/sitemap.ts
export default async function sitemap() {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    url: `https://example.com/blog/${post.slug}`,
    lastModified: post.updatedAt,
    changeFrequency: 'weekly',
    priority: 0.8,
  }));
}

Sitemap Oluşturucu aracımızla çıktınızı doğrulayın.

3. JSON-LD Yapısal Veri Entegrasyonu

Server Components içinde JSON-LD'yi doğrudan render edebilirsiniz:

// app/blog/[slug]/page.tsx
export default function BlogPost({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    author: { '@type': 'Person', name: post.author },
    datePublished: post.date,
  };
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{/* İçerik */}</article>
    </>
  );
}

JSON-LD Schema Doğrulayıcı ile yapısal verinizi test edin.

4. Server Components ve İndeksleme

React Server Components (RSC), HTML'i sunucu tarafında render eder ve Googlebot'a tam HTML gönderir. Bu, JavaScript-bağımlı render sorunlarını ortadan kaldırır:

• Yapın: Veri çekimini Server Components içinde yapın.
• Yapın: SEO kritik içerikleri (başlıklar, metinler) her zaman server-side render edin.
• Yapmayın: SEO açısından önemli içerikleri 'use client' bileşenlerde render etmeyin.

5. Canonical URL ve Trailing Slash Yönetimi

Next.js 16 config dosyasında trailingSlash ayarını belirleyin ve Metadata API ile canonical URL'leri yönetin:

// next.config.ts
const config = {
  trailingSlash: false,
};
// Her sayfada:
export const metadata = {
  alternates: {
    canonical: 'https://example.com/blog/seo-rehberi',
  },
};

Canonical URL tanımımızı inceleyin.

6. Core Web Vitals Optimizasyonu

• LCP: next/image bileşenini priority prop'u ile kullanarak hero görselleri önceliklendirin.
• INP: Ağır hesaplamaları Server Components'e taşıyarak client-side JavaScript yükünü azaltın.
• CLS: Görsellere width ve height verin; font yükleme stratejisinde next/font kullanın.

7. Uluslararası SEO (i18n) Ayarları

App Router'da [locale] segmenti ile çoklu dil desteği kurun. Her dil için ayrı metadata oluşturun ve Hreflang Etiket Oluşturucu ile hreflang etiketlerinizi doğrulayın.

Next.js 16 SEO Kontrol Listesi

• Her sayfada benzersiz title ve description var mı?
• sitemap.ts ve robots.ts oluşturuldu mu?
• JSON-LD yapısal veri eklendi mi?
• Canonical URL doğru tanımlanıyor mu?
• Görseller next/image ile optimize mi?
• Core Web Vitals hedefleri karşılanıyor mu?
• SSR/RSC ile tam HTML sunuluyor mu?

Sonuç

Next.js 16, teknik SEO gereksinimlerinin çoğunu framework düzeyinde çözen en güçlü araçtır. App Router mimarisini doğru kullandığınızda, JavaScript SEO sorunlarının büyük çoğunluğunu baştan ortadan kaldırırsınız. SEO Analiz aracımızla Next.js sitenizi denetleyin.