Güzel bir React arayüzü yaptın ama Google seni bir türlü göstermiyor. Sorun çoğu zaman yetenekte değil, render yönteminde. Nextjs tam burada devreye girer ve içeriğini arama motorlarının okuyabileceği bir biçimde sunar.Bu rehber, nextjs ile sıfırdan SEO uyumlu bir site kurmak isteyenler için. App Router yapısını, metadata API kullanımını, SSR ile ISR farkını ve sitemap üretimini pratik örneklerle ele alıyoruz. Amaç, sayfalarının hem hızlı yüklenmesi hem de doğru indexlenmesi.
Neden Nextjs SEO için güçlü bir tercih
Klasik bir React uygulaması tarayıcıda render edilir. Yani Google botu sayfayı ilk açtığında çoğunlukla boş bir iskelet görür. İçerik JavaScript çalıştıktan sonra gelir. Bu gecikme indexlemeyi zorlaştırır ve sıralamanı düşürebilir.Nextjs sunucu tarafında render eder. Bot sayfayı istediğinde hazır HTML alır. Başlıklar, metinler ve linkler ilk yanıtta gelir. Bu da arama motorlarının içeriğini anında okumasını sağlar. Resmi belgelerdeki metadata bölümü bu yaklaşımı detaylı anlatıyor.Bu fark sadece teknik bir ayrıntı değil. Hızlı gelen içerik, kullanıcının da daha erken etkileşime girmesini sağlar. Sayfa açılır açılmaz okunabilir olması, hem botu hem ziyaretçiyi memnun eder. İki tarafı aynı anda kazandığın için nextjs ile çalışmak SEO açısından sağlam bir temel kurar.
App Router ve metadata API ile başla
App Router, Next.js 13 ile gelen dosya tabanlı yönlendirme sistemidir. Her klasör bir rotaya karşılık gelir. Sayfa meta verilerini ise metadata API ile tanımlarsın. Bu yöntem statik ve dinamik içerikte aynı şekilde çalışır.Bir sayfanın başlığını ve açıklamasını şöyle tanımlarsın:
export const metadata = {
title: "Bulut Sunucu Fiyatları | Kritm",
description: "Turkiye lokasyonlu VPS planlari ve fiyatlari.",
alternates: { canonical: "https://site.com/fiyatlar" },
};İçeriğin veritabanından geliyorsa generateMetadata fonksiyonunu kullanırsın. Bu fonksiyon her istek için doğru başlığı ve açıklamayı üretir. Canonical etiketini de burada belirlemen, kopya içerik sorunlarını baştan önler.
SSR ile ISR arasındaki fark
Nextjs sana birden çok render stratejisi sunar. Hangisini seçeceğin içeriğin ne sıklıkla değiştiğine bağlıdır. Aşağıdaki tablo üç temel yöntemi karşılaştırıyor.
YöntemNe zaman render olurUygun içerik
SSG | Build sırasında bir kez | Nadiren değişen sayfalar
SSR | Her istekte yeniden | Kişiye özel veya anlık veri
ISR | Belirli aralıklarla yenilenir | Blog ve ürün listeleri
ISR çoğu site için en dengeli seçenektir. Sayfa statik gibi hızlı sunulur ama arka planda belirli sürede tazelenir. Bir blog yazısını revalidate değeriyle saatte bir güncelleyebilirsin. Böylece hem hız hem güncellik bir arada gelir.
Sitemap ve robots dosyalarını ekle
Arama motorlarının sayfalarını bulması için bir sitemap şarttır. Nextjs bunu dosya tabanlı olarak üretir. Proje köküne bir sitemap.ts koyman yeterli. Dosya otomatik olarak /sitemap.xml adresinden sunulur.
- Yayında olmayan sayfaları sitemap dışında bırak.
- Her URL için son güncelleme tarihini ekle.
- robots.ts ile gizli rotaları taramaya kapat.
- Canonical adresleri sitemap ile tutarlı tut.
robots dosyası, botların hangi yolları tarayacağını belirler. Yönetim panelin veya geçici sayfaların buraya girmemeli. Bu iki dosyayı sürüm kontrolünde tutman, SEO yapılandırmanı ekiple birlikte takip etmeni sağlar.
Structured data ile zengin sonuçlar
Yapısal veri, sayfanın ne hakkında olduğunu Google'a net şekilde söyler. JSON-LD formatında eklenir ve arama sonuçlarında zengin görünümler açar. Bir blog yazısı için yazar, tarih ve başlık bilgisini işaretleyebilirsin.Script etiketini sayfanın içine yerleştirirsin. Next.js bu veriyi sunucu tarafında render ettiği için bot ilk istekte görür. Schema doğrulayıcıdan geçirip hatasız olduğundan emin ol. Doğru kurulmuş structured data, tıklama oranını gözle görülür artırır.
Core Web Vitals ve performans
Google sıralamada sayfa hızını dikkate alır. Core Web Vitals üç metriği ölçer: yükleme, etkileşim ve görsel kararlılık. Nextjs bu alanlarda sana hazır araçlar verir. Image bileşeni görselleri otomatik optimize eder ve doğru boyutta sunar.Font yüklemesini next/font ile yönetirsin, böylece düzen kaymaları azalır. Gereksiz JavaScript'i sayfa bazında bölersin. Üretim ortamında bu kazanımların kalıcı olması için sitenin hızlı bir altyapıda barınması gerekir.Ölçmeden iyileştirme yapmak zordur. Lighthouse ve Search Console raporları, hangi sayfanın yavaş olduğunu net gösterir. Önce en çok trafik alan sayfalardan başla. Görselleri sıkıştır, kullanılmayan paketleri kaldır ve veritabanı sorgularını sadeleştir. Bu küçük düzenlemeler toplamda büyük bir hız farkı yaratır.Kritm Cloud Solutions olarak özel yazılım tarafında Nextjs ve SEO projeleri geliştiriyoruz, bulut tarafında da NVMe diskli VPS sunuyoruz. Sitenin hem doğru kurulması hem hızlı barınması için hizmetlerimizi inceleyebilir, planlamak için bizimle iletişime geçebilirsin.Özetle nextjs, SEO uyumlu site kurmanın yükünü büyük ölçüde hafifletir. Metadata API ile meta verileri yönet, içeriğine uygun render yöntemini seç, sitemap ve structured data ekle. Küçük bir projeyle başla, metrikleri ölç, sonra büyüt.