Next.js Sitede Teknik SEO Kontrol Listesi (App Router)

Next.js ile kurulan bir site hızlı açılır, modern görünür ve geliştirmesi keyiflidir. Ama "Next.js zaten SEO dostu" düşüncesi, en sık gördüğümüz hataların da başlangıç noktası. Çatı size doğru araçları verir; onları doğru kullanmak ise sizin işiniz. Bu yazıda App Router kullanan bir Next.js sitesini yayına almadan önce ve yayındayken düzenli olarak gözden geçirdiğimiz teknik SEO kontrol listesini paylaşıyoruz. Listedeki her madde Next.js'in resmî belgelerine ve Google Search Central'a dayanıyor; bir kısmını da bu sitede kendi hatalarımızdan öğrendik.

Klasik bir PHP ya da WordPress sitesinde başlık, açıklama ve canonical etiketi çoğu zaman bir eklentinin işidir. Next.js'te ise bu etiketlerin her biri kodda tanımlanır. Bu esneklik güzel, ama aynı zamanda her yeni sayfa türünün kendi SEO tanımını unutma riski taşır. Üstelik Next.js'te bir sayfanın sunucuda mı, tarayıcıda mı oluşturulduğu, hangi durum kodunu döndürdüğü ve önbellekte ne kadar kaldığı da kodla belirlenir.

Google, JavaScript ile oluşturulan sayfaları tarayıp işleyebiliyor. Google Search Central'ın JavaScript SEO belgesi bu süreci tarama, işleme (rendering) ve dizine ekleme diye üç aşamada anlatır. Yine de içerik ve meta etiketler ilk HTML yanıtında hazır olduğunda hem Google hem diğer arama motorları ve yapay zekâ botları için iş çok daha kolaydır. App Router'ın sunucu bileşenleri tam olarak bunu sağlar; yeter ki doğru kullanılsın.

1. Metadata API ile başlık, açıklama ve canonical

App Router'da sayfa başlığı ve açıklaması metadata nesnesi ya da dinamik sayfalarda generateMetadata fonksiyonu ile tanımlanır. Kontrol etmeniz gerekenler:

• Kök layout'ta metadataBase tanımlı mı? Canonical ve Open Graph adresleri göreli yazıldığında tam adrese bu değer üzerinden çevrilir.
• Her sayfanın kendine ait başlığı var mı? Kök layout'taki title.template ile "Sayfa adı | Marka" düzenini kurup sayfalarda yalnız sayfa adını yazmak tutarlılığı korur.
• Dinamik sayfalarda canonical gerçekten dinamik mi? En sinsi hata budur: Bir ürün ya da yazı sayfasının layout'unda canonical sabit yazılırsa yüzlerce sayfa aynı adresi kanonik gösterir.
• 'use client' sayfalarda metadata nereden geliyor? Next.js belgesine göre metadata ve generateMetadata yalnız sunucu bileşenlerinde desteklenir. İstemci bileşeni olan bir sayfanın SEO bilgisini aynı klasördeki bir layout.tsx dosyasından vermeniz gerekir.

Son iki maddeyi bu sitede bizzat yaşadık. Sayfalarımızın çoğu istemci bileşeniydi ve bir dönem her rotaya ayrı layout.tsx ekleyerek benzersiz başlık ve canonical tanımladık. Ardından dinamik ürün ve kategori rotalarının layout'larında canonical'ın harfi harfine [slug] olarak kaldığını ve hepsinin aynı "Ürün Detayı" başlığını taşıdığını fark ettik. Çözüm, bu layout'ları generateMetadata fonksiyonuna çevirip başlık ve canonical'ı gerçek ürün bilgisinden üretmek oldu.

2. sitemap.ts ve robots.ts dosyalarını kodla üretmek

Next.js, app/sitemap.ts ve app/robots.ts dosyalarından standart site haritası ve robots.txt üretir. Elle yazılmış statik bir sitemap.xml yerine bunları kullanmanın faydası, yeni bir ürün ya da yazı eklendiğinde haritanın kendiliğinden güncellenmesidir. Kontrol listesi:

1. Site haritasında yalnız 200 dönen, kanonik ve dizine açık adresler olsun. Yönlendiren, noindex taşıyan ya da 404 veren adres haritaya girmemeli.
2. Dinamik rotaları (ürün, kategori, yazı) haritaya veri kaynağından ekleyin; yalnız statik sayfaları listelemek en yaygın eksiktir.
3. Google'ın belgesine göre tek bir site haritası dosyası en fazla 50.000 adres ya da sıkıştırılmamış 50 MB olabilir. Daha büyük sitelerde Next.js'in generateSitemaps fonksiyonuyla haritayı bölün.
4. robots.ts içinde site haritasının tam adresini belirtin ve yanlışlıkla /_next/ altındaki CSS ve JS dosyalarını engellemeyin; Google sayfayı işlemek için bu dosyalara ihtiyaç duyar.
5. Yayına çıktıktan sonra haritayı Search Console'a gönderin ve "Başarılı" durumunu görün.

Haritanın ve robots.txt'in canlıda gerçekten doğru çıktığını hızlıca görmek için ücretsiz robots.txt ve sitemap denetimi gibi bir araçtan geçirmek, özellikle yeni deploy sonrası iyi bir alışkanlık.

3. Durum kodları: 404, yönlendirme ve kopya adresler

