Next.js ile Teknik SEO Optimizasyonu: Adım Adım Rehber

Kısaca: Next.js, doğru kullanıldığında teknik SEO için güçlü bir zemin sunar: içerik sunucuda üretilir, metadata koddan yönetilir, sitemap/robots dosyaları birer kod dosyasıdır ve görsel/font optimizasyonu yerleşiktir. Ancak SEO “otomatik” gelmez: doğru render stratejisini seçmek, her sayfada benzersiz metadata ve canonical üretmek, yapılandırılmış veriyi güvenle basmak, URL ve yönlendirmeleri disiplinle yönetmek ve Core Web Vitals'ı ölçmek gerekir. Bu rehber, Next.js (App Router; bu yazıdaki örnekler Next.js 16 dokümanlarına dayanıyor) için uygulanabilir bir kontrol listesi sunar.

Son güncelleme: Eylül 2026. Next.js sürümleri arasında API farkları olabilir; güncel belgeyi kontrol edin.

1. Render stratejisi: içerik ilk HTML'de olsun

Arama motorları JavaScript çalıştırabilse de, içeriği ilk HTML cevabında sunmak hem güvenilirliği hem hızı artırır. Yapay zekâ tarayıcıları için bu daha da önemli: Vercel'in yapay zekâ tarayıcıları analizine göre OpenAI, Anthropic ve Perplexity'nin tarayıcıları JavaScript çalıştırmıyor; Gemini ise çalıştırabiliyor (GEO rehberimiz).

Next.js'te seçenekler:

Kural: indekslenmesini istediğiniz içerik, sunucu bileşenlerinde veya sunucuda alınan veriyle üretilsin; useEffect ile sonradan yüklenen içerik SEO açısından risklidir. Sunucu Bileşenleri (Server Components) ayrıca tarayıcıya gönderilen JavaScript miktarını azaltır.

2. Metadata API: her sayfada benzersiz başlık ve açıklama

Next.js'te metadata iki yolla yönetilir: sabit metadata nesnesi veya veriye bağlı generateMetadata fonksiyonu. Belgeye göre bunlar yalnızca Sunucu Bileşenlerinde desteklenir ve Next.js ilgili <head> etiketlerini otomatik üretir.

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

export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug) // sayfa ile aynı veriyi paylaşın (cache)

  return {
    title: post.metaTitle ?? post.title,
    description: post.metaDescription ?? post.excerpt,
    alternates: { canonical: `https://www.example.com/blog/${slug}` },
    openGraph: { title: post.title, description: post.excerpt, type: 'article' },
  }
}

İpuçları:

• Başlık: Sayfaya özgü ve anlamlı; marka ekini kök layout'taki title.template ile bir kez ekleyin (aksi hâlde sayfa başlıklarına elle marka eklerseniz başlıkta marka iki kez görünür).
• Açıklama: Sayfaya özgü, kabaca 120–160 karakter.
• Aynı veriyi iki kez çekmeyin: Sayfa ve generateMetadata aynı veriyi kullanıyorsa React cache ile tekilleştirin.
• Botlar ve akışlı metadata: Dinamik sayfalarda Next.js metadata'yı akışla (stream) gönderebilir; Bingbot gibi <head> içinde metadata bekleyen botlar için bu davranış otomatik kapatılır (htmlLimitedBots ayarıyla özelleştirilebilir). Hazırlanmış (prerendered) sayfalarda metadata derleme sırasında çözülür.

3. Canonical, yönlendirme ve URL disiplini

