Next.js App Router ile Dinamik Metadata ve OpenGraph (SEO) Nasıl Yapılır?

1. Giriş ve Karşılaşılan Temel Zorluklar

Statik sayfa başlıkları dinamik blog veya ürün sayfalarında yetersiz kalır. Eksik OpenGraph etiketleri ise sosyal medyada link paylaşıldığında görselin boş görünmesine neden olur.

Modern kurumsal yazılım mimarisinde bu adımı doğru tasarlamak; hem uygulamanın bakım maliyetini (maintainability) düşürür hem de gelecekteki ölçekleme (scaling) süreçlerinde refactor ihtiyacını en aza indirir. Bu rehberde, sektörde kabul görmüş standartlar ışığında adım adım uygulamayı ele alıyoruz.

2. Ortam Hazırlığı ve Gerekli Bağımlılıklar

Geliştirmeye başlamadan önce sistem ortamınızın ve ilgili paketlerin hazır olduğundan emin olmalısınız. Terminalinizde aşağıdaki komutları çalıştırarak ilgili yapılandırmayı tamamlayın:

• Adım: Sayfa dosyanızda (page.tsx) 'generateMetadata' fonksiyonunu export edin.
• Adım: Veritabanından slug ile ilgili kaydı çekerek Metadata nesnesini doldurun.

3. Uygulama Mimarisi ve Kod Örneği

Aşağıdaki kod bloğunda, temiz kod (Clean Code) prensiplerine ve SOLID standartlarına uygun olarak tasarlanmış örnek implementasyonu inceleyebilirsiniz:

import { Metadata } from 'next';
import { getProductBySlug } from '@/lib/api';

interface PageProps {
  params: Promise<{ slug: string }>;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const product = await getProductBySlug(slug);

  if (!product) {
    return { title: 'Ürün Bulunamadı | CB DIGITAL' };
  }

  const url = `https://cbdigital.com.tr/urunler/${slug}`;

  return {
    title: `${product.name} | En Uygun Fiyat & Hızlı Teslimat`,
    description: product.summary,
    alternates: { canonical: url },
    openGraph: {
      title: product.name,
      description: product.summary,
      url,
      siteName: 'CB DIGITAL',
      images: [{ url: product.imageUrl, width: 1200, height: 630 }],
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: product.name,
      images: [product.imageUrl],
    },
  };
}

4. Kod Analizi ve Çalışma Mantığı

generateMetadata fonksiyonu sayfa HTML'i üretilmeden önce sunucuda çalışır ve etiketleri arasına tüm canonical, title, description ve OG taglerini eksiksiz yerleştirir.

Yukarıdaki implementasyonda dikkat edilmesi gereken en kritik husus, işlemlerin bağımsız (decoupled) ve test edilebilir şekilde katmanlara ayrılmış olmasıdır. Bu yaklaşım, birim testlerin (Unit Tests) ve entegrasyon testlerinin hızlıca yazılabilmesine olanak tanır.

5. Performans ve Güvenlik İpuçları

Canlı üretim (production) ortamında sistemin kararlı çalışması için aşağıdaki pratikleri mutlaka dikkate almalısınız:

• Görsel boyutlarını 1200x630 piksel oranında tutarak tüm sosyal platformlarda net görünmesini sağlayın.
• Title etiketlerinde 'Sayfa Başlığı | Marka Adı' hiyerarşisine sadık kalın.
• Canonical URL tanımlayarak parametreli URL'lerin kopya içerik oluşturmasını engelleyin.

6. En Sık Yapılan Hatalar ve Hata Ayıklama (Troubleshooting)

Next.js 15 ile params nesnesinin Promise haline geldiğini unutup 'await params' yapmamak runtime hatasına neden olur.

Eğer beklenmedik bir hata ile karşılaşırsanız; öncelikle log dosyalarını incelemeli, ortam değişkenlerinin (.env) doğru tanımlandığını doğrulamalı ve önbellek (cache) mekanizmalarını temizleyerek sistemi yeniden başlatmalısınız.

7. Sonuç ve Mimari Değerlendirme

Dinamik metadata mimarisi, organik Google sıralamasında rakiplerin önüne geçmenin temel yapı taşıdır.

Cengiz Bozdemir olarak 18 yılı aşkın kurumsal yazılım mimarlığı deneyimimle tavsiyem; sistem tasarımında her zaman sürdürülebilirlik, güvenlik ve yüksek eşzamanlılık (high concurrency) hedeflerini ön planda tutmanızdır. Kurumsal projelerinizde özel mimari danışmanlık veya uçtan uca yazılım geliştirme desteği için bizimle iletişime geçebilirsiniz.