Next.js ile SEO Nasıl Yapılır? Adım Adım Teknik Rehber

Next.js ile SEO yapmanın beş temel adımı vardır: sayfaları sunucuda render etmek (SSR/SSG), Metadata API ile her sayfaya özgün title ve description tanımlamak, dinamik sitemap ve robots.txt üretmek, JSON-LD yapısal veri eklemek ve Core Web Vitals skorlarını optimize etmek. Next.js bu adımların her biri için yerleşik araçlar sunduğundan, ekstra eklenti veya üçüncü parti SEO modülüne ihtiyaç duymazsınız. Bu yüzden web geliştirme projelerimizde SEO öncelikli kurumsal siteler için ilk tercihimiz Next.js’tir.

Next.js Neden SEO İçin Avantajlı?

Klasik React uygulamaları (SPA) içeriği tarayıcıda, JavaScript çalıştıktan sonra oluşturur. Arama motoru botları ise JavaScript’i her zaman ve hemen çalıştırmaz; render kuyruğu günler sürebilir. Next.js’te sayfalar sunucuda (SSR) ya da derleme anında (SSG) hazır HTML olarak üretilir — Googlebot sayfayı açtığında başlık, içerik ve linklerin tamamı ilk yanıtın içindedir. Next.js ile WordPress arasındaki farkı ayrı bir yazıda detaylı karşılaştırdık.

Sunucudan hazır HTML dönen sayfalar, yalnızca istemcide render edilen sayfalara göre çok daha hızlı ve güvenilir dizine eklenir. SEO’nun en kritik teknik kararı render stratejisidir — ve Next.js’te bu varsayılan olarak doğru kurulur.

Metadata API: Title, Description ve Open Graph

App Router’daki Metadata API, her sayfaya özgün title, description, canonical ve Open Graph etiketlerini tip güvenli şekilde tanımlamanızı sağlar. Dinamik sayfalarda (blog yazısı, ürün detayı) `generateMetadata` fonksiyonu veriyi çekip metadata’yı sunucuda üretir:

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title, // layout'taki template ile birleşir: "%s | Site Adı"
    description: post.excerpt,
    alternates: { canonical: `/blog/${post.slug}` },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      images: [{ url: post.coverImage }],
    },
  };
}

Kök layout’ta `title.template` tanımlayarak tüm sayfalarda tutarlı bir başlık şablonu kurarsınız. Canonical URL’ler, aynı içeriğin farklı adreslerden erişilmesi durumunda hangi adresin “asıl” olduğunu Google’a bildirir ve çift içerik sorununu önler.

Dinamik Sitemap ve robots.txt

Next.js’te `app/sitemap.ts` ve `app/robots.ts` dosyaları, derleme veya istek anında otomatik olarak sitemap.xml ve robots.txt üretir. Yeni bir blog yazısı eklediğinizde sitemap kendiliğinden güncellenir — elle XML düzenlemek gerekmez:

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

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getBlogPosts();

  return [
    { url: 'https://siteniz.com', changeFrequency: 'daily', priority: 1 },
    ...posts.map((post) => ({
      url: `https://siteniz.com/blog/${post.slug}`,
      lastModified: post.updatedAt,
      changeFrequency: 'weekly' as const,
      priority: 0.6,
    })),
  ];
}

JSON-LD Yapısal Veri

Yapısal veri (Schema.org JSON-LD), arama motorlarına sayfanın “ne olduğunu” anlatır: bir makale mi, hizmet mi, sık sorulan sorular mı? Organization, Article, Service, FAQPage ve BreadcrumbList en çok kullanılan tiplerdir. Doğru yapısal veri; zengin sonuçlar (yıldız, SSS açılır listesi, breadcrumb) kazandırır ve ChatGPT, Perplexity gibi yapay zeka arama motorlarında alıntılanma olasılığını artırır. Next.js’te bunu sayfaya gömülen küçük bir `<script type="application/ld+json">` bileşeniyle çözersiniz; her sayfa tipine bir kez kurulur, sonrası otomatiktir.

Performans: Core Web Vitals

Google, sayfa deneyimini sıralama sinyali olarak kullanır. Core Web Vitals metriklerinde (LCP, INP, CLS) iyi skor almak için Next.js’in yerleşik optimizasyonlarını kullanın:

• next/image: otomatik WebP/AVIF dönüşümü, lazy loading ve boyutlandırma ile LCP’yi düşürür
• next/font: fontları self-host eder, layout shift’i (CLS) önler
• Dynamic import: ağır bileşenleri koda bölerek ilk yükü küçültür
• ISR (Incremental Static Regeneration): sayfaları statik hızında sunar, içeriği arka planda tazeler
• Server Components: istemciye giden JavaScript miktarını ciddi oranda azaltır

Sık Yapılan Next.js SEO Hataları

• Tüm sayfaları "use client" yapmak — sunucu render avantajını sıfırlar
• Metadata’yı yalnızca kök layout’a yazmak — her sayfa aynı title/description ile yarışır
• Canonical tanımlamamak — parametreli URL’ler çift içerik olarak dizine girer
• Sitemap’i statik dosya olarak bırakmak — yeni içerik Google’a geç ulaşır
• Çok dilli sitede hreflang etiketlerini atlamak — yanlış dildeki sayfa sıralanır

Sonuç

Next.js, SEO için gereken her şeyi — sunucu render, Metadata API, otomatik sitemap, yapısal veri desteği ve performans optimizasyonları — çekirdeğinde barındırır. Önemli olan bu araçları doğru sırayla ve eksiksiz kurmaktır; SEO uyumlu bir web sitesinin tüm gereksinimlerini ayrı bir yazıda topladık. Arama motorlarında görünür, hızlı ve teknik olarak sağlam bir Next.js sitesi için bizimle iletişime geçin ya da ücretsiz teklif alın.