मेटाडेटा, SEO और दस्तावेज़ हेड
मज़बूत SEO और सोशल शेयरिंग के लिए Next.js 15 Metadata API से पृष्ठ शीर्षक, विवरण, Open Graph टैग और फ़ेविकॉन कॉन्फ़िगर करें।
मेटाडेटा, SEO और दस्तावेज़ हेड, CoddyKit पर Next.js 15 पूर्ण-स्टैक वेब ऐप का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Next.js 15 पूर्ण-स्टैक वेब ऐप सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
मेटाडेटा क्यों महत्वपूर्ण है
सर्च इंजन और सोशल प्लेटफ़ॉर्म परिणाम और लिंक प्रीव्यू बनाने के लिए आपके मेटाडेटा को पढ़ते हैं — इसलिए शीर्षक और विवरण क्लिक तथा रैंकिंग को प्रभावित करते हैं।
मेटाडेटा API
Next.js 15 मैन्युअल <head> संपादन की जगह घोषणात्मक मेटाडेटा API देता है: metadata ऑब्जेक्ट या generateMetadata निर्यात करें और यह टैग रेंडर कर देगा।
स्थिर मेटाडेटा निर्यात
जो मेटाडेटा कभी नहीं बदलता, उसके लिए टाइप किया हुआ metadata ऑब्जेक्ट निर्यात करें — Next.js इसे दस्तावेज़ के हेड में अपने-आप मिला देता है।
export const metadata = {
title: 'My Dashboard',
description: 'Manage your account and settings',
};
export default function Page() {
return <h1>Dashboard</h1>;
}शीर्षक टेम्पलेट
लेआउट में शीर्षक टेम्पलेट सेट करें, ताकि चाइल्ड पेज एक प्रत्यय साझा करें। %s प्लेसहोल्डर को प्रत्येक पेज के अपने शीर्षक से बदल दिया जाता है।
export const metadata = {
title: {
template: '%s | Acme',
default: 'Acme',
},
};गतिशील मेटाडेटा
जब शीर्षक डेटा पर निर्भर करता है, तो एक async generateMetadata फ़ंक्शन निर्यात करें — इसे रूट पैरामीटर मिलते हैं और यह रेंडर करने से पहले डेटा प्राप्त कर सकता है।
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return { title: post.title, description: post.excerpt };
}Open Graph टैग
Open Graph मेटाडेटा यह नियंत्रित करता है कि साझा किए जाने पर कोई लिंक कैसा दिखेगा। शीर्षक, विवरण और इमेज के साथ openGraph फ़ील्ड जोड़ें।
export const metadata = {
openGraph: {
title: 'Acme Launch',
description: 'The new way to build apps',
images: ['/og-launch.png'],
},
};Twitter कार्ड
Twitter/X अपने कार्ड मेटाडेटा का उपयोग करता है। आपका लिंक पोस्ट किए जाने पर दिखने वाले प्रीव्यू को नियंत्रित करने के लिए twitter फ़ील्ड सेट करें।
export const metadata = {
twitter: {
card: 'summary_large_image',
title: 'Acme Launch',
images: ['/og-launch.png'],
},
};फ़ेविकॉन और आइकन
app/ में विशेष फ़ाइलें रखें और Next.js उन्हें अपने-आप जोड़ देगा: टैब के लिए favicon.ico, ऐप के लिए icon.png और iOS के लिए apple-icon.png।
गतिशील OG इमेज
Next.js सोशल इमेज को तुरंत जनरेट कर सकता है: ImageResponse का उपयोग करने वाला opengraph-image.tsx प्रत्येक पेज के लिए JSX को PNG में रेंडर करता है।
import { ImageResponse } from 'next/og';
export default function Image() {
return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}रोबोट और साइटमैप
robots.ts फ़ाइल से क्रॉलर को निर्देश दें और sitemap.ts प्रकाशित करें, ताकि सर्च इंजन हर रूट ढूँढ़ सकें — दोनों साधारण सीरियलाइज़ किए जा सकने वाले डेटा को निर्यात करते हैं।
export default function robots() {
return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}सर्वोत्तम अभ्यास
मज़बूत SEO के लिए: प्रत्येक पेज का शीर्षक और विवरण अलग रखें, शीर्षक लगभग 60 वर्णों से कम रखें, हमेशा Open Graph इमेज दें और गतिशील रूट के लिए generateMetadata का उपयोग करें।
त्वरित जाँच
मेटाडेटा के बारे में अपनी समझ जाँचें।
पुनरावलोकन
आपने मेटाडेटा API सीखा: स्थिर metadata बनाम generateMetadata, शीर्षक टेम्पलेट, openGraph/twitter प्रीव्यू और विशेष आइकन/SEO फ़ाइलें।
एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 12
- पाठ
- 48
अक्सर पूछे जाने वाले प्रश्न
क्या “मेटाडेटा, SEO और दस्तावेज़ हेड” पाठ निःशुल्क है?
हाँ—“मेटाडेटा, SEO और दस्तावेज़ हेड” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“मेटाडेटा, SEO और दस्तावेज़ हेड” में मैं क्या सीखूँगा?
मज़बूत SEO और सोशल शेयरिंग के लिए Next.js 15 Metadata API से पृष्ठ शीर्षक, विवरण, Open Graph टैग और फ़ेविकॉन कॉन्फ़िगर करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 पूर्ण-स्टैक वेब ऐप का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Next.js 15 पूर्ण-स्टैक वेब ऐप शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 पूर्ण-स्टैक वेब ऐप शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“मेटाडेटा, SEO और दस्तावेज़ हेड” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Next.js 15 का परिचय
- प्रोजेक्ट सेटअप और कॉन्फ़िगरेशन
- पेज, लेआउट और रूटिंग की मूल बातें
- मेटाडेटा, SEO और दस्तावेज़ हेड