Next.js ile SEO Dostu Web Sitesi Nasıl Yapılır?

SPA'nın SEO Sorunu ve Next.js'in Çözümü

Geleneksel bir React Single Page Application (SPA), içeriği tarayıcıda JavaScript ile render eder. Arama motorları bu içeriği indexlemekte zorlandığından SEO performansı düşer.

Next.js, bu sorunu Server Side Rendering (SSR) ve Static Site Generation (SSG) yaklaşımlarıyla çözer. Doğru stratejiyi seçmek, SEO kazanımının temel adımıdır.

1. Rendering Stratejisi Seçimi

Sık güncellenen içerik   → SSR  (dinamik veri, kişiselleştirme)
Nadiren değişen içerik   → SSG  (landing page, blog)
Hibrit                   → ISR  (Incremental Static Regeneration)

Blog yazıları ve ürün sayfaları için ISR ile revalidate: 3600 (1 saatte bir güncelle) ideal dengeyi sağlar.

2. Metadata API Doğru Kullanımı

Next.js 13+ App Router'da metadata nesnesini server component'ta dışa aktarın:

export const metadata: Metadata = {
  metadataBase: new URL('https://nysa.tr'),
  title: { default: 'NYSA', template: '%s | NYSA' },
  description: 'Açıklama 150-160 karakter arasında olmalı.',
  alternates: { canonical: '/sayfa' },
  openGraph: { type: 'website', locale: 'tr_TR' },
};

Önemli: metadataBase olmadan relative og:image URL'leri yanlış resolve edilir.

3. Core Web Vitals

Google, Core Web Vitals'ı doğrudan sıralama faktörü olarak kullanır:

• LCP (Largest Contentful Paint): Hero görselini priority prop'uyla işaretleyin, preload edin.
• CLS (Cumulative Layout Shift): Image bileşeninde her zaman width ve height tanımlayın.
• FID/INP: Client component'ları minimize edin, ağır hesaplamaları server'a taşıyın.

4. Yapısal Veri (Schema.org)

Arama sonuçlarında zengin snippet almak için JSON-LD kullanın:

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

Blog yazıları için Article, ürünler için Product, şirket sayfaları için Organization şeması uygundur.

5. Sitemap ve Robots

Next.js App Router'da sitemap.ts ve robots.ts dosyaları otomatik olarak endpoint oluşturur. Dinamik içerik (blog, ürünler) için API çağrısı yaparak tüm URL'leri dahil edin.

Sonuç

Next.js, SEO dostu bir web sitesi için gereken tüm araçları kutudan çıkar çıkmaz sunar. Ancak teknik altyapı kadar içerik kalitesi, sayfa hızı ve backlink profili de belirleyicidir.

Projeniz için kapsamlı bir SEO denetimi veya Next.js geliştirme ihtiyacınız varsa NYSA ile iletişime geçin.