अगली जेएस / प्रतिक्रिया के लिए एक एसईओ-फ्रेंडली हेड घटक बनाएं

जबकि प्रतिक्रिया एक शक्तिशाली जावास्क्रिप्ट लाइब्रेरी है, इसमें उन सभी टुकड़ों को शामिल नहीं किया गया है जिन्हें आपको एक सरल, कार्य करने के लिए आवश्यक है वेबसाइट लेआउट । NextJS एक प्रतिक्रिया ढांचा है जो आपको आसानी से सर्वर-प्रस्तुत अनुप्रयोगों और वेबसाइटों का निर्माण करने देता है।

NextJS में वेबपैक, बेबेल, डायनामिक रूटिंग, और प्रीफैचिंग जैसे बॉक्स के बाहर कई टूल्स और फीचर्स भी शामिल हैं। सबसे महत्वपूर्ण बात यह है कि मैंने पाया है कि नेक्सट्स बहुत सेओ-अनुकूल है।

यह ढांचा आपको सर्वर-साइड प्रतिपादन का उपयोग करने की अनुमति देता है, जो न केवल आपके ऐप्स और वेबसाइटों को काफी तेज़ी से लोड करता है, बल्कि खोज इंजनों को क्रॉल करने के लिए आपकी प्रतिक्रिया वेबसाइटों को भी अधिक आसान बनाता है।

NextJS भी उपयोग करके एक अच्छी तरह से खंडित साइट आर्किटेक्चर बनाना आसान बनाता है गतिशील रूटिंग या कस्टम सर्वर रूटिंग । उदाहरण के लिए, आप बेहतर सामग्री संरचना के लिए आसानी से अपनी वेबसाइट को / लेख /, / उत्पादों /, और / सेवाओं / सेवाओं / सेवाओं में विभाजित कर सकते हैं।

सबसे अच्छा, आप उन सभी चीजों का उपयोग कर सकते हैं जो वास्तव में लचीला ऑन-पेज अनुकूलन तकनीकों को लागू करने के लिए घटकों, घटक गुणों और घटक राज्यों की तरह महान प्रतिक्रिया कर सकते हैं। इस लेख में, मैं प्रतिक्रिया के लिए एक अच्छी तरह से अनुकूलित सिर घटक बनाने के लिए विस्तार करने जा रहा हूं।

एसईओ के लिए सिर तत्व का महत्व

अब इससे पहले कि मैं इस सिर घटक को कैसे बनाया जाए, आइए पहले बात करें कि यह महत्वपूर्ण क्यों है और हम क्या अनुकूलित करेंगे।

तकनीकी एसईओ की बात आने पर आपकी वेबसाइट पर हेड तत्व सबसे महत्वपूर्ण वर्गों में से एक होने जा रहा है। एक के लिए, सभी वेबसाइट मेटाडेटा सिर में सेट है। इन टैग में शीर्षक, मेटा विवरण, पेज कीवर्ड, कोई प्रासंगिक लेखक जानकारी और व्यूपोर्ट सेटिंग्स शामिल हैं।

हेड तत्व आपके कैनोलिक यूआरएल टैग, किसी भी प्रासंगिक फेसबुक ओपनग्राफ टैग (ओजी टैग) या ट्विटर कार्ड, और आपके मेटा रोबोट टैग जैसे अन्य महत्वपूर्ण टैग सेट करने के लिए भी जिम्मेदार है। इन टैग में से प्रत्येक टैग Google या सोशल नेटवर्क को अलग-अलग जानकारी देने के लिए ज़िम्मेदार है ताकि वे आपकी सामग्री को बेहतर ढंग से समझ सकें और साझा कर सकें।

आपकी वेबसाइट पर अनुचित रूप से कॉन्फ़िगर किए गए मेटाडेटा होने से आपकी समग्र वेबसाइट अनुकूलन के लिए विनाशकारी हो सकता है और निश्चित रूप से आपकी रैंकिंग को नाकाम करने का कारण बन सकता है।

