App Router में SEO टैग्स (<title>, <meta>, Open Graph, आदि) के लिए एक built-in Metadata API है — आप किसी layout.tsx या page.tsx से metadata एक्सपोर्ट करते हैं और Next.js सही <head> टैग्स रेंडर करता है।
App Router में SEO टैग्स (<title>, <meta>, Open Graph, आदि) के लिए एक built-in Metadata API है — आप किसी layout.tsx या page.tsx से metadata एक्सपोर्ट करते हैं और Next.js सही <head> टैग्स रेंडर करता है।
// 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 एक्सपोर्ट किए गए metadata ऑब्जेक्ट को पढ़ता है और <title>, <meta name="description">, OG टैग्स आदि जेनरेट करता है — किसी मैन्युअल <head> एडिटिंग की ज़रूरत नहीं।
ऐसे पेजों के लिए जिनका title फ़ेच किए गए कंटेंट पर निर्भर करता है (कोई ब्लॉग पोस्ट, कोई प्रोडक्ट), एक async generateMetadata फ़ंक्शन एक्सपोर्ट करें:
// 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] },
};
}
यह सर्वर पर चलता है और हर डायनामिक पेज को सटीक, कंटेंट-विशिष्ट मेटाडेटा देने देता है — जो डायनामिक कंटेंट की SEO और सोशल शेयरिंग के लिए अनिवार्य है।
// 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"
};
किसी layout में परिभाषित मेटाडेटा चाइल्ड पेजों के साथ मर्ज होता है (और उनके द्वारा ओवरराइड किया जा सकता है) — इसलिए आप साइट-व्यापी defaults एक बार सेट करते हैं और प्रति-पेज वैल्यूज़ जहाँ ज़रूरत हो वहाँ। template अपने आप साइट का नाम जोड़ देता है।
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
विशेष फ़ाइलें संबंधित मेटाडेटा/रूट्स अपने आप जेनरेट करती हैं।
अच्छा मेटाडेटा SEO और सोशल-शेयर प्रीव्यू को बेहतर बनाता है।
Metadata API इसे डिक्लेरेटिव और type-safe बनाता है — फ़िक्स्ड पेजों के लिए स्टैटिक metadata, डेटा-संचालित पेजों के लिए async generateMetadata, और templates के साथ layout-स्तर के defaults — मैन्युअल <head> प्रबंधन को एक साफ़, सर्वर-रेंडर्ड सिस्टम से बदल देता है।