यदि आप Next.js के साथ एक वेबसाइट बना रहे हैं, तो आप संभवतः चाहते हैं कि खोज इंजन आपके पृष्ठों को कुशलतापूर्वक खोजें और अनुक्रमित करें। इस प्रक्रिया को बेहतर बनाने का एक तरीका साइटमैप बनाना है। साइटमैप एक फ़ाइल है जो आपकी वेबसाइट के सभी यूआरएल को सूचीबद्ध करती है, जिससे Google जैसे खोज इंजनों को आपकी साइट को तेज़ी से क्रॉल करने और अनुक्रमित करने में मदद मिलती है।

इस गाइड में, हम नेक्स्ट.जेएस प्रोजेक्ट में नेक्स्ट-साइटमैप को कैसे स्थापित और कॉन्फ़िगर करें, इसके बारे में जानेंगे। हम साइटमैप के लाभों को भी कवर करेंगे और यह कैसे काम करता है यह बताने के लिए "हैलो वर्ल्ड" नेक्स्ट.जेएस ऐप के साथ नमूना कोड भी शामिल करेंगे।

नेक्स्ट-साइटमैप का उपयोग करने के लाभ

इंस्टॉलेशन प्रक्रिया में उतरने से पहले, आइए नेक्स्ट-साइटमैप का उपयोग करने के प्रमुख लाभों पर संक्षेप में चर्चा करें:

1. बेहतर एसईओ: एक अच्छी तरह से संरचित साइटमैप Google जैसे खोज इंजनों को आपके पृष्ठों को अधिक कुशलता से खोजने में मदद करता है, जिससे बेहतर अनुक्रमण और संभावित रूप से उच्च खोज रैंकिंग प्राप्त होती है।

2. तेज़ क्रॉलिंग: खोज इंजनों को अपनी वेबसाइट का रोडमैप प्रदान करके, आप उन्हें अपने पृष्ठों को तेज़ी से क्रॉल और अनुक्रमित करने की अनुमति देते हैं।

3. डायनामिक रूट्स को संभालना: डायनामिक रूट्स वाली वेबसाइटों के लिए, नेक्स्ट-साइटमैप डायनामिक सामग्री के लिए यूआरएल जेनरेट करना आसान बनाता है, जिससे यह सुनिश्चित होता है कि आपके सभी पेज खोजने योग्य हैं।

4. कस्टम साइटमैप: अगला-साइटमैप आपको प्राथमिकता निर्धारित करने, आवृत्ति बदलने और यहां तक ​​कि कुछ पृष्ठों को बाहर करने जैसे विकल्पों के साथ अपने साइटमैप को अनुकूलित करने की अनुमति देता है।

चरण 1: अगला-साइटमैप स्थापित करें

आरंभ करने के लिए, आपको अपने नेक्स्ट.जेएस प्रोजेक्ट में नेक्स्ट-साइटमैप पैकेज इंस्टॉल करना होगा। अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

npm install next-sitemap

या, यदि आप यार्न का उपयोग कर रहे हैं:

yarn add next-sitemap

चरण 2: अगली-साइटमैप.जेएस कॉन्फ़िगरेशन फ़ाइल बनाएं

पैकेज स्थापित करने के बाद, अगला चरण आपके प्रोजेक्ट के मूल में Next-sitemap.config.js नामक एक कॉन्फ़िगरेशन फ़ाइल बनाना है। इस फ़ाइल में आपका साइटमैप बनाने के लिए सेटिंग्स शामिल होंगी।

यहां एक बुनियादी विन्यास है:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
  generateRobotsTxt: true, // (Optional) Generates a robots.txt file
  sitemapSize: 7000, // Number of URLs per sitemap file
}

उपरोक्त कोड में, हम साइटयूआरएल का उपयोग करके आपकी साइट के लिए आधार यूआरएल निर्दिष्ट कर रहे हैं। generateRobotsTxt विकल्प साइटमैप के साथ एक robots.txt फ़ाइल बनाता है, और साइटमैपसाइज़ प्रत्येक साइटमैप फ़ाइल में शामिल करने के लिए URL की संख्या निर्धारित करता है।

चरण 3: साइटमैप स्क्रिप्ट के साथ package.json को अपडेट करें

अब, जब भी आप अपना प्रोजेक्ट बनाएंगे तो साइटमैप जेनरेट करने के लिए आपको अपनी package.json फ़ाइल में एक स्क्रिप्ट जोड़ने की आवश्यकता होगी।

यह कैसे करना है यहां बताया गया है:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

यह सुनिश्चित करेगा कि प्रत्येक निर्माण के बाद, साइटमैप आपके कॉन्फ़िगरेशन के आधार पर स्वचालित रूप से उत्पन्न होता है।

चरण 4: साइटमैप बनाएं और जेनरेट करें

अब जब सब कुछ सेट हो गया है, तो अपना प्रोजेक्ट बनाने और साइटमैप तैयार करने के लिए निम्नलिखित कमांड चलाएँ:

npm run build

या यार्न के साथ:

yarn build

बिल्ड पूरा होने के बाद, आपके प्रोजेक्ट के सार्वजनिक/फ़ोल्डर में एक साइटमैप.xml फ़ाइल (और वैकल्पिक रूप से एक robots.txt फ़ाइल) जेनरेट की जाएगी। इन फ़ाइलों में आपके Next.js ऐप के सभी यूआरएल होंगे, जो खोज इंजन द्वारा क्रॉल किए जाने के लिए तैयार होंगे।

उदाहरण: "हैलो वर्ल्ड" Next.js ऐप नेक्स्ट-साइटमैप के साथ

यह प्रदर्शित करने के लिए कि नेक्स्ट-साइटमैप कैसे काम करता है, आइए एक सरल "हैलो वर्ल्ड" नेक्स्ट.जेएस ऐप बनाएं। यहां एक बुनियादी Next.js पृष्ठ है:

// pages/index.js
export default function Home() {
  return (
    

      
Hello World
      
Welcome to my Next.js app!
    
  );
}

अब, अपने Next-sitemap.config.js को इस तरह कॉन्फ़िगर करें:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

इसके बाद, निम्नलिखित को अपने package.json में जोड़ें:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

एनपीएम रन बिल्ड चलाने के बाद, आपको अपना साइटमैप सार्वजनिक/निर्देशिका में मिलेगा, जिसमें आपके "हैलो वर्ल्ड" होमपेज का यूआरएल होगा।

लाइव डेमो

मेरी वेबसाइट https://rajeshkumaryadav.com बिल्ड प्रक्रिया पर साइटमैप को स्वचालित रूप से उत्पन्न करने के लिए इस पैकेज का उपयोग कर रही है। नीचे robot.txt है जिसमें sitemap.xml

https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml

निष्कर्ष

इस गाइड में उल्लिखित चरणों का पालन करके, अब आपने नेक्स्ट-साइटमैप को अपने नेक्स्ट.जेएस प्रोजेक्ट में एकीकृत कर लिया है। यह टूल साइटमैप और robots.txt फ़ाइल बनाने का एक आसान तरीका प्रदान करता है, जो आपकी वेबसाइट के SEO में उल्लेखनीय रूप से सुधार कर सकता है और यह सुनिश्चित कर सकता है कि खोज इंजन आपकी सभी सामग्री को कुशलतापूर्वक खोज सकें।

इस सेटअप के साथ, आप अपने Next.js ऐप को अधिक खोज-इंजन-अनुकूल और बेहतर अनुक्रमित बनाने की राह पर हैं!