Bir ekip aylarca uğraşıp modern, hızlı çalışan, kullanıcı deneyimi açısından kusursuz bir Next.js sitesi çıkarır. Site açılır, animasyonlar akıcıdır, her şey yolunda görünür. Sonra Google Search Console'a bakılır ve sayfaların büyük kısmının dizine bile girmediği, ya da girse bile hiçbir anahtar kelimede görünmediği fark edilir. Bu, React ekosisteminde çalışan geliştirici ekiplerin sıkça karşılaştığı bir senaryodur: frontend mükemmelliği ile SEO uyumluluğu aynı şey değildir, ve bu ikisi otomatik olarak birlikte gelmez.
On yılı aşkın süredir frontend tarafında çalışan biri olarak, bu sorunun genellikle kötü kod yazımından değil, render stratejisi ve SEO gereksinimlerinin proje başında birlikte düşünülmemesinden kaynaklandığını söyleyebilirim. React'in istemci tarafı render mantığı, doğru yapılandırılmadığında arama motoru botlarının içeriği hiç görmemesine yol açabilir; Next.js bu sorunu büyük ölçüde çözecek araçları sunar, ama bu araçların doğru kullanılması gerekir.
Bu yazıda Next.js ve React tabanlı sitelerde teknik SEO hizmetinin pratikte neyi kapsadığını, hangi sorunların en sık görüldüğünü ve bu hizmetin nasıl değerlendirilmesi gerektiğini anlatıyoruz.
Render Stratejisi: SSR, SSG, ISR ve İstemci Tarafı Render
Next.js'in en büyük avantajı, sayfa bazında farklı render stratejileri seçebilmenizdir; ama bu aynı zamanda en büyük hata kaynağıdır. Sık değişmeyen ve SEO açısından kritik sayfalar (ürün, hizmet, blog sayfaları gibi) için statik oluşturma (SSG) ya da artımlı statik yenileme (ISR) genellikle en sağlıklı seçimdir; içerik derleme zamanında ya da belirli aralıklarla üretilir ve arama motoru botuna tam, render edilmiş HTML sunulur. Sık değişen, kişiselleştirilmiş içerikler için sunucu tarafı render (SSR) tercih edilir. Buna karşılık, tamamen istemci tarafında render edilen ("use client" ile işaretlenmiş, veri çekimi tarayıcıda gerçekleşen) sayfalar, bot içeriği doğru işleyemediğinde boş ya da eksik dizine girme riskiyle karşı karşıya kalır. Teknik SEO çalışmasının ilk adımı, hangi sayfanın hangi stratejiyle render edildiğini denetlemek ve SEO açısından kritik sayfaların doğru stratejiyle sunulduğundan emin olmaktır.
Metadata API ve Dinamik Başlık/Açıklama Yönetimi
Next.js'in generateMetadata fonksiyonu ve Metadata API'si, her sayfanın kendi başlık, açıklama, Open Graph ve canonical bilgisini dinamik olarak üretebilmesini sağlar. Pek çok projede bu yapı ya hiç kullanılmaz ya da tüm sayfalarda aynı statik değerlerle bırakılır; bu durumda yüzlerce ürün ya da içerik sayfası aynı başlık ve açıklamayla arama motoruna sunulur ki bu hem kullanıcı için anlamsızdır hem de arama motorunun sayfaları birbirinden ayırt etmesini zorlaştırır. Doğru kurgulanmış bir metadata katmanı, her sayfanın kendine özgü, o sayfanın içeriğini yansıtan bilgilerle indexlenmesini sağlar.
Core Web Vitals: LCP, INP ve CLS
Google'ın kullanıcı deneyimi sinyalleri olan Core Web Vitals, React tabanlı sitelerde özellikle dikkat gerektirir. Büyük JavaScript paketleri, gereksiz hidrasyon süreleri ve doğru boyutlandırılmamış görseller; sırasıyla en büyük içerikli boyama (LCP), etkileşimden boyamaya kadar geçen süre (INP) ve kümülatif düzen kayması (CLS) metriklerini olumsuz etkiler. Next.js'in Image bileşeni, dinamik import ile kod bölme (code splitting) ve gereksiz istemci bileşenlerinin sunucu bileşenlerine dönüştürülmesi gibi adımlar bu metrikleri iyileştirmede somut fark yaratır. Bu optimizasyonlar hem kullanıcı deneyimini hem de doğrudan arama sıralamasını etkiler.
Yapılandırılmış Veri ve Sitemap Otomasyonu
Next.js'te sitemap.ts ve robots.ts gibi dosya tabanlı yapılandırmalarla site haritası ve tarama kuralları kod içinden, veriye bağlı olarak otomatik üretilebilir; bu, özellikle sık içerik eklenen sitelerde manuel güncelleme ihtiyacını ortadan kaldırır. Buna ek olarak sayfa içeriğine uygun JSON-LD yapılandırılmış veri eklenmesi (ürün, makale, sık sorulan soru gibi şemalar), arama sonuçlarında zengin sonuç (rich result) gösterimi şansını artırır. Bu iki unsur çoğu zaman geliştirme sürecinde arka plana atılır, oysa doğru kurgulandığında nispeten az efor ile büyük katkı sağlar.
İndexleme Denetimi ve Hydration Sorunları
Bir sayfanın tarayıcıda doğru göründüğü, arama motorunun da onu aynı şekilde gördüğü anlamına gelmez. Search Console'daki URL denetleme aracıyla botun gerçekte ne gördüğünü kontrol etmek, next/script ile yüklenen üçüncü parti scriptlerin render'ı geciktirip geciktirmediğini incelemek ve hidrasyon uyuşmazlıklarının (sunucu ve istemcide farklı içerik üretilmesi) konsolda hata bırakıp bırakmadığını kontrol etmek, düzenli olarak yapılması gereken denetimlerdir. Bu tür sorunlar genellikle sessizce birikir ve fark edildiğinde aylardır trafiği etkiliyor olabilir.
Bu Hizmeti Değerlendirirken Nelere Bakılmalı
Next.js veya React projelerinde teknik SEO desteği ararken, kişinin ya da ekibin sadece SEO araçlarını değil, framework'ün kendisini (render modelleri, App Router mimarisi, bileşen ağacı) ne kadar iyi bildiğine bakmak gerekir. Bu, klasik bir SEO denetiminden farklı olarak kod seviyesinde müdahale gerektiren bir çalışmadır; SEO bilgisiyle frontend mühendisliğinin kesiştiği bir uzmanlık alanıdır.
Modern bir teknoloji yığınıyla kurulmuş bir site, doğru yapılandırılmadığında arama motorlarına neredeyse görünmez kalabilir. Framework'ün iç işleyişini gerçekten anlayan, hem kod hem sıralama tarafını aynı anda değerlendirebilen bir uzmanla çalışmak, sitenizin teknik gücünü arama görünürlüğüne çevirmenin en güvenilir yoludur.