Next.js ile SEO Dostu Web Sitesi Nasıl Kurulur? 2025 Rehberi

Next.js, React tabanlı uygulamalar için SEO optimizasyonunu kolaylaştıran en güçlü framework'lerden biridir. Bu rehberde, Next.js ile SEO dostu bir web sitesi nasıl kurulacağını adım adım öğreneceksiniz.

Next.js SEO Avantajları

Next.js'in SEO konusunda sağladığı temel avantajlar şunlardır:

🚀

Server-Side Rendering (SSR)

Sayfalar sunucu tarafında render edilerek arama motorları için optimize edilir

⚡

Static Generation (SSG)

Statik sayfalar build time'da oluşturularak ultra hızlı yükleme sağlanır

🎯

Automatic Code Splitting

Her sayfa için gereken kod ayrı ayrı yüklenerek performans artırılır

🔍

Meta Tag Management

next/head ile dinamik meta tag yönetimi kolaylıkla yapılır

Geleneksel React vs Next.js SEO

SEO Performans Karşılaştırması

Next.js'in SEO avantajları

İlk İçerik Yükleme (FCP) < 1.5s 2-4s

Arama Motoru Crawling Mükemmel Sorunlu

Social Media Preview Otomatik Manuel

Lighthouse SEO Skoru 90-100 60-80

Next.js Projesi Kurulumu

İlk olarak yeni bir Next.js projesi oluşturalım:

Proje Oluşturma

                        # Next.js projesi oluştur

                        npx create-next-app@latest my-seo-website

                        cd my-seo-website

                        # Gerekli SEO paketlerini yükle

                        npm install next-seo next-sitemap

SEO Konfigürasyonu

next-seo paketi ile varsayılan SEO ayarlarını yapılandıralım:

                        // next-seo.config.js

                        export default {

                          title: 'WebKodlama.net',

                          description: 'Modern web geliştirme hizmetleri',

                          openGraph: {

                            type: 'website',

                            locale: 'tr_TR',

                            url: 'https://webkodlama.net',

                            site_name: 'WebKodlama.net'

                          }

                        };

Pages Router ile Meta Tags

Her sayfa için özel meta tag'lar ekleyelim:

                        // pages/index.js

                        import { NextSeo } from 'next-seo';

                        export default function Home() {

                          return (

                            <>

                              <NextSeo

                                title="Ana Sayfa | WebKodlama.net"

                                description="Modern web geliştirme hizmetleri"

                                canonical="https://webkodlama.net"

                              />

                              <h1>Hoş Geldiniz</h1>

                            </>

                          );

                        }

App Router (Next.js 13+) ile SEO

Next.js 13'ün App Router özelliği ile SEO daha da kolaylaşıyor:

                    // app/layout.js

                    export const metadata = {

                      title: {

                        default: 'WebKodlama.net',

                        template: '%s | WebKodlama.net'

                      },

                      description: 'Modern web geliştirme hizmetleri',

                      keywords: ['web tasarım', 'react', 'nextjs']

                    };

Dinamik Meta Tags

Blog yazıları gibi dinamik içerik için meta tag'ları nasıl oluşturabiliriz:

                    // app/blog/[slug]/page.js

                    export async function generateMetadata({ params }) {

                      const post = await getPost(params.slug);

                      return {

                        title: post.title,

                        description: post.excerpt,

                        openGraph: {

                          images: [post.image]

                        }

                      };

                    }

XML Sitemap Oluşturma

next-sitemap paketi ile otomatik sitemap oluşturalım:

Sitemap Konfigürasyonu

                        // next-sitemap.config.js

                        module.exports = {

                          siteUrl: 'https://webkodlama.net',

                          generateRobotsTxt: true,

                          changefreq: 'weekly',

                          priority: 0.7,

                          exclude: ['/admin/*']

                        };

                        // package.json scripts

                        {

                          "scripts": {

                            "build": "next build && next-sitemap"

                          }

                        }

Structured Data (JSON-LD)

Arama motorları için yapılandırılmış veri ekleyelim:

                    // components/JsonLd.js

                    export default function JsonLd({ data }) {

                      return (

                        <script

                          type="application/ld+json"

                          dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}

                        />

                      );

                    }

Performance Optimizasyon

Next.js'in built-in özelliklerini SEO için optimize edelim:

< 100ms

Server Response Time

95+

Lighthouse SEO Score

< 1.5s

First Contentful Paint

100%

Mobile Friendly

Image Optimization

                    // Next.js Image component with SEO

                    import Image from 'next/image';

                    <Image

                      src="/hero.jpg"

                      alt="WebKodlama.net Hero Image"

                      width={1200}

                      height={600}

                      priority

                      placeholder="blur"

                    />

SEO Best Practices

Next.js SEO Kontrol Listesi

Her sayfada unique title ve description kullanın
Canonical URL'leri doğru ayarlayın
Open Graph ve Twitter Card meta tags ekleyin
XML sitemap ve robots.txt oluşturun
Structured data (JSON-LD) kullanın
Görsellerde alt attribute kullanın
Internal linking stratejisi uygulayın
Mobile-first responsive tasarım
Page speed optimizasyonu yapın
HTTPS kullanın

Dikkat Edilmesi Gerekenler

Next.js'de client-side rendering kullanıyorsanız, SEO için kritik içeriğin server-side render edildiğinden emin olun. useEffect içinde yüklenen veriler arama motorları tarafından görülemez.

Deployment ve Monitoring

SEO dostu Next.js sitenizi yayınladıktan sonra izleme araçlarını kurmayı unutmayın:

Google Search Console: Indexing durumu ve performans
Google Analytics: Trafik analizi
Google PageSpeed Insights: Performans ölçümü
Lighthouse CI: Otomatik performans testleri

Sonuç

Next.js ile SEO dostu web sitesi oluşturmak, framework'ün sunduğu güçlü özellikler sayesinde oldukça kolaydır. Server-side rendering, automatic code splitting ve built-in optimizasyonlar sayesinde hem kullanıcı deneyimi hem de arama motoru optimizasyonu için ideal sonuçlar elde edebilirsiniz.

Profesyonel Next.js Geliştirme

WebKodlama.net olarak, Next.js ile SEO dostu, performans odaklı web siteleri geliştiriyoruz. Modern teknolojiler ve best practice'ler ile projelerinizi hayata geçiriyoruz.

Next.js projeleriniz için profesyonel destek almak istiyorsanız, uzman ekibimizle iletişime geçin.