App Router میں SEO tags (<title>، <meta>، Open Graph، وغیرہ) کے لیے ایک built-in Metadata API ہے — آپ layout.tsx یا page.tsx سے metadata کو export کرتے ہیں اور Next.js صحیح <head> tags کو render کرتا ہے۔
App Router میں SEO tags (<title>، <meta>، Open Graph، وغیرہ) کے لیے ایک built-in Metadata API ہے — آپ layout.tsx یا page.tsx سے metadata کو export کرتے ہیں اور Next.js صحیح <head> tags کو render کرتا ہے۔
// 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 exported metadata object کو پڑھتا ہے اور <title>، <meta name="description"، OG tags وغیرہ تیار کرتا ہے — کوئی manual <head> editing کی ضرورت نہیں۔
ان صفحات کے لیے جن کا title fetched content پر منحصر ہے (ایک blog post، ایک product)، ایک async generateMetadata function کو export کریں:
// 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] },
};
}
یہ server پر چلتا ہے اور ہر dynamic page کو accurate، content-specific metadata رکھنے دیتا ہے — dynamic content کی SEO اور social sharing کے لیے ضروری ہے۔
// 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 میں defined metadata کو child pages کے ساتھ merge کیا جاتا ہے (اور انہیں override کیا جا سکتا ہے) — تو آپ site-wide defaults ایک بار سیٹ کرتے ہیں اور جہاں ضروری ہو وہاں per-page values سیٹ کرتے ہیں۔ template خودکار طور پر site کا نام append کرتا ہے۔
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
خصوصی files خود بخود corresponding metadata/routes تیار کرتی ہیں۔
اچھی metadata SEO اور social-share previews کو چلاتی ہے۔
Metadata API اسے declarative اور type-safe بناتا ہے — static metadata fixed pages کے لیے، async generateMetadata data-driven pages کے لیے، اور layout-level defaults templates کے ساتھ — manual <head> management کو ایک clean، server-rendered system سے بدل دیتے ہیں۔