Next.js, React ekosisteminde SEO konusunda en güçlü çözümlerinden birini sizlere sunmaktadır. Ancak şunu da unutmayalım; Next.js tek başına SEO konusunda başarı getirmez. Sıralamada başarılı olan projelerde; mimari kararlar, render stratejileri, performans optimizasyonları ve arama motoru sinyallerinin doğru yönetimi en belirleyici etkenlerdir.

Bu yazımda, klasik SEO tavsiyelerinin de ötesine geçerek Google'da yüksek sıralama alan Next.js projelerinde kullanılan teknikleri nedenleriyle ve uygulanabilir örnekleriyle ele almaya çalıştım.

1. Doğru Render Stratejisi

Next.js’in SEO gücü, sunduğu farklı render modellerinden gelir. Ancak yanlış sayfada yanlış modeli kullanmak, SEO’yu doğrudan sabote edebilir.

1.1 Server Side Rendering (SSR)

Ne Zaman Kullanılmalı?

• Kategori sayfaları,
• Blog yazıları,
• Ürün listeleme sayfaları,
• Arama sonuç sayfaları.

Neden Kullanılmalı?

Nedeni; Google botları HTML'i anında algılar ve alır. Dolayısı ile içerik, javascript çalışmadan indekslenir.

1.2 Static Site Generation (SSG)

    export const dynamic = "force-static";

Nerede Kullanılmalı?

• Landing sayfalar,
• Hakkımızda, iletişim vb,
• Sabit blog içerikleri.

Avantajları

• Çok hızlı yükleme,
• Core Web Vitals skorlarında ciddi artış,
• Google crawl bütçesi dostu.

1.3 Incremental Static Regeneration (ISG)

    export const revalidate = 3600; // 1 saat

Avantajları

• Güncel içerik,
• Static hız,
• Düşün sunucu maliyeti.

Not: ISR, büyük e-ticaret sitelerinde olmazsa olmazdır.

2. App Router'da Metadata API'yi SEO Silahına Dönüştürme

Next.js App Router ile gelen generateMetadata, SEO'yu manuel yönetmekten kurtarır.

    export async function generateMetadata({ params }) {
        const product = await getProduct(params.slug);

        return {
            title: `${product.name} | Marka Adı`,
            description: product.shortDescription,
            openGraph: {
                title: product.name,
                images: [product.image]
            }
        };
    }

İpuçları

• title, dinamik ve anahtar kelime içeren yapı ile kullanılmalı,
• Aynı title, birden fazla sayfada kullanılabilir,
• description CTR içindir, sıralama için değildir.

3. Google'ın En Sevdiği URL Yapısı (Next.js'e Özel)

Yanlış URL yapısı, en iyi içeriği bile olumsuz etkiler. Dolayısıyla URL yapısının temiz ve anlamlı olması önemlidir. /blog/page?title=asd tarzındaki yaklaşımlar kabul edilemez.

    /blog/next-js-seo-rehberi

4. Core Web Vitals

Next.js projelerinde SEO'nun yaklaşık olarak %40'ı performanstır. Dolayısıyla uygulamalarınızda yer alan resimler ve fontların optimize edilmesi, SEO'ya olumlu yönden etkisi vardır.

4.1. Image Optimization

    import Image from "next/image";

    <Image
        src={product.image}
        alt={product.name}
        width={600}
        height={400}
        priority
    />

Avantajları

• LCP değerini düşürür,
• Uygulamanıza görsel aramalardan da trafik gelir.

4.2. Font Optimization

    import { Inter } from "next/font/google";

    const inter = Inter({ subsets: ["latin"] });

Not: CLS problemlerinin yaklaşık olarak %70'i font kaynaklı problemlerdir.

5. Dahili Linkler: En Çok Atlanan SEO Gücü

Google, sitenizi linklerle okur.

    <Link href="/kategori/next-js">Next.js Eğitimleri</Link>

6. Sitemap ve Robots.txt (App Router Uyumlu)

sitemap.ts

    export default function sitemap() {
        return [
            {
                url: "https://siteadi.com",
                lastModified: new Date(),
            }
        ];
    }

robots.ts

    export default function robots() {
        return {
            rules: {
                userAgent: "*",
                allow: "/",
            },
            sitemap: "https://siteadi.com/sitemap.xml",
        };
    }

Not: Sitemap olmadan SEO işlemleri yapılamaz, ama sitemap tek başına SEO değildir.

7. Indekslenmeyen Sayfalarda Yapılan Hatalar

• noindex meta etiketinin yanlış kullanımı,
• Client component içinde SEO çalışmaları,
• Aynı içeriğin farklı URL'lerde servis edilmesi,
• Query parametreli sayfaların kontrolsüz ve yanlış bir şekilde indekslenmesi.

8. Doğru Uygulanmış SEO

• Doğru render modeli,
• Dinamik metadata,
• Hızlı LCP (<2.5s),
• Temiz URL,
• Güçlü dahili link,
• Sitemap & Robots.txt

Sonuç

Next.js, SEO için doğru kullanıldığı takdirde güçlü bir araçtır.
Eğer Next.js ile geliştirmiş olduğunuz projeniz Google'da görünmüyor ise bu sorun Next.js'ten değil, render stratejisi, performans ve ya içerik hiyeyarşisi kaynaklı sorundur.