• Canonical: Her sayfa kendi kanonik adresini belirtmeli. Filtre, sıralama ve izleme parametreli URL'ler ana sayfanın kopyası olmamalı. Kök layout'ta metadataBase tanımlayıp sayfalarda göreli canonical kullanabilirsiniz.
• Kalıcı yönlendirme: URL değişikliklerinde next.config içinde redirects() ile 301/308 yönlendirme kullanın; zincirleme yönlendirmeden kaçının.
• Türkçe karakterli URL'ler: Slug'ları ASCII tutun (hizmetler/web-tasarim). Eski URL'lerde Türkçe karakter varsa, yönlendirme kaynaklarında hem ham hem yüzde-kodlanmış (encodeURIComponent) biçimleri tanımlamak gerekiyor; kendi projelerimizde bu ayrıntıyı doğrulayıp uyguladık. Aksi hâlde yönlendirme, bazı istek biçimlerinde eşleşmeyebilir. Dinamik rotalarda bilinmeyen slug için notFound() ile doğru 404 döndürün.
• Sonuç sayfaları: Arama/filtre sayfalarını noindex yapmayı veya robots ile yönetmeyi değerlendirin; “yumuşak 404” üretmeyin.

4. Sitemap ve robots

Next.js'te sitemap ve robots dosyaları, app/ altında sitemap.ts ve robots.ts olarak kod ile üretilebilir. Yayında olan tüm indekslenebilir URL'leri (blog, hizmet, ürün) veritabanından çekip sitemap'e ekleyin; sitemap'teki her URL 200 dönmeli ve canonical olmalı. Sitemap'i Google Search Console'a gönderin. robots.ts içinde, hem klasik hem yapay zekâ arama botlarının (örneğin OAI-SearchBot) kasıtsız engellenmediğinden emin olun.

5. Yapılandırılmış veri (JSON-LD)

Next.js'in JSON-LD rehberi yapılandırılmış veriyi layout veya page bileşeninde bir <script type="application/ld+json"> olarak basmayı öneriyor. Önemli güvenlik notu: JSON.stringify HTML etiketlerini temizlemez; XSS'e karşı < karakterini kaçırın:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
  }}
/>

Kullanışlı tipler: Organization (kök), BreadcrumbList, BlogPosting/Article, Product, LocalBusiness, Service. İşaretleme sayfada görünen içerikle örtüşmeli; Google, AI özelliklerinde yer almak için özel bir şema gerekmediğini belirtiyor, şemanın işi anlamı netleştirmektir. FAQPage işaretlemesi geçerli kalmakla birlikte Google artık SSS zengin sonuçlarını göstermiyor.

6. Core Web Vitals ve performans

Google'ın iyi eşikleri: LCP ≤ 2,5 sn, INP ≤ 200 ms, CLS ≤ 0,1 (sayfa görüntülemelerinin %75'i için). Next.js'te pratik adımlar:

• Görseller: next/image ile boyut ve format optimizasyonu, width/height veya fill ile yer tanımlama (CLS), ilk ekrandaki (LCP) görsele priority, diğerlerini lazy load.
• Fontlar: next/font ile yerel/optimize font yükleme; yazı tipi kaynaklı düzen kaymasını azaltır.
• JavaScript: Sunucu Bileşenlerini varsayılan yapın; 'use client' yalnızca etkileşimli parçalarda; ağır kütüphaneleri dinamik içe aktarın.
• Üçüncü taraf betikler: Analitik ve sohbet widget'larını geç yükleyin.
• Önbellek/CDN: Statik ve ISR sayfalar CDN'den sunulsun.
• Ölçüm: Laboratuvar (Lighthouse) ile yetinmeyin; Search Console'daki Core Web Vitals raporu ve gerçek kullanıcı verisini izleyin.

7. Uluslararası ve çok dilli SEO

Çok dilli sitede her dil için ayrı URL, karşılıklı hreflang ve x-default gerekir; Google'ın çok dilli site rehberine göre her sürüm hem kendini hem diğer sürümleri listelemelidir. Next.js metadata alternates.languages ile bunu üretebilir; kullanıcıyı IP'ye göre otomatik yönlendirmekten kaçının.

8. Yapay zekâ aramaları için ek notlar

