App Router मा SEO ट्यागहरु (<title>, <meta>, Open Graph, आदि) को लागि built-in Metadata API छ — तपाई layout.tsx वा page.tsx बाट metadata export गर्नुहुन्छ र Next.js सही <head> ट्यागहरु render गर्छ।
App Router मा SEO ट्यागहरु (<title>, <meta>, Open Graph, आदि) को लागि built-in Metadata API छ — तपाई layout.tsx वा page.tsx बाट metadata export गर्नुहुन्छ र Next.js सही <head> ट्यागहरु 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 ट्यागहरु, आदि उत्पन्न गर्छ — कुनै पनि manually <head> सम्पादन गर्न आवश्यक छैन।
पृष्ठहरुको लागि जसको शीर्षक fetch गरिएको सामग्रीमा निर्भर गर्छ (ब्लग पोस्ट, उत्पाद), 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] },
};
}
यो सर्भरमा चल्छ र प्रत्येक dynamic पृष्ठलाई सटीक, content-specific metadata हुन दिन्छ — SEO र dynamic सामग्रीको सामाजिक साझेदारीको लागि आवश्यक।
// 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 मा परिभाषित Metadata बच्चा पृष्ठहरु द्वारा मर्ज गरिन्छ (र override गर्न सकिन्छ) — त्यसैले तपाई साइट-wide defaults एक पटक सेट गर्नुहुन्छ र जहाँ आवश्यक छ वहाँ per-page मानहरु। template स्वचालित रूपमा साइटको नाम जोड्छ।
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
विशेष फाइलहरु संबंधित metadata/routes स्वचालित रूपमा उत्पन्न गर्छन्।
राम्रो metadata ले SEO र social-share previews को ड्राइभ गर्छ।
Metadata API ले यसलाई declarative र type-safe बनाउँछ — static metadata fixed पृष्ठहरुको लागि, async generateMetadata data-driven पृष्ठहरुको लागि, र layout-level defaults with templates — manually <head> management को साथ बदलिएको क्लीन, server-rendered system।