App Router માં SEO ટૅગ્સ (<title>, <meta>, Open Graph, વગેરે) માટે બિલ્ટ-ઇન Metadata API છે — તમે layout.tsx અથવા page.tsx માંથી metadata એક્સપોર્ટ કરો અને Next.js સાચા <head> ટૅગ્સ રેન્ડર કરે છે.
App Router માં SEO ટૅગ્સ (<title>, <meta>, Open Graph, વગેરે) માટે બિલ્ટ-ઇન 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> એડિટિંગ નથી.
જે પૃષ્ઠોનું શીર્ષક ફેચ કરેલ કન્ટેન્ટ પર નિર્ભર છે (બ્લૉગ પોસ્ટ, પ્રોડક્ટ), તેના માટે 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"
};
લેআઉટમાં વ્યાખ્યાયિત મેટાડેટા બાળ પૃષ્ઠો સાથે મર્જ થાય છે (અને તેનાથી ઓવરライड થઈ શકે છે) — તેથી તમે સાઇટ-વ્યાપક ડિફોલ્ટ્સ એકવાર સેટ કરો અને જરૂર્યાત અનુસાર પ્રતિ-પૃષ્ઠ મૂલ્યો સેટ કરો. template આપોઆપ સાઇટ નામ જોડે છે.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
વિશેષ ફાઇલો આપોઆપ અનુરૂપ મેટાડેટા/રૂટ્સ જનરેટ કરે છે.
વધિયા મેટાડેટા SEO અને સોશ્યલ-શેર પૂર્વાવલોકનોને ચલિત કરે છે.
Metadata API તેને ઘોષણાત્મક અને ટાઇપ-સેફ બનાવે છે — સ્થિર પૃષ્ઠો માટે સ્થિર metadata, ડેટા-ડ્રિવન પૃષ્ઠો માટે async generateMetadata, અને ટેમ્પલેટ્સ સાથે લેઆઉટ-લેવલ ડિફોલ્ટ્સ — મેનુઆલ <head> મેનેજમેન્ટને સ્વચ્છ, સર્વર-રેન્ડર્ડ સિસ્ટમ સાથે બદલે છે.