प्रतिक्रिया और एसईओ: दोस्त कैसे बनायें

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

SEO के बारे में कुछ सामान्य बातें

लगभग 92% ट्रैफ़िक, खोज इंजन क्वेरी परिणामों के पहले पृष्ठ से आता है , जिसमें 75% ट्रैफ़िक पहले पाँच वेबसाइटों से आता है।
Google का 90% से अधिक खोज इंजन बाजार में है ।
खोज इंजन ऑप्टिमाइज़ेशन (एसईओ) वॉल्यूम बढ़ाने और अपनी स्थिति को बढ़ाने और खोज इंजन के परिणामों में आवृत्ति की आवृत्ति में सुधार करने के लिए साइट की संरचना को प्रकट करने वाले कीवर्ड पर ध्यान केंद्रित करने के लिए साइट को संरचित और व्यवस्थित करने की प्रक्रिया है।
एसईओ प्रक्रिया का मुख्य लक्ष्य इंटरनेट पर साइट की दृश्यता में सुधार करना और वेबसाइट ट्रैफ़िक को बढ़ाना है।

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

यह काफी सरल लग सकता है, लेकिन रिएक्ट पर निर्मित साइटों के मामले में, यह हमेशा ऐसा नहीं होता है।

प्रतिक्रिया और एसईओ

संक्षेप में एसपीए के बारे में

एक सिंगल-पेज एप्लिकेशन या एसपीए एक वेब एप्लिकेशन या वेबसाइट है जो सर्वर से नए पेज लोड करने के बजाय वर्तमान पृष्ठों को गतिशील रूप से बदलकर उपयोगकर्ता के साथ बातचीत करता है। एसपीए तेजी से काम करते हैं क्योंकि अधिकांश संसाधनों (HTML + CSS + लिपियों) को जीवन भर केवल एक बार लोड किया जाता है। एप्लिकेशन केवल डेटा प्राप्त करता है और वापस करता है।
एसपीएएस बनाने के लिए इस्तेमाल की जा सकने वाली प्रौद्योगिकी का एक उदाहरण रिएक्टजैस है , एक पुस्तकालय जो कस्टम पर काम करने के लिए अच्छी तरह से अनुकूलित है ( अधिक जानकारी यहां )

एसईओ के साथ मुख्य स्पा समस्याएं

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

Google ने अक्टूबर 2015 में एक महत्वपूर्ण घोषणा की कि यदि उसके बीटीएस वेबसाइटों पर जेएस फाइलें चलाएंगे यदि उन्हें ऐसा करने का अधिकार दिया जाता है। और, हालांकि यह कथन बहुत सकारात्मक लगता है, और इसके खोज बॉट अधिक परिष्कृत हो रहे हैं, जावास्क्रिप्ट को निष्पादित करने की उनकी क्षमता पर निर्भर करना जोखिम भरा है । Googlebot जावास्क्रिप्ट को कई कारणों से मना कर सकता है ( अधिक विवरण यहाँ ):

• "गोल्डन 5 सेकंड" नियम ( यहां और यहां अधिक विवरण ) के साथ गैर-अनुपालन ;
• किसी साइट को क्रॉल करने में असमर्थता: Google सिस्टम को किसी साइट को क्रॉल करने में सक्षम होना चाहिए, इसकी संरचना ( यहां अधिक विवरण )
• साइट का विश्लेषण करने की असंभवता: Google सिस्टम को अपने पृष्ठों को बनाने के लिए उपयोग की जाने वाली तकनीकों का उपयोग करते हुए साइट के विश्लेषण के दौरान समस्याओं का अनुभव नहीं करना चाहिए (अधिक यहां);
• कोड में त्रुटियां, आदि।

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

इन कारणों से, आपको अपनी सामग्री को सही रूप में देखने के लिए खोज बॉट के लिए गारंटीकृत अवसर प्रदान करने के लिए सर्वर की तरफ एसपीए साइट को प्रस्तुत करने के तरीकों की तलाश करनी होगी।

एसपीए वेबसाइटों के लिए एसईओ समाधान