उदाहरण के लिए, आपकी वेबसाइट को ऑन-पेज ऑप्टिमाइज़ेशन स्टैंडपॉइंट से सामना करने वाली सबसे खराब जुर्माना एक 'डुप्लिकेट शीर्षक टैग' पेनल्टी और 'डुप्लिकेट मेटा टैग' जुर्माना है। ये दो टैग आपकी वेबसाइट की 'लिफ्ट पिच' को Google पर देने के लिए जिम्मेदार हैं। वे उस पाठ को निर्देशित करते हैं जो उपयोगकर्ता देखेंगे जब आपकी वेबसाइट Google खोज परिणामों में दिखाई देती है।

यदि आपकी वेबसाइट पर प्रत्येक पृष्ठ में एक ही सटीक शीर्षक और एक ही सटीक विवरण सेट है, तो Google को यह समझने में कठिनाई होगी कि आपकी वेबसाइट क्या है। नतीजतन, Google आपकी वेबसाइट पर बहुत अधिक ध्यान नहीं दे रहा है और यह निश्चित रूप से इसे एक प्राधिकरण संपत्ति पर विचार नहीं करेगा।

यदि आप तकनीकी ऑन-पेज एसईओ के बारे में अधिक जानने में रुचि रखते हैं , SpeckyBoy पर मेरे दृष्टिकोण पर और देखें ।

अब जब आप सिर तत्व के बारे में कुछ और समझते हैं और हुड के तहत यह इतना महत्वपूर्ण क्यों है, आइए प्रतिक्रिया दें कि प्रतिक्रिया के लिए एक एसईओ-फ्रेंडली हेड घटक कैसे बनाएं।

एक एसईओ-अनुकूल सिर घटक बनाएं

एसईओ-फ्रेंडली हेड घटक जो मैं इस लेख में विस्तारित हूं, वह अगले JAS के लिए विशिष्ट है। हालांकि, यदि आप एक अलग प्रतिक्रिया ढांचे का उपयोग कर रहे हैं या केवल प्रतिक्रिया का उपयोग कर रहे हैं, तो आप उपयोग कर सकते हैं हेलमेट प्रतिक्रिया नेक्स्टजेएस हेड घटक के स्थान पर।

सबसे पहले आप जो करना चाहते हैं वह आपकी मूल मुख्य संरचना स्थापित करनी है। नीचे दिया गया कोड उदाहरण के रूप में कार्य कर सकता है, लेकिन जब आप फिट देखते हैं तो चीजों को जोड़ने या हटाने के लिए स्वतंत्र महसूस करें। नंगे न्यूनतम पर, आपके सिर में एक शीर्षक टैग, मेटा विवरण टैग, कैननिकल यूआरएल, और कोई प्रासंगिक सामाजिक टैग शामिल होना चाहिए।

& lt; हेड और जीटी;
& lt; शीर्षक & gt; & lt; / शीर्षक & gt;
& lt; मेटा नाम = "विवरण" सामग्री = "" / & gt;
& lt; मेटा प्रॉपर्टी = "ओजी: टाइप" सामग्री = "वेबसाइट" / & gt;
& lt; मेटा नाम = "ओजी: शीर्षक" संपत्ति = "ओजी: शीर्षक" सामग्री = "" / & gt;
& lt; मेटा नाम = "OG: विवरण" संपत्ति = "OG: विवरण" सामग्री = "" / & gt;
& lt; मेटा प्रॉपर्टी = "OG: SITE_NAME" सामग्री = "" / & gt;
& lt; मेटा प्रॉपर्टी = "OG: URL" सामग्री = "" / & gt;
& lt; मेटा नाम = "ट्विटर: कार्ड" सामग्री = "सारांश" / & gt;
& lt; मेटा नाम = "ट्विटर: शीर्षक" सामग्री = "" / & gt;
& lt; मेटा नाम = "ट्विटर: विवरण" सामग्री = {props.desc} / & gt;
& lt; मेटा नाम = "ट्विटर: साइट" सामग्री = "" / & gt;
& lt; मेटा नाम = "ट्विटर: निर्माता" सामग्री = "" / & gt;
& lt; लिंक rel = "आइकन" प्रकार = "छवि / png" href = "/ स्थिर / छवियों / favicon.ico" / & gt;
& lt; लिंक rel = "ऐप्पल-टच-आइकन" href = "/ स्थिर / छवियों / favicon.ico" / & gt;
& lt; लिंक REL = "STYLESHEET" HREF = "" / & gt;
& lt; मेटा प्रॉपर्टी = "ओजी: छवि" सामग्री = "" / & gt;
& lt; मेटा नाम = "ट्विटर: छवि" सामग्री = "" / & gt;
& lt; लिंक rel = "canonical" href = "" / & gt;
& lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" src = "" & gt; & lt; / स्क्रिप्ट & gt;
& lt; / सिर & gt; 