Yapay zekâ cevaplarında kaynak olmak için bir “sihirli ayar” yok; Google, AI özelliklerinde yer almak için özel bir optimizasyon gerekmediğini belirtiyor. Ama teknik temel aynı: taranabilirlik, ilk HTML'de içerik, net cevap, kaynaklı ve güncel bilgi. Ayrıntılar için GEO rehberimize bakın.

Teknik SEO kontrol listesi

Yayından önce

• Her indekslenecek sayfa 200 dönüyor ve içerik ilk HTML'de
• Sayfaya özgü title ve description, marka eki tek kez
• Canonical doğru; parametreli/kopya URL'ler yönetiliyor
• sitemap.ts ve robots.ts yayında; yalnızca indekslenebilir URL'ler sitemap'te
• JSON-LD geçerli ve görünen içerikle uyumlu (Rich Results Test / Schema doğrulama)
• Görseller optimize; LCP görseli öncelikli; CLS kaynakları giderilmiş
• Eski URL'ler için kalıcı yönlendirme; 404 sayfaları doğru statü dönüyor
• Mobil uyum ve erişilebilirlik testleri

Yayından sonra

• Search Console'a site haritası gönderildi; kapsam ve Core Web Vitals raporları izleniyor
• Taranan/dizinlenen sayfa sayısı ve hata raporları haftalık kontrol
• Sunucu logunda bot erişimleri (Googlebot, yapay zekâ botları) ve 4xx/5xx incelemesi
• Önemli sayfalarda içerik güncelleme takvimi

Aktaş Digital ne yapıyor?

Kendi sitemizi ve müşteri projelerimizi Next.js ile geliştiriyoruz: sunucuda üretilen sayfalar, kod ile yönetilen metadata/sitemap ve yapılandırılmış veri, performans bütçesi ve yayın sonrası Search Console izlemesi. Web Uygulamaları hizmetimizi inceleyebilir, mevcut sitenizin teknik SEO durumu için teklif formundan bize yazabilirsiniz. Hızlı bir ilk bakış için ücretsiz Website Analizi aracımızı deneyin. Altyapı seçimi hakkında WordPress mi, Next.js mi? rehberimize bakabilirsiniz.

Sık Sorulan Sorular

Next.js SEO için WordPress'ten daha mı iyi?

Otomatik olarak değil. İçerik, teknik sağlık ve yetkinlik sıralamayı belirler. Next.js, render, metadata ve performans üzerinde daha fazla kontrol sunar; WordPress ise eklentilerle hızlı başlangıç sağlar.

SSR mı SSG mi tercih etmeliyim?

Değişmeyen veya ara sıra değişen içerik için statik üretim/ISR en hızlı ve güvenli seçimdir. Kullanıcıya veya isteğe özgü içerikte SSR kullanın. İkisi de ilk HTML'de içerik sunar.

generateMetadata ve metadata arasındaki fark nedir?

metadata sabit değerler içindir; generateMetadata, sayfa verisine (ör. blog yazısı) bağlı dinamik başlık ve açıklama üretir. Her ikisi de Sunucu Bileşenlerinde çalışır.

Sitemap'i elle mi yazmalıyım?

Hayır; sitemap.ts ile veritabanından otomatik üretmek daha güvenilir. Yayında olan her indekslenebilir sayfanın eklendiğinden emin olun.

JSON-LD eklemek sıralamayı artırır mı?

Doğrudan sıralama garantisi vermez; arama motorlarının sayfayı anlamasına ve uygun zengin sonuçlar için uygun olmasına yardımcı olur. Doğru ve görünen içerikle uyumlu kullanın.

Sonuç

Next.js'te teknik SEO, framework'ün sunduğu araçları disiplinle kullanmaktır: içerik ilk HTML'de, sayfaya özgü metadata ve canonical, temiz URL ve yönlendirme, güvenli JSON-LD, iyi Core Web Vitals ve yayın sonrası düzenli ölçüm.