Next.js'te SEO için metadata nasıl yönetilir? generateMetadata ne işe yarar?

App Router'da <head> elle yazılmaz; layout veya page dosyasından `metadata` nesnesi (statik) ya da `generateMetadata` fonksiyonu (dinamik) export edilir. Next.js bunları birleştirip <title>, <meta>, Open Graph ve canonical etiketlerini sunucuda üretir.

Statik

// app/layout.tsx
export const metadata = {
  metadataBase: new URL("https://example.com"),
  title: { default: "DevShop", template: "%s | DevShop" },
  description: "Geliştiriciler için ürünler",
};

Dinamik

// app/products/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const { slug } = await params; // Next 15+'da params bir Promise
  const product = await getProduct(slug);
  return {
    title: product.name,
    description: product.summary,
    alternates: { canonical: `/products/${slug}` },
    openGraph: { images: [product.imageUrl] },
  };
}

getProduct sayfa bileşeninde de çağrılıyorsa aynı istek tekilleştirilir (fetch memoization veya React.cache).

Diğer SEO dosyaları

• app/sitemap.ts ve app/robots.ts: dinamik sitemap ve robots.txt üretir.
• opengraph-image.tsx: sosyal medya paylaşım görselini kodla üretir.
• Yapılandırılmış veri için sayfaya JSON-LD <script type="application/ld+json"> eklenir.

Unutulmaması gerekenler

• Her sayfaya benzersiz title ve description.
• Çok dilli sitede alternates.languages ile hreflang.
• İçerik sunucuda render edildiği için (RSC/SSR) arama motorları JavaScript çalıştırmadan metni görür; bu, SPA'lara göre ana avantajdır.