App Router SEO ట్యాగ్ల (<title>, <meta>, Open Graph, మొదలైనవి) కోసం నిర్మిత Metadata API కలిగి ఉంది — మీరు layout.tsx లేదా page.tsx నుండి మెటాడేటాను ఎగుమతి చేస్తారు మరియు Next.js సరైన <head> ట్యాగ్లను రెండర్ చేస్తుంది.
App Router SEO ట్యాగ్ల (<title>, <meta>, Open Graph, మొదలైనవి) కోసం నిర్మిత Metadata 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 మరియు సామాజిక-భాగస్వామ్య పూర్వावలోకనాలను నడుపుతుంది.
Metadata API ఇది డిక్లరేటివ్ మరియు టైప్-సేఫ్గా చేస్తుంది — స్థిర పేజీల కోసం స్టాటిక్ metadata, డేటా-నడిచే పేజీల కోసం ఎసింక్ generateMetadata, మరియు టెంప్లేట్ల ఉపయోగంతో లేআউట్-స్థాయి డిఫాల్ట్లు — ఆటోమేటిక్ <head> నిర్వహణను శుద్ధమైన, సర్వర్-రెండర్ చేసిన వ్యవస్థతో భర్తీ చేస్తుంది.