घटक सेट करें

इसके बाद, आप अपने घटक के लिए एक नई आंशिक फ़ाइल बनाना चाहते हैं। आप आंशिक फ़ाइल को कॉल कर सकते हैं seo-meta.js या इसी के समान। इस फ़ाइल को में रखा जाना चाहिए आंशिक निर्देशिका।

आपका प्रारंभिक घटक इस तरह कुछ दिखाई देगा:

 'अगला / सिर' से आयात सिर
कॉन्स मेटा = (प्रोप) = & gt; (
& lt; हेड और जीटी;
& lt; शीर्षक & gt; & lt; / शीर्षक & gt;
& lt; मेटा नाम = "विवरण" सामग्री = "" / & gt;
& lt; मेटा प्रॉपर्टी = "ओजी: टाइप" सामग्री = "वेबसाइट" / & gt;
& lt; मेटा नाम = "ओजी: शीर्षक" संपत्ति = "ओजी: शीर्षक" सामग्री = "" / & gt;
& lt; मेटा नाम = "OG: विवरण" संपत्ति = "OG: विवरण" सामग्री = "" / & gt;
& lt; मेटा प्रॉपर्टी = "OG: SITE_NAME" सामग्री = "" / & gt;
& lt; मेटा प्रॉपर्टी = "OG: URL" सामग्री = "" / & gt;
& lt; मेटा नाम = "ट्विटर: कार्ड" सामग्री = "सारांश" / & gt;
& lt; मेटा नाम = "ट्विटर: शीर्षक" सामग्री = "" / & gt;
& lt; मेटा नाम = "ट्विटर: विवरण" सामग्री = {props.desc} / & gt;
& lt; मेटा नाम = "ट्विटर: साइट" सामग्री = "" / & gt;
& lt; मेटा नाम = "ट्विटर: निर्माता" सामग्री = "" / & gt;
& lt; लिंक rel = "आइकन" प्रकार = "छवि / png" href = "/ स्थिर / छवियों / favicon.ico" / & gt;
& lt; लिंक rel = "ऐप्पल-टच-आइकन" href = "/ स्थिर / छवियों / favicon.ico" / & gt;
& lt; लिंक REL = "STYLESHEET" HREF = "" / & gt;
& lt; मेटा प्रॉपर्टी = "ओजी: छवि" सामग्री = "" / & gt;
& lt; मेटा नाम = "ट्विटर: छवि" सामग्री = "" / & gt;
& lt; लिंक rel = "canonical" href = "" / & gt;
& lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" src = "" & gt; & lt; / स्क्रिप्ट & gt;
& lt; / सिर & gt;
)
निर्यात डिफ़ॉल्ट मेटा 

आप देखेंगे कि मैं गुजर रहा हूं रंगमंच की सामग्री , या गुण, मेरे घटक के लिए। हम अपने मेटा टैग को पॉप्युलेट करने के लिए इन गुणों का उपयोग करेंगे।

घटक आयात करें

एक बार जब आप अपना मूल घटक स्थापित कर लेंगे, तो आप इसे अपने पृष्ठों में आयात कर सकते हैं। आप अपने पृष्ठ के शीर्ष पर निम्न सहित घटक आयात कर सकते हैं।

 '.. / partials/seo-meta.js[81 से मेटा आयात करें]
  

   अब आप अपने रेंडर फ़ंक्शन के भीतर मेटा घटक डाल सकते हैं, जैसे आप मूल निवासी हेड घटक के साथ करेंगे।
  
  

   घटक गुण बनाएँ
  
  

   अब जब आपने अपना मेटा घटक आयात किया है और रखा है तो आप अपने मेटाडेटा के लिए आवश्यक गुणों को स्थापित करना चाहते हैं। आपको आम तौर पर प्रत्येक पृष्ठ के लिए शीर्षक, विवरण और यूआरएल शामिल करना चाहिए, लेकिन आप आवश्यकतानुसार छवियों और अन्य डेटा भी शामिल कर सकते हैं।
  
  

   आप सीएसएस और जावास्क्रिप्ट फ़ाइलों के लिए गुण भी शामिल करना चाहते हैं ताकि आप उन्हें आवश्यकतानुसार पृष्ठों पर सशर्त रूप से लोड कर सकें। उन सभी संपत्तियों के सेट के साथ, आपका घटक इस तरह कुछ दिखता है:
  
  
 & lt; मेटा
शीर्षक = "यह एक शीर्षक है वेबसाइट का नाम"
desc = "यह विवरण है"
canonical = "https://www.someurl.com"
सीएसएस = '/ स्थिर / सीएसएस / styles.css'
जेएस = '/ स्थिर / जेएस / स्क्रिप्ट्स.जेएस'
/ & gt; 
  

   यदि आप नेक्स्टजेएस के साथ एक स्थिर वेबसाइट का निर्माण कर रहे हैं, तो आप स्थैतिक सामग्री वाले गुणों को पॉप्युलेट करने में सक्षम होना चाहिए। हालांकि, यदि आप डायनामिक रूट्स से पेज लोड कर रहे हैं और डायनामिक कोड के साथ पेज टेम्पलेट्स को पॉप्युलेट कर रहे हैं, तो आप इन गुणों को गतिशील रूप से सेट करना चाहेंगे।
  
  

   हमारी वेबसाइट,
   
    व्यक्तिवाचक संज्ञा
   
   , वर्डप्रेस एपीआई को डेटा स्रोत के रूप में उपयोग करता है, लेकिन आप नीचे दिए गए निर्देशों का उपयोग किसी भी आराम या ग्राफक्ली एपीआई का उपयोग कर कर सकते हैं।
  
  

   पृष्ठ का अनुरोध करते समय, आप प्रासंगिक मेटाडेटा और पेज डेटा को हराकर वापस कर सकते हैं
   
    GetInitialProps () async
   
   समारोह। इसके बाद यह आपको रेंडर फ़ंक्शन के भीतर गतिशील डेटा का उपयोग करने देगा ताकि Google और अन्य रोबोट जानकारी को क्रॉल कर सकें।
  
  

   आपके डेटा स्रोत और कुछ अन्य कारकों के आधार पर, आप प्रारंभिक गुणों को प्राप्त करने के लिए एक अलग दृष्टिकोण ले सकते हैं, लेकिन आपको शुरू करने के लिए एक मूल दृष्टिकोण है।
  
  
स्टेटिक async getinitialprops (ctx) {
कॉन्स रेज = अवॉट फेच ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
cont error_code = res.statuscode & gt; 200? res.statuscode: झूठा;
कॉन्स डेटा = await res.json ();
url = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
Meta_Title = डेटा का इंतजार करें 
 .meta_title
Meta_Desc = प्रतीक्षा करें 
 .meta_desc
वापसी {
एरर कोड,
   CASE_STUDY: डेटा,
   Meta_Title: Meta_Title,
   Meta_Desc: Meta_Desc,
   URL: URL
}
}

  

   अब आप अपने रेंडर फ़ंक्शन के भीतर सेट किए गए गुणों तक पहुंच पाएंगे। जब आपके कोड में उपयोग किया जाता है तो वे इस तरह कुछ दिखेंगे।
  
  
 & lt; मेटा
