SEO के लिए पेज टाइटल, मेटा टैग और मेटा डिस्क्रिप्शन महत्वपूर्ण हैं। वे पहली चीजें हैं जो एक उपयोगकर्ता SERPS पर देखता है और निर्धारित करता है कि वे आपकी वेबसाइट पर क्लिक करते हैं या नहीं। इसलिए यह महत्वपूर्ण है कि अपनी वेबसाइट के शीर्षक, मेटा टैग और विवरण को अनुकूलित करें।
Next.js में, आप उन्हें कस्टम हेड कंपोनेंट के माध्यम से जोड़ते हैं। आप उन्हें एप्लिकेशन में सभी पृष्ठों पर जोड़ सकते हैं या उन्हें प्रत्येक पृष्ठ के लिए अनुकूलित कर सकते हैं।
सभी Next.js पेजों में ग्लोबल हेड टैग जोड़ना
Next.js पृष्ठों को प्रारंभ करने के लिए _app.js प्रदान करता है। आप इसका उपयोग सभी पृष्ठों पर साझा किए गए मेटा टैग बनाने के लिए कर सकते हैं।
आयात '../styles/globals.css'
आयात सिर से 'अगला/सिर'समारोहMyApp({घटक, पेजप्रॉप्स}) {
वापस करना <>
<सिर>
<मेटा नाम ="लेखक" सामग्री ="जॉन डो"/>
</Head>
<घटक {...पेजप्रॉप्स} />
</>
}
निर्यातगलती करना MyApp
यदि आप चाहते हैं कि किसी पृष्ठ में एक कस्टम शीर्षक और विवरण हो, तो उसमें मुख्य घटक जोड़ें, और Next.js ऐप घटक में डिफ़ॉल्ट के बजाय इसका उपयोग करेगा।
किसी विशिष्ट Next.js पृष्ठ में मेटा टैग और विवरण जोड़ना
स्टेटिक मेटा टैग और विवरण उन पेजों के लिए उपयुक्त हैं जिनकी सामग्री समान रहती है, उदाहरण के लिए, एक होम पेज।
फ़ाइल /pages/index.js खोलें और हेड टैग को उपयुक्त शीर्षक और विवरण के साथ संशोधित करें।
आयात सिर से "अगला / सिर";कॉन्स्ट घर= () => {
वापस करना (
<>
<सिर>
<शीर्षक>ब्लॉग</title>
<मेटा नाम ="व्यूपोर्ट" सामग्री ="इनिशियल-स्केल = 1.0, चौड़ाई = डिवाइस-चौड़ाई" />
<मेटा नाम ='विवरण' सामग्री ='प्रोग्रामिंग लेख'/>
</Head>
<मुख्य>
<एच 1>मेरे ब्लॉग पर स्वागत है!</h1>
</main>
</>
);
};
निर्यातगलती करना घर;
आप हेड कंपोनेंट को नेक्स्ट/हेड से इम्पोर्ट करके एक्सेस करते हैं. यह एलिमेंट्स को हेड टैग में जोड़कर काम करता है एक HTML पृष्ठ. आप इस घटक को कहां रखते हैं, इसके आधार पर, मेटा टैग और विवरण पूरे एप्लिकेशन या अलग-अलग पृष्ठों पर उपलब्ध होंगे।
_app.js फ़ाइल में शीर्षक, व्यूपोर्ट चौड़ाई और विवरण जोड़ने से यह सुनिश्चित होता है कि सभी पेजों का मेटाडेटा समान है।
इस पृष्ठ में स्थिर सामग्री है, लेकिन कभी-कभी, आप गतिशील सामग्री का उपभोग करने वाले पृष्ठ बनाना चाह सकते हैं।
नेक्स्ट.जेएस पेज में डायनामिक मेटा शीर्षक और विवरण जोड़ना
उपयोग के मामले के आधार पर, आप Next.js में डेटा लाने के लिए getStaticProps(), getStaticPaths() या getServerSideProps() का उपयोग कर सकते हैं। यह डेटा पृष्ठ की सामग्री को निर्धारित करता है। पेज के लिए मेटाडेटा बनाने के लिए इसका इस्तेमाल करें।
उदाहरण के लिए, नेक्स्ट.जेएस एप्लिकेशन के लिए मेटाडेटा बनाना जो ब्लॉग पोस्ट को प्रस्तुत करता है, थकाऊ होगा।
अनुशंसित तरीका एक गतिशील पृष्ठ बनाना है जो एक पहचानकर्ता प्राप्त करता है जिसका आप उपयोग कर सकते हैं ब्लॉग सामग्री प्राप्त करें. फिर आप इस सामग्री का उपयोग मुख्य घटक में कर सकते हैं।
आयात {getAllPosts, getSinglePost} से "../../utils/mdx";
आयात सिर से "अगला / सिर";कॉन्स्ट पोस्ट = ({शीर्षक, विवरण, सामग्री}) => {
वापस करना (
<>
<सिर>
<शीर्षक>{शीर्षक}</title>
<मेटा नाम ="विवरण" सामग्री = {विवरण} />
</Head>
<मुख्य>{/* पृष्ठ सामग्री */}</main>
</>
);
};निर्यातकॉन्स्ट गेटस्टैटिकप्रॉप्स = async ({पैराम्स}) => {
// एक पोस्ट प्राप्त करें
कॉन्स्ट पोस्ट = इंतजार getSinglePost (params.id, "posts");वापस करना {
सहारा: {...पोस्ट},
};
};निर्यातकॉन्स्ट getStaticPaths = async () => {
// सभी पदों को पुनः प्राप्त करें
कॉन्स्ट पथ = getAllPosts ("पदों".नक्शा (({आईडी}) => ({पैराम्स: {आईडी}}));वापस करना {
पथ,
मैदान छोड़ना: असत्य,
};
};
निर्यातगलती करना डाक;
GetStaticProps फ़ंक्शन पोस्ट डेटा को पोस्ट घटक को प्रॉप्स के रूप में पास करता है। पोस्ट घटक प्रॉपर से शीर्षक, विवरण और सामग्री को नष्ट कर देता है। हेड घटक तब मेटा टैग में शीर्षक और विवरण का उपयोग करता है।
Next.js एक ऑप्टिमाइज्ड फ्रेमवर्क है
आपने अभी सीखा है कि नेक्स्ट.जेएस प्रोजेक्ट में मेटा टाइटल और विवरण जोड़ने के लिए हेड कंपोनेंट का उपयोग कैसे करें। एसईओ-अनुकूल हेडर बनाने, एसईआरपी पर चढ़ने और अपनी साइट पर अधिक आगंतुकों को आकर्षित करने के लिए इस ज्ञान का उपयोग करें।
मुख्य घटक के अलावा, Next.js लिंक और इमेज जैसे अन्य घटक प्रदान करता है। इन घटकों को बॉक्स से बाहर अनुकूलित किया गया है जिससे तेजी से एसईओ-अनुकूल वेबसाइटें बनाना आसान हो गया है।