App Router मध्ये SEO टॅग्स (<title>, <meta>, Open Graph, इत्यादी) साठी एक अंतर्निर्मित मेटाडेटा API आहे — आप layout.tsx किंवा page.tsx पासून मेटाडेटा निर्यात करता आणि Next.js योग्य <head> टॅग्स प्रदान करतो।
App Router मध्ये SEO टॅग्स (<title>, <meta>, Open Graph, इत्यादी) साठी एक अंतर्निर्मित मेटाडेटा API आहे — आप layout.tsx किंवा page.tsx पासून मेटाडेटा निर्यात करता आणि 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> ला हाताने संपादित करण्याची आवश्यकता नाही।
ज्या पृष्ठांचे शीर्षक मिळविलेल्या सामग्रीवर अवलंबून आहे (ब्लॉग पोस्ट, उत्पाद), एक अ-समकालिक 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"
};
लेआउटमध्ये परिभाषित केलेले मेटाडेटा बाल पृष्ठांसह विलीन होते (आणि त्यांच्याद्वारे ओव्हरराइड केले जाऊ शकते) — त्यामुळे आप एक वेळ साइट-व्यापी डिफॉल्ट सेट करता आणि जिथे आवश्यक असेल तेथे प्रति-पृष्ठ मूल्ये सेट करता. template स्वयंचलितपणे साइट नाव जोडतो।
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
विशेष फाइलें स्वयंचलितपणे संबंधित मेटाडेटा/मार्ग व्युत्पन्न करतात।
चांगली मेटाडेटा SEO आणि सामाजिक-शेअर पूर्वावलोकने चालिते।
मेटाडेटा API हे घोषणात्मक आणि प्रकार-सुरक्षित बनवते — स्थिर metadata निश्चित पृष्ठांसाठी, डेटा-संचालित पृष्ठांसाठी अ-समकालिक generateMetadata, आणि टेम्पलेट्स सह लेआउट-स्तरीय डिफॉल्ट्स — व्यक्तिगत <head> व्यवस्थापनास स्वच्छ, सर्वर-प्रदान केलेल्या प्रणालीसह बदलते।