App Router, SEO etiketleri (<title>, <meta>, Open Graph vb.) için yerleşik bir Metadata API'ye sahiptir — metaları layout.tsx veya page.tsx dosyasından dışa aktarırsınız ve Next.js doğru <head> etiketlerini render eder.
App Router, SEO etiketleri (<title>, <meta>, Open Graph vb.) için yerleşik bir Metadata API'ye sahiptir — metaları layout.tsx veya page.tsx dosyasından dışa aktarırsınız ve Next.js doğru <head> etiketlerini render eder.
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
Next.js, dışa aktarılan metadata nesnesini okur ve <title>, <meta name="description">, OG etiketleri vb. oluşturur — <head> etiketlerinin manuel düzenlenmesine gerek yoktur.
Başlığı alınan içeriğe (blog yazısı, ürün) bağlı olan sayfalar için, async generateMetadata işlevini dışa aktarın:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
Bu işlev sunucuda çalışır ve her dinamik sayfanın doğru, içeriğe özel metaverilerine sahip olmasını sağlar — dinamik içeriğin SEO'su ve sosyal paylaşımı için gereklidir.
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
Bir layoutta tanımlanan metaveri, alt sayfalarla birleştirilir (ve alt sayfalar tarafından geçersiz kılınabilir) — bu nedenle site genelindeki varsayılan değerleri bir kez ayarlarsınız ve gerekli yerlerde sayfa düzeyindeki değerleri ayarlarsınız. template otomatik olarak site adını ekler.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Özel dosyalar ilgili metaveri/rotaları otomatik olarak oluşturur.
İyi metaveri, SEO ve sosyal paylaşım önizlemelerini yönlendirir.
Metadata API bunu bildirimsel ve tipe güvenli hale getirir — statik sayfalar için statik metadata, verilerle yönlendirilen sayfalar için async generateMetadata ve şablonlu sayfa düzeyindeki varsayılanlar — manuel <head> yönetiminin yerini temiz, sunucu tarafından render edilen bir sistem alır.