शीर्षक = {this.props.meta_title}
desc = {this.props.meta_desc}
canonical = {this.props.url}
सीएसएस = '/ स्थिर / सीएसएस / styles.css'
जेएस = '/ स्थिर / जेएस / स्क्रिप्ट्स.जेएस'
/ & gt; 
  

   अपने घटक में गुणों का उपयोग करें
  
  

   अंतिम चरण अपना घटक स्थापित करना है ताकि यह उन गुणों का उपयोग कर सके जो इसे पारित किया जा रहा है। हालांकि शीर्षक और विवरण जैसे कुछ गुण प्रत्येक पृष्ठ पर सेट किए जाएंगे, सीएसएस और जेएस जैसे अन्य सशर्त हो सकते हैं। आप इसे अपने घटक में ध्यान में रखना चाहेंगे।
  
  

   हमारे उदाहरण में, हम तर्क का उपयोग करके घटक को अपनी संपत्तियों को पास कर रहे हैं
   
    रंगमंच की सामग्री
   
   । फिर हम अपने नामों का उपयोग करके व्यक्तिगत प्रोप तक पहुंच सकते हैं, उदाहरण के लिए,
   
    प्रोप.टिटल
   
   या
   
    प्रोप.डेस्क
   
   ।
  
  

   सशर्त ब्लॉकों को सेट करते समय, आप इस तरह का एक दृष्टिकोण ले सकते हैं:
  
  
 {
props.css & amp; & amp;
& lt; लिंक rel = "stylesheet" href = {`$ {props.css}`} / & gt;
} 
  

   इस तरह, यदि कोई सीएसएस सेट नहीं है, तो आप अपने पृष्ठ पर एक खाली लिंक टैग सेट नहीं करेंगे। आप जावास्क्रिप्ट फ़ाइलों के लिए इस समान दृष्टिकोण का उपयोग कर सकते हैं।
  
  

   एक बार जब आप अपने सिर घटक को पॉप्युलेट करना समाप्त कर लेंगे तो इसे इस तरह दिखना चाहिए:
  
  
 'अगला / हेड' से आयात सिर
कॉन्स मेटा = (प्रोप) = & gt; (
& lt; हेड और जीटी;
& lt; शीर्षक & gt; {props.title} & lt; / शीर्षक & gt;
& lt; मेटा नाम = "विवरण" सामग्री = {props.desc} / & gt;
& lt; मेटा प्रॉपर्टी = "ओजी: टाइप" सामग्री = "वेबसाइट" / & gt;
& lt; मेटा नाम = "og: शीर्षक" संपत्ति = "ओग: शीर्षक" सामग्री = {props.title} / & gt;
& lt; मेटा नाम = "OG: विवरण" संपत्ति = "OG: विवरण" सामग्री = {props.desc} / & gt;
& lt; मेटा प्रॉपर्टी = "OG: SITE_NAME" सामग्री = "उचित संज्ञा" / & gt;
& lt; मेटा प्रॉपर्टी = "ओजी: यूआरएल" सामग्री = {`$ {propscanonical}`} / & gt;
& lt; मेटा नाम = "ट्विटर: कार्ड" सामग्री = "सारांश" / & gt;
& lt; मेटा नाम = "ट्विटर: शीर्षक" सामग्री = {props.title} / & gt;
& lt; मेटा नाम = "ट्विटर: विवरण" सामग्री = {props.desc} / & gt;
& lt; मेटा नाम = "ट्विटर: साइट" सामग्री = "@ propernounco" / & gt;
& lt; मेटा नाम = "ट्विटर: निर्माता" सामग्री = "@ propernounco" / & gt;
& lt; लिंक rel = "आइकन" प्रकार = "छवि / png" href = "/ स्थिर / छवियों / favicon.ico" / & gt;
& lt; लिंक rel = "ऐप्पल-टच-आइकन" href = "/ स्थिर / छवियों / favicon.ico" / & gt;
{
props.css & amp; & amp;
& lt; लिंक rel = "stylesheet" href = {`$ {props.css}`} / & gt;
}
{
प्रोप.मेज? (
& lt; मेटा प्रॉपर्टी = "ओजी: छवि" सामग्री = {`$ {props.image}`} / & gt;
): (
& lt; मेटा प्रॉपर्टी = "ओजी: छवि" सामग्री = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & gt;
)
}
{
प्रोप.मेज & amp; & amp;
& lt; मेटा नाम = "ट्विटर: छवि" सामग्री = {{`$ {props.image}`} / & gt;
}
{
Props.Canonical & amp; & amp;
& lt; लिंक rel = "canonical" href = {`$ {props.canonical}`} / & gt;
}
{
props.js & amp; & amp;
& lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" src = {`$ {props.js}`} & gt; & lt; / स्क्रिप्ट & gt;
}
& lt; / सिर & gt;
)
निर्यात डिफ़ॉल्ट मेटा 
  

   
    अधिक पढ़ें:
   
  
  [15 9]
   

    
     Resusable प्रतिक्रिया घटकों का विकास
    
   
   

    
     14 सर्वश्रेष्ठ जावास्क्रिप्ट एपीआई
    
   
   

    
     15 आवश्यक जावास्क्रिप्ट उपकरण जो आपको उपयोग करना चाहिए