</>hamza.ince
← Blog
Yazı
· 20 dakika· Web Geliştirme

Next.js 15 SEO Optimizasyonu: Modern Web Geliştirme Rehberi

Next.js 15'in yeni özelliklerini kullanarak web sitenizin SEO performansını artırma ve modern SEO tekniklerini öğrenme.

Next.js 15 SEO Optimizasyonu: Modern Web Geliştirme Rehberi

Next.js 15, SEO optimizasyonu için birçok yeni özellik ve iyileştirme sunuyor. Bu kapsamlı rehberde, Next.js 15'in tüm SEO özelliklerini detaylı olarak inceleyeceğiz.

🎯 Next.js 15'teki Yeni SEO Özellikleri

Next.js 15, SEO performansını artırmak için birçok yenilik getiriyor:

1. Gelişmiş Metadata API

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: 'Hamza İnce - React Developer',
    template: '%s | Hamza İnce'
  },
  description: 'Professional React & React Native Developer',
  keywords: ['React', 'Next.js', 'JavaScript', 'TypeScript'],
  authors: [{ name: 'Hamza İnce' }],
  creator: 'Hamza İnce',
  publisher: 'Hamza İnce',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  metadataBase: new URL('https://hamzaince.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'tr-TR': '/tr-TR',
    },
  },
  openGraph: {
    title: 'Hamza İnce - React Developer',
    description: 'Professional React & React Native Developer',
    url: 'https://hamzaince.com',
    siteName: 'Hamza İnce Portfolio',
    images: [
      {
        url: '/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'Hamza İnce Portfolio',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Hamza İnce - React Developer',
    description: 'Professional React & React Native Developer',
    images: ['/twitter-image.jpg'],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}

2. Dinamik Metadata

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

type Props = {
  params: { slug: string }
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getBlogPost(params.slug)
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.featuredImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.featuredImage],
    },
  }
}

⚡ Core Web Vitals Optimizasyonu

Google'ın Core Web Vitals metrikleri için Next.js 15 optimizasyonları:

1. Largest Contentful Paint (LCP) Optimizasyonu

// app/layout.tsx
import Image from 'next/image'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {/* Preload critical images */}
        {/* Removed preload for missing hero image */}
        
        {/* Optimize images */}
        {/* Removed missing hero image usage */}
        
        {children}
      </body>
    </html>
  )
}

2. First Input Delay (FID) Optimizasyonu

// app/page.tsx
'use client'

import { useEffect } from 'react'

export default function HomePage() {
  useEffect(() => {
    // Defer non-critical JavaScript
    const loadNonCriticalJS = () => {
      import('./non-critical-script.js')
    }
    
    // Load after user interaction or delay
    setTimeout(loadNonCriticalJS, 2000)
  }, [])
  
  return (
    <div>
      {/* Critical content first */}
      <h1>Welcome to My Portfolio</h1>
    </div>
  )
}

3. Cumulative Layout Shift (CLS) Optimizasyonu

// app/blog/page.tsx
import Image from 'next/image'

🔍 Structured Data Implementation

Schema.org structured data ile SEO performansını artırma:

// components/StructuredData.tsx
export function StructuredData({ data }: { data: any }) {
  const structuredData = {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Hamza İnce",
    "jobTitle": "React Developer",
    "description": "Professional React & React Native Developer",
    "url": "https://hamzaince.com",
    "image": "https://hamzaince.com/images/hamza-ince.jpg",
    "sameAs": [
      "https://github.com/hamzaince",
      "https://linkedin.com/in/hamzaince"
    ],
    "worksFor": {
      "@type": "Organization",
      "name": "Freelance"
    },
    "knowsAbout": [
      "React",
      "React Native",
      "JavaScript",
      "TypeScript",
      "Next.js"
    ]
  }
  
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify(structuredData),
      }}
    />
  )
}

📊 Performance Monitoring

Web Vitals API ile performans izleme:

// lib/analytics.ts
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'

export function reportWebVitals(metric: any) {
  // Send to analytics service
  if (typeof window !== 'undefined') {
    // Google Analytics 4
    gtag('event', metric.name, {
      value: Math.round(metric.value),
      event_label: metric.id,
      non_interaction: true,
    })
    
    // Custom analytics
    fetch('/api/analytics', {
      method: 'POST',
      body: JSON.stringify(metric),
    })
  }
}

// app/layout.tsx
export function reportWebVitals(metric: any) {
  reportWebVitals(metric)
}

🤖 SEO Testing ve Validasyon

Lighthouse CI ile otomatik SEO testleri:

# .lighthouserc.js
module.exports = {
  ci: {
    collect: {
      url: ['https://hamzaince.com'],
      settings: {
        chromeFlags: '--no-sandbox',
      },
    },
    assert: {
      assertions: {
        'categories:seo': ['error', { minScore: 0.9 }],
        'categories:performance': ['warn', { minScore: 0.8 }],
        'categories:accessibility': ['warn', { minScore: 0.8 }],
        'categories:best-practices': ['warn', { minScore: 0.8 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
}

🚀 Advanced SEO Techniques

1. Dynamic Sitemap Generation

// app/sitemap.xml/route.ts
import { getAllBlogPosts } from '@/data/blogPosts'

export async function GET() {
  const posts = getAllBlogPosts()
  
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://hamzaince.com</loc>
    <lastmod>${new Date().toISOString()}</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  ${posts.map(post => `
  <url>
    <loc>https://hamzaince.com/blog/${post.slug}</loc>
    <lastmod>${post.date}</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  `).join('')}
</urlset>`
  
  return new Response(sitemap, {
    headers: {
      'Content-Type': 'application/xml',
    },
  })
}

2. Robots.txt Optimization

// app/robots.txt/route.ts
export async function GET() {
  const robotsTxt = `User-agent: *
Allow: /

# Sitemaps
Sitemap: https://hamzaince.com/sitemap.xml

# Crawl delay
Crawl-delay: 1

# Disallow admin areas
Disallow: /admin/
Disallow: /api/
Disallow: /_next/
`
  
  return new Response(robotsTxt, {
    headers: {
      'Content-Type': 'text/plain',
    },
  })
}

📱 Mobile-First SEO

Mobil öncelikli SEO optimizasyonları:

// app/layout.tsx
export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 5,
  userScalable: true,
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'white' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
}

🎨 Visual SEO Elements

Görsel SEO öğeleri ile kullanıcı deneyimini artırma:

1. Favicon Optimization

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = {
  width: 32,
  height: 32,
}

export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 24,
          background: 'linear-gradient(90deg, #0070f3 0%, #00d4ff 100%)',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          fontWeight: 'bold',
        }}
      >
        HI
      </div>
    ),
    {
      ...size,
    }
  )
}

2. Open Graph Image Generation

// app/og-image/route.tsx
import { ImageResponse } from 'next/og'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') || 'Default Title'
  
  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#1a1a1a',
          backgroundImage: 'linear-gradient(45deg, #1a1a1a 25%, transparent 25%), linear-gradient(-45deg, #1a1a1a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a1a1a 75%), linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)',
          backgroundSize: '20px 20px',
          backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
        }}
      >
        <div
          style={{
            display: 'flex',
            fontSize: 60,
            fontWeight: 'bold',
            color: 'white',
            textAlign: 'center',
            maxWidth: '80%',
          }}
        >
          {title}
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  )
}

🔧 SEO Audit Tools

SEO performansını izlemek için kullanılabilecek araçlar:

  • Google Search Console: Arama performansı ve hata takibi
  • Google PageSpeed Insights: Core Web Vitals analizi
  • Lighthouse: Kapsamlı performans ve SEO analizi
  • GTmetrix: Detaylı performans raporları
  • Screaming Frog: SEO teknik analizi

📈 SEO Monitoring Dashboard

SEO performansını izlemek için dashboard oluşturma:

// app/admin/seo/page.tsx
'use client'

import { useEffect, useState } from 'react'

export default function SEODashboard() {
  const [metrics, setMetrics] = useState(null)
  
  useEffect(() => {
    const fetchMetrics = async () => {
      const response = await fetch('/api/seo-metrics')
      const data = await response.json()
      setMetrics(data)
    }
    
    fetchMetrics()
  }, [])
  
  return (
    <div className="seo-dashboard">
      <h1>SEO Performance Dashboard</h1>
      
      <div className="metrics-grid">
        <div className="metric-card">
          <h3>Core Web Vitals</h3>
          <div className="metric">
            <span>LCP: {metrics?.lcp || 'N/A'}</span>
          </div>
          <div className="metric">
            <span>FID: {metrics?.fid || 'N/A'}</span>
          </div>
          <div className="metric">
            <span>CLS: {metrics?.cls || 'N/A'}</span>
          </div>
        </div>
        
        <div className="metric-card">
          <h3>Search Performance</h3>
          <div className="metric">
            <span>Impressions: {metrics?.impressions || 'N/A'}</span>
          </div>
          <div className="metric">
            <span>Clicks: {metrics?.clicks || 'N/A'}</span>
          </div>
          <div className="metric">
            <span>CTR: {metrics?.ctr || 'N/A'}</span>
          </div>
        </div>
      </div>
    </div>
  )
}

🚀 Sonuç

Next.js 15'in SEO özellikleri ile modern web standartlarına uygun, performanslı ve arama motorları tarafından kolayca indekslenebilen web siteleri geliştirebilirsiniz. Bu rehberdeki teknikleri uygulayarak SEO performansınızı önemli ölçüde artırabilirsiniz.

Önemli Noktalar:

  • Metadata API'yi etkin kullanın
  • Core Web Vitals metriklerini optimize edin
  • Structured data ile zengin sonuçlar oluşturun
  • Performans izleme sistemleri kurun
  • SEO audit araçlarını düzenli kullanın