Arama motoru açısından bir sayfanın ne dediği kadar hangi durum kodunu döndürdüğü de önemlidir.

Durum	Next.js'te doğru yol	Dikkat edilecek nokta
Bulunamayan kayıt	notFound() çağrısı ve not-found.tsx	Boş sayfayı 200 ile döndürmek Google'da "soft 404" olarak görünür.
Kalıcı taşınan adres	permanentRedirect() ya da next.config'te permanent: true	Next.js 308 döndürür; Google 308'i 301 gibi kalıcı yönlendirme sayar.
Geçici yönlendirme	redirect()	307 döner; kalıcı taşımada kullanmayın.
Sonda eğik çizgi farkı	next.config'te trailingSlash ayarı	Next.js diğer biçimi otomatik yönlendirir; iç linklerde tek biçim kullanın.
İngilizce ya da eski kopya rotalar	Kaldırma, yönlendirme ya da robots: { index: false }	Aynı içeriğin iki dilde ya da iki adreste açılması kopya içerik üretir.

Akışlı (streaming) yanıtlarda bir not: Yanıt gönderilmeye başladıktan sonra durum kodu değiştirilemez. Next.js belgesi, bu durumda notFound() çağrıldığında sayfaya noindex etiketi eklendiğini anlatır. Yine de veri kontrolünü mümkün olduğunca sayfanın en başında yapmak en temiz yoldur.

4. Yapısal veri (JSON-LD) ve sosyal paylaşım etiketleri

Next.js belgesi JSON-LD'yi sayfa bileşeni içinde bir script type="application/ld+json" etiketiyle basmayı önerir ve XSS riskine karşı < karakterinin kaçışlanması gerektiğini hatırlatır. Kontrol edin:

• Ana sayfada Organization ve WebSite, yazılarda Article ya da BlogPosting, ürünlerde Product, iç sayfalarda BreadcrumbList var mı?
• Yapısal verideki bilgiler sayfada görünen bilgilerle aynı mı? Google'ın yapısal veri yönergeleri, sayfada olmayan içeriğin işaretlenmesini istemez.
• Gerçek bir yorum sistemi yoksa puan (AggregateRating) eklemeyin. Elle yazılmış puanlar Google'ın yapısal veri politikasına aykırıdır; biz de bu yüzden ürün şemamıza puan koymadık.
• Open Graph görseli tanımlı mı? App Router'da opengraph-image.tsx dosyasıyla her sayfa için dinamik görsel üretmek mümkün.

Yazdığınız şemayı Google'ın Zengin Sonuç Testi ile doğrulamak her zaman en kesin yoldur.

5. Performans ve Core Web Vitals

Google'ın web.dev üzerinde yayımladığı eşiklere göre iyi bir deneyim için LCP 2,5 saniyenin, INP 200 milisaniyenin, CLS ise 0,1'in altında olmalı. Next.js bunların çoğu için hazır araç sunar:

• next/image: Boyut belirterek kayma (CLS) önler, modern formatlar sunar. Sayfanın en büyük görseline priority verin, diğerleri tembel yüklensin. Her görselin anlamlı bir alt metni olsun.
• next/font: Yazı tiplerini kendi sunucunuzdan sunar ve yazı tipi değişiminden kaynaklanan kaymayı azaltır.
• İstemci bileşenlerini sınırlayın: Bütün sayfayı 'use client' yapmak yerine yalnız etkileşimli parçaları istemci bileşeni yapın. Tarayıcıya giden JavaScript azaldıkça INP iyileşir.
• Üçüncü taraf betikler: Analitik ve sohbet betiklerini next/script ile uygun strategy değeriyle yükleyin.

Saha verisi için Search Console'daki Core Web Vitals raporu, laboratuvar ölçümü için PageSpeed Insights kullanılabilir. İkisi farklı şeyleri ölçer; saha verisi gerçek kullanıcılardan gelir ve sıralama sinyali olarak dikkate alınan odur.

6. Yayın sonrası düzenli denetim

Teknik SEO bir kez yapılıp biten bir iş değil. Her deploy, yeni bir sayfa türü ya da bir bağımlılık güncellemesi yukarıdaki maddelerden birini bozabilir. Bizim yayın sonrası rutinimiz kısaca şöyle:

1. Önemli sayfa türlerinden birer örneği açıp kaynakta başlık, açıklama, canonical ve robots etiketlerini kontrol etmek.
2. Site haritasının yeni adresleri içerdiğini ve hepsinin 200 döndüğünü doğrulamak.
3. Bir hafta sonra Search Console'da Sayfalar raporunda yeni bir hata türü çıkıp çıkmadığına bakmak.
4. Ayda bir tüm siteyi tarayıp kırık link, kopya başlık ve eksik açıklama gibi sorunları toplu görmek.

Son madde için masaüstü tarayıcı programları kullanılabilir; kurulum istemeyen bir seçenek olarak ücretsiz site SEO analizi araçları da ana sayfa ve örnek sayfalar üzerinden altyapı, etiket ve içerik bulgularını tek raporda verir. Hangi aracı seçerseniz seçin, önemli olan denetimin takvime bağlanması.

Sık sorulan sorular

Kaynaklar: Next.js Docs (Metadata, sitemap.js, robots.js, redirect, notFound, JSON-LD), Google Search Central (JavaScript SEO temelleri, site haritası oluşturma, yönlendirmeler, yapısal veri yönergeleri), web.dev (Core Web Vitals).