एसपीए वेबसाइटों के सामने आने वाली एसईओ समस्याओं को हल करने के दो मुख्य तरीके हैं :

1. आइसोमॉर्फिक (सार्वभौमिक) एसपीए;
2. प्रीरेंडरिंग।

प्रतिक्रियाशील वेबसाइटों के लिए अतिरिक्त एसईओ सुधार उपकरण :

• रिएक्ट राउटर v4 : रिएक्ट एप्लिकेशन में एसईओ-फ्रेंडली "रूट" -s बनाने के लिए घटक;
• रिएक्ट हेलमेट : शायद एसईओ रिएक्ट-एप्लिकेशन प्रदान करने के लिए सबसे महत्वपूर्ण घटक, एप्लिकेशन के मेटा-टैग को प्रबंधित करने की क्षमता प्रदान करता है और उपयोग में आसानी की विशेषता है।

कैसे आइसोमॉर्फिक प्रतिक्रिया एसईओ के साथ मदद करता है?

एक आइसोमॉर्फिक रिएक्ट साइट स्वचालित रूप से पता लगाती है कि क्लाइंट-साइड जावास्क्रिप्ट अक्षम है या नहीं। यदि जावास्क्रिप्ट अक्षम है, तो स्क्रिप्ट को सर्वर पर निष्पादित किया जाता है और परिणाम (स्थिर HTML + CSS) क्लाइंट को भेजा जाता है। इस स्थिति में, SEO के लिए आवश्यक सभी विशेषताएँ और सामग्री बूट समय पर मौजूद हैं।
यदि जावास्क्रिप्ट सक्षम है, तो सरलतम मामले में आइसोमॉर्फिक रिएक्ट साइट सामान्य तरीके से लोड हो सकती है, जब ब्राउज़र में सब कुछ प्रदान किया जाता है, या चतुराई से : आंशिक रेंडरिंग सर्वर साइड पर की जाती है, जिसका अर्थ है कि सर्वर पर केवल पहला डोम प्रस्तुत किया गया है, और सभी बाद में सीधे किए जाते हैं। ब्राउज़र। दूसरे शब्दों में, ब्राउज़र पूरी तरह से प्रदान किए गए मूल डोम और जावास्क्रिप्ट प्राप्त करता है, और जब एप्लिकेशन की स्थिति बदल जाती है, तो यह सभी बाद के अपडेट के लिए जिम्मेदार होता है।

यह माना जाता है कि एक आइसोमॉर्फिक समाधान एसपीए वेब अनुप्रयोगों की एसईओ समस्याओं को हल करने के लिए सबसे अच्छा तरीका है, लेकिन दुर्भाग्यपूर्ण बात यह है कि इस समय रिएक्ट एसपीए के लिए ऐसे समाधान लागू करना मुश्किल है :

• लोकप्रिय रिएक्टर बॉयलरप्लेट्स, उदाहरण के लिए क्रिएट-रिएक्शन-ऐप , रिएक्शन-बॉयलरप्लेट आइसोमॉर्फिज़्म का समर्थन नहीं करते हैं। Dan Abramov , create-react-app के डेवलपर:
  

  अंतत: सर्वर-साइड रेंडरिंग को सार्थक तरीके से जोड़ना बहुत मुश्किल है, वह भी बिना महत्वपूर्ण निर्णय लिए। फिलहाल, हम इस तरह के निर्णय लेने वाले नहीं हैं;

• मौजूदा आइसोमॉर्फिक बॉयलरप्लेट्स सीखना मुश्किल है;
• मौजूदा समाधान अपूर्ण हैं:
  
  • अक्सर सर्वर और क्लाइंट पर कोड में कई अंतर होते हैं;
  • कोड आधार के लगभग पूर्ण संयोग के मामले में, कोड धीमा हो जाता है और विफलताओं का खतरा होता है।
  
  

  ऐसा लगता है कि कई डेवलपर "इकोमॉर्फिक रिएक्ट एप्लिकेशन: प्रदर्शन और स्केलिंग" लेख की चर्चा में श्रीकटर द्वारा व्यक्त की गई राय का समर्थन करेंगे:
  

  "आइसोमॉर्फिक वेब एप्लिकेशन" के विषय में कई नफरत हैं। अफसोस। हालांकि यह समझना आसान है कि क्यों, इस विषय पर सैकड़ों लेखों को प्रोग्राम करना बहुत मुश्किल है, लेकिन आउटपुट अभी भी एक डरावना ग्राहक है जिसका वजन 3 मेगाबाइट है। लेकिन किसी दिन जल्द ही सभी समस्याओं और उनके समाधान के दृष्टिकोण को मानकीकृत किया जाएगा, और हमारे पास हल्के आइसोमॉर्फिक सिंगल पेज एप्लिकेशन होंगे।

  
  

  प्रतिपादन के माध्यम से एसईओ समस्या का समाधान

  
  

  प्री -रेंडरिंग एक वेबसाइट पर प्री-रेंडरिंग पृष्ठों की प्रक्रिया है, ताकि उन्हें खोज वेब बॉट द्वारा देखने के लिए तैयार किया जा सके। प्रीरेन्डर सेवा वेबसाइट के लिए अनुरोधों को स्वीकार करती है, "उपयोगकर्ता-एजेंट" अनुरोध द्वारा क्लाइंट के प्रकार को निर्धारित करती है, और यदि अनुरोध वेब बॉट द्वारा किया गया था, तो सेवा साइट के पहले से रेंडर किए गए स्थिर संस्करण को वापस भेजती है। यदि अनुरोध एक गैर-खोज वेब बॉट द्वारा किया गया था, तो सामान्य पृष्ठ लोड होता है। वेब बॉट्स के साथ काम का अनुकूलन करने के लिए पहले से ही उपयोग किया जाता है और संभवतः, पुराने ब्राउज़र। Prerender.cloud जैसी प्रमुख सेवाएँ और हेडलेस ब्राउज़र जैसे उपयोग, सबसे अधिक बार हेडलेस क्रोम । यह दृष्टिकोण आपको वेबसाइट बनाने और सर्वर-साइड रेंडरिंग पर भरोसा नहीं करने के लिए नवीनतम जावास्क्रिप्ट फ्रेमवर्क जैसे रिएक्ट, एम्बर और एंगुलर का उपयोग करने की अनुमति देता है।

  
  

  पूर्व-प्रतिपादन के लाभ:

  
  
  • प्रीरेन्डर सभी प्रकार के आधुनिक जावास्क्रिप्ट को निष्पादित करने में सक्षम है और स्थिर HTML का उत्पादन करता है;
  • prerender नवीनतम वेब नवाचारों का समर्थन करता है;
  • वेब एप्लिकेशन के कोड आधार का न्यूनतम संशोधन आवश्यक है, यदि हो ;
  • वेबसाइट के विकास और रखरखाव की लागत कम हो जाती है ;
  • कार्यान्वयन में आसानी।
  
  

  पूर्व-प्रतिपादन के नुकसान :

  • उन पृष्ठों के लिए उपयुक्त नहीं जो अक्सर बदलते डेटा प्रदर्शित करते हैं;
  • उन पृष्ठों के लिए स्वीकार्य नहीं जिनमें उपयोगकर्ता के व्यक्तिगत डेटा होते हैं। हालाँकि, ऐसे पृष्ठ SEO के लिए बहुत उपयोगी नहीं हैं और इन्हें अनुक्रमित नहीं किया जाना चाहिए;
  • महत्वपूर्ण संख्या वाले पृष्ठों के साथ एक बड़ी साइट के मामले में, प्री-रेंडरिंग प्रक्रिया में काफी समय लग सकता है;
  • प्रीरेन्डर सेवाओं का भुगतान किया जाता है।
  
  

  प्ररेण्डर, उन्हें कहाँ से लाएँ

  
  

  समुदाय ने पहले से ही एक महत्वपूर्ण संख्या विकसित की है: देखें, उदाहरण के लिए, यहां।

  
  

  कई विकल्पों में से, OpenSource Prerender दिलचस्प है - prerender.io सेवा पर उपयोग किए गए prerender का एक खुला स्रोत संस्करण , जिसे Node.js. का समर्थन करने वाले आपके स्वयं के सर्वर पर लागू किया जा सकता है।

  
  

  एक और दिलचस्प बात यह है कि इसे सर्वर की आवश्यकता नहीं है, प्रीरेन्डर प्ररेन्डर एसपीए प्लगिन है , जो कि केवल वेबपैक .config.js को संशोधित करके जुड़ा हुआ है, उदाहरण के लिए, बनाएँ-प्रतिक्रिया-ऐप या प्रतिक्रिया-बॉयलरप्लेट । प्री-रेंडरिंग प्रक्रिया साइट को "बिल्डिंग" करने की प्रक्रिया में होती है और परिणाम index.html में रखा जाता है।

  
  

  आप पहले से प्रस्तुत सेवाएं प्रदान करने वाली तैयार सेवाओं का उपयोग कर सकते हैं, कुछ की सूची यहां और यहां दी गई है।

  
  

  यहां आप प्रीरेन्डर्स के साथ काम करने के व्यावहारिक अनुभव से भी परिचित हो सकते हैं।

  
  

  विशेष रुचि Roast.io सेवा है, जो CDN और प्री-रेंडरिंग सेवाएं (!) दोनों प्रदान करती है। सेवा स्वचालित रूप से (यदि कोई भी नहीं है) "स्क्रीनशॉट लिंक अनफ़रल्स" मेटा टैग जोड़ता है जो वेबसाइट के प्रदर्शन को सामाजिक नेटवर्क पर सुधारते हैं।
  सेवा एडब्ल्यूएस सीडीएन पर स्थित है, एचटीटीपीएस प्रोटोकॉल पर चलती है, विशेष रूप से एसपीए और रिएक्ट के लिए कॉन्फ़िगर किया गया है, यह उपयोग करना बहुत आसान है। एक मुफ्त होस्टिंग विकल्प (10 जीबी बैंडविड्थ, 500 पृष्ठ एसएसआर) है।

  
  

  तो:

  
  

  प्री-रेंडरिंग, एक आदर्श समाधान नहीं होने के कारण, इस तथ्य के कारण रिएक्ट-एप्लिकेशन डेवलपर्स के एक महत्वपूर्ण हिस्से के लिए बेहतर लगता है:
  

  • आवेदन कोड के पूरा होने की आवश्यकता नहीं है - आप सुरक्षित रूप से अपने पसंदीदा बॉयलरप्लेट का उपयोग कर सकते हैं;
  • कार्यान्वयन का एक विस्तृत चयन है - "मिडलवेयर", "वेबपैक", "सीडीएन + प्रीरेन्डर", "ओपनसोर्स" और भुगतान;
  • प्री-रेंडरिंग शुरू करना एक सरल प्रक्रिया है, खासकर "सीडीएन + प्रीरेन्डर" कार्यान्वयन के मामले में;
  • हेडलेस क्रोम के रूप में Google से गंभीर समर्थन है;
  • अनुप्रयोग विकास और समर्थन लागत कम हो जाती है।
  • प्रीरेन्डर वेब सेवाओं के मुफ्त उपयोग के लिए विकल्प हैं।

  
  हालाँकि , आपको साइट के एक आइसोमॉर्फिक (सार्वभौमिक) संस्करण के बारे में सोचने की आवश्यकता है यदि:
  

  • वेब एप्लिकेशन बार-बार बदलते डेटा प्रदर्शित करता है;
  • एक वेब एप्लिकेशन में सैकड़ों पृष्ठ होते हैं, क्योंकि प्री-रेंडरिंग प्रक्रिया में काफी समय लग सकता है।

  
  यदि वेबसाइट में केवल स्थिर पृष्ठ (HTML + CSS) हैं, तो न तो समरूपता है और न ही पूर्व-प्रतिपादन की आवश्यकता है ।