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 {
  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 (
    
      
        {/* Preload critical images */}
        {/* Removed preload for missing hero image */}
        
        {/* Optimize images */}
        {/* Removed missing hero image usage */}
        
        {children}
      
    
  )
}

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 (
    

      {/* Critical content first */}
      
Welcome to My Portfolio
    
  )
}

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 (