जेफिरनेट लोगो

सीएसएस और जावास्क्रिप्ट एसईओ: मूल बातें समझना, विशिष्ट त्रुटियों को दूर करना

दिनांक:

अगस्त 03, 2023
34 मिनट पढ़ा

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

भाषा जावास्क्रिप्ट है, और इस पोस्ट में, हम जेएस से संबंधित प्रमुख त्रुटियों के बारे में जानेंगे जिनका सामना आप अपनी वेबसाइट का ऑडिट करते समय कर सकते हैं। मैं समझाऊंगा कि प्रत्येक त्रुटि क्यों मायने रखती है और उन्हें कैसे ठीक किया जा सकता है। फिक्सिंग भाग कुछ ऐसा है जिसे आप संभवतः अपने वेबसाइट डेवलपर्स को सौंपेंगे। बात बस इतनी है कि इस बार आप उनके साथ वही भाषा बोलेंगे।

क्या जावास्क्रिप्ट एसईओ के लिए अच्छा या बुरा है?

दुर्भाग्य से, इस प्रश्न का कोई सरल उत्तर नहीं है। यह सब वास्तव में निर्भर करता है!

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

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

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

जावास्क्रिप्ट एसईओ क्या है?

जावास्क्रिप्ट एसईओ और एक सफल वेबसाइट प्रदर्शन के लिए इसके महत्व पर चर्चा करने से पहले, आइए सबसे पहले जावास्क्रिप्ट के सार की पहचान करें।

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

जुलाई 2023 तक, जावास्क्रिप्ट है सबसे व्यापक रूप से उपयोग की जाने वाली क्लाइंट-साइड प्रोग्रामिंग भाषा, इसके बाद फ़्लैश और जावा हैं। कुछ के सबसे लोकप्रिय वेबसाइट वर्तमान में इस भाषा का उपयोग करने वाले Google, Facebook, Microsoft, Youtube, Twitter, Netflix इत्यादि हैं।

यहां एसई रैंकिंग में, हम जावास्क्रिप्ट का भी उपयोग करते हैं। एसई रैंकिंग प्लेटफ़ॉर्म पर आपके द्वारा देखे जाने वाले कई अच्छे प्रभाव भी जेएस द्वारा संचालित हैं। उदाहरण के लिए, हमारा पृष्ठ परिवर्तन निगरानी लैंडिंग पृष्ठ में अब एक जावास्क्रिप्ट-संचालित एनीमेशन है जो यह समझाने के लिए डिज़ाइन किया गया है कि टूल कैसे काम करता है। 

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

पृष्ठ परिवर्तन जेएस अक्षम के साथ लैंडिंग पृष्ठ की निगरानी

अब जब आप जावास्क्रिप्ट और वेबसाइट विकास में इसकी भूमिका से परिचित हो गए हैं, तो आइए अपना ध्यान जावास्क्रिप्ट एसईओ पर केंद्रित करें।

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

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

निश्चित रूप से, इन सभी मुद्दों से तब तक बचा जा सकता है जब तक आप समझते हैं कि Google जावास्क्रिप्ट को कैसे प्रस्तुत करता है और अपने JS कोड को खोज-अनुकूल कैसे बनाता है।

Google जावास्क्रिप्ट को कैसे संभालता है

हाल ही में, Google ने जावास्क्रिप्ट को क्रॉल और इंडेक्स करने की अपनी क्षमता में सौ गुना छलांग लगाई है। लेकिन यह प्रक्रिया अभी भी काफी जटिल है और कई चीजें गलत हो सकती हैं। 

नियमित HTML पृष्ठों के साथ, यह सब सरल और सरल है। Googlebot किसी पृष्ठ को क्रॉल करता है और आंतरिक लिंक सहित उसकी सामग्री को पार्स करता है। फिर सामग्री अनुक्रमित हो जाती है जबकि खोजे गए यूआरएल को क्रॉल कतार में जोड़ दिया जाता है, और प्रक्रिया फिर से शुरू हो जाती है। 

जब समीकरण में जावास्क्रिप्ट जोड़ा जाता है, तो प्रक्रिया थोड़ी अधिक बोझिल हो जाती है। यह देखने के लिए कि जावास्क्रिप्ट के भीतर क्या छिपा है जो आम तौर पर जेएस फ़ाइल के एकल लिंक की तरह दिखता है, Googlebot को पहले इसे पार्स करना, संकलित करना और निष्पादित करना होगा। इसे जेएस रेंडरिंग कहा जाता है और इस चरण के पूरा होने के बाद ही Google किसी पृष्ठ की सभी सामग्री को HTML टैग्स में देख सकता है - वह भाषा जिसे वह समझ सकता है। इस बिंदु पर, Google JS-संचालित तत्वों को अनुक्रमित करने और JS के भीतर छिपे URL को क्रॉल कतार में जोड़ने के साथ आगे बढ़ सकता है।

Googlebot JavaScript को कैसे प्रोसेस करता है

अब, क्या ये जटिलताएँ कुछ ऐसी हैं जिनके बारे में आपको एसईओ-वार चिंता करनी चाहिए? ठीक एक साल पहले वे थे.

जावास्क्रिप्ट प्रतिपादन बहुत संसाधन-मांग वाला और महंगा है, और हाल तक Google तुरंत प्रस्तुत नहीं होगा जावास्क्रिप्ट। यह पहले पृष्ठ के आसानी से उपलब्ध सादे HTML भागों को अनुक्रमित करेगा और फिर अनुक्रमण की तथाकथित दूसरी लहर के दौरान Google जावास्क्रिप्ट को संसाधित करेगा। 2018 में वापस, जॉन मुलर ने दावा किया पृष्ठ को प्रस्तुत होने में कुछ दिनों से लेकर कुछ सप्ताह तक का समय लगा। इसलिए, जो वेबसाइटें जावास्क्रिप्ट पर अत्यधिक निर्भर थीं, वे अपने पेजों को तेजी से अनुक्रमित करने की उम्मीद नहीं कर सकती थीं। इसके अलावा, उन्हें नए पृष्ठों के क्रॉल कतार में आने में समस्या हो सकती है क्योंकि Google तुरंत आंतरिक लिंक का अनुसरण नहीं कर सकता है।

में से एक में जावास्क्रिप्ट एसईओ कार्यालय समय, मार्टिन स्प्लिट ने वेबमास्टर्स को आश्वस्त किया कि रेंडरिंग कतार अब बहुत तेजी से आगे बढ़ रही है और एक पेज आम तौर पर मिनटों या सेकंड के भीतर रेंडर हो जाता है। फिर भी, खोज-अनुकूल तरीके से जावास्क्रिप्ट को कोड करना अभी भी काफी मुश्किल और साप्ताहिक है जावास्क्रिप्ट एसईओ कार्यालय समय सत्र स्पष्ट रूप से यह साबित करते हैं। उपयोगकर्ताओं द्वारा साझा किए गए मामले दर्शाते हैं कि यदि जावास्क्रिप्ट को ठीक से कोडित नहीं किया गया तो चीजें बहुत गलत हो सकती हैं। मैं कुछ सामान्य मुद्दों के साथ अपनी बात स्पष्ट करना चाहता हूँ।

Google आपकी सामग्री के साथ इंटरैक्ट नहीं करता

Google छिपी हुई सामग्री को तब तक देख और अनुक्रमित कर सकता है जब तक वह दिखाई देती है डोम—यह वह जगह है जहां स्रोत HTML कोड ब्राउज़र द्वारा रेंडर होने से पहले भेजा जाता है। इस स्तर पर, सामग्री को संशोधित करने के लिए जावास्क्रिप्ट का उपयोग किया जा सकता है। 

अब, मान लीजिए कि आपके प्रारंभिक HTML में पृष्ठ की पूरी सामग्री शामिल है और फिर आप इसका उपयोग करते हैं सीएसएस गुण सामग्री के कुछ हिस्सों को छिपाने के लिए और JS उपयोगकर्ताओं को इन छिपे हुए हिस्सों को प्रकट करने देता है। इस मामले में, आप सब ठीक हैं क्योंकि सामग्री अभी भी HTML कोड के भीतर मौजूद है और केवल उपयोगकर्ताओं के लिए छिपी हुई है—Google अभी भी देख सकता है कि CSS कोड के भीतर क्या छिपा है। 

दूसरी ओर, यदि आपके प्रारंभिक HTML में कुछ सामग्री के टुकड़े नहीं हैं, और वे क्लिक-ट्रिगर जावास्क्रिप्ट द्वारा DOM में लोड हो जाते हैं, तो Google इस प्रकार की सामग्री नहीं देख पाएगा क्योंकि Googlebot क्लिक नहीं कर सकता है। हालाँकि, कार्यान्वयन द्वारा इस समस्या का समाधान किया जा सकता है सर्वर-साइड प्रतिपादन-यह तब होता है जब जेएस को सर्वर-साइड पर निष्पादित किया जाता है और Google को तैयार अंतिम HTML कोड मिलता है। गतिशील प्रतिपादन एक रास्ता भी हो सकता है.

जावास्क्रिप्ट रेंडरिंग

Google स्क्रॉल नहीं करता

जावास्क्रिप्ट का उपयोग अक्सर अनंत स्क्रॉल को लागू करने या यूएक्स के लिए कुछ सामग्री को छिपाने के लिए किया जाता है और उपयोगकर्ताओं को बटन पर क्लिक करने पर अतिरिक्त जानकारी प्रकट करने देता है।

यहां समस्या यह है कि Googlebot उस तरह से क्लिक या स्क्रॉल नहीं करता जैसा उपयोगकर्ता अपने ब्राउज़र में करते हैं।

निश्चित रूप से इसके अपने समाधान हैं, लेकिन वे आपके द्वारा उपयोग की जाने वाली तकनीक के आधार पर काम कर सकते हैं या नहीं। और यदि आप चीजों को इस तरह से लागू करते हैं कि Google इसका पता नहीं लगा सकता है, तो आप अपने जेएस-संचालित सामग्री के एक हिस्से को अनुक्रमित नहीं कर पाएंगे।

अनंत स्क्रॉल के लिए, ओवरस्क्रॉल घटनाओं से बचना चाहिए क्योंकि उन्हें जावास्क्रिप्ट कोड को कॉल करने के लिए Googlebot को वास्तव में पृष्ठ को स्क्रॉल करने की आवश्यकता होती है - जिसे Google संभाल नहीं सकता है। इसके बजाय, आप अनंत स्क्रॉल और आलसी लोडिंग का उपयोग करके कार्यान्वित कर सकते हैं इंटरसेक्शन ऑब्जर्वर एपीआई या अनंत स्क्रॉल के साथ पृष्ठांकित लोडिंग सक्षम करें।

JS और CSS एक साथ कैसे काम करते हैं

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

न्यूनतम सीएसएस वाला पेज

बात यह है कि आज, CSS का उपयोग हर वेबसाइट पर किया जाता है, भले ही वह देखने में नीरस हो RFC श्रृंखला का पृष्ठ इंटरनेट कैसे काम करता है, इस पर तकनीकी नोट्स। 

अतीत में, Google CSS की बहुत अधिक परवाह नहीं करता था और केवल पृष्ठ के HTML मार्कअप की व्याख्या करता था। के साथ यह सब बदल गया मोबाइल के अनुकूल अद्यतन 2015 में वापस। मोबाइल खोज की बढ़ती लोकप्रियता के जवाब में, Google ने उन वेबसाइटों को पुरस्कृत करने का निर्णय लिया जो मोबाइल उपकरणों पर सहज उपयोगकर्ता अनुभव प्रदान करते थे। और यह सुनिश्चित करने के लिए पेज मोबाइल फ्रेंडली है, Google को इसे ब्राउज़र की तरह प्रस्तुत करना था जिसका अर्थ था CSS और JavaScript फ़ाइलों को लोड करना और उनकी व्याख्या करना। 

पेज लेआउट एल्गोरिथम CSS पर भी निर्भर करता है. इसका उद्देश्य यह निर्धारित करना है कि उपयोगकर्ता पृष्ठ पर सामग्री आसानी से पा सकते हैं या नहीं और सीएसएस Google को यह समझने में मदद करता है कि पृष्ठ डेस्कटॉप और मोबाइल दोनों पर कैसे बनाया गया है, और पृष्ठ के भीतर सामग्री का प्रत्येक भाग कहां रहता है: सामने और केंद्र में, साइडबार या पृष्ठ के निचले भाग में तह के बिल्कुल नीचे। 

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

लेकिन अगर आप अपनी पार्टी में गेम या फोटो बूथ जैसे इंटरैक्टिव तत्व जोड़ना चाहते हैं, तो आपको जावास्क्रिप्ट की ओर रुख करना होगा। इसे पार्टी योजनाकार के रूप में सोचें, जो खेलों का आयोजन करता है, फोटो बूथ स्थापित करता है, और यह सुनिश्चित करता है कि सब कुछ सुचारू रूप से चलता रहे।

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

एसईओ के लिए जावास्क्रिप्ट सर्वोत्तम अभ्यास

चूँकि हम जावास्क्रिप्ट के अधिकांश बुनियादी सिद्धांतों के बारे में जान चुके हैं, आइए अपनी जावास्क्रिप्ट वेबसाइट को अनुकूलित करते समय अपनाई जाने वाली कुछ सर्वोत्तम प्रथाओं पर चलते हैं।

सुनिश्चित करें कि Google आपकी सभी सामग्री खोज सके

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

फिर भी, यदि आप यह सुनिश्चित करना चाहते हैं कि आपकी जेएस सामग्री प्रभावी ढंग से अनुक्रमित है, तो निम्नलिखित दिशानिर्देशों का पालन करें:

  • अपने वेब पेजों की आवश्यक जानकारी को पेज सोर्स कोड में दृश्यमान बनाएं। यह सुनिश्चित करता है कि खोज इंजनों को सामग्री लोड करने के लिए उपयोगकर्ता इंटरैक्शन पर निर्भर रहने की आवश्यकता नहीं है (उदाहरण के लिए, एक बटन पर क्लिक करना)।
  • हालाँकि Google इसकी अनुशंसा नहीं करता है, फिर भी आप इसे इंजेक्ट करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं rel=”कैनोनिकल” लिंक टैग. Google खोज आपके पृष्ठ को लोड करते समय लिंक टैग को पहचान लेगा। बस सुनिश्चित करें कि यह पृष्ठ पर एकमात्र है। यदि ऐसा नहीं है, तो आप एकाधिक rel=”canonical” लिंक टैग बना सकते हैं या मौजूदा rel=”canonical” लिंक टैग बदल सकते हैं, जिससे कुछ अप्रत्याशित परिणाम हो सकते हैं।
  • जावास्क्रिप्ट फ्रेमवर्क, जैसे एंगुलर और वीयू, आमतौर पर क्लाइंट-साइड रूटिंग के लिए हैश-आधारित यूआरएल (उदाहरण के लिए, www.example.com/#/about-us) उत्पन्न करते हैं। हालाँकि इस प्रकार के URL निर्बाध नेविगेशन प्रदान करते हैं, वे SEO में बाधा डाल सकते हैं और उपयोगकर्ताओं को भ्रमित कर सकते हैं। यह सुनिश्चित कर लें नियमित यूआरएल का प्रयोग करें उपयोगकर्ता अनुभव, एसईओ और समग्र वेबसाइट दृश्यता में सुधार करने के लिए।

पेज पर सामान्य सर्वोत्तम प्रथाओं का पालन करें

जब जावास्क्रिप्ट सामग्री की बात आती है, तो सामान्य ऑन-पेज एसईओ दिशानिर्देशों का पालन करना आपकी प्राथमिकता सूची में होना चाहिए। सामग्री, शीर्षक टैग, मेटा विवरण, ऑल्ट विशेषताएँ और मेटा रोबोट टैग को अनुकूलित करना विशेष रूप से महत्वपूर्ण है। एसईओ के लिए कुछ प्रमुख जावास्क्रिप्ट सर्वोत्तम प्रथाओं में शामिल हैं, लेकिन इन्हीं तक सीमित नहीं हैं:

  • सामग्री अनुकूलन: सुनिश्चित करें कि आपकी JS सामग्री मूल्यवान और कीवर्ड-अनुकूलित है। उचित शीर्षक टैग का उपयोग करें और प्रासंगिक कीवर्ड शामिल करें।
  • शीर्षक टैग और मेटा विवरण: अद्वितीय और वर्णनात्मक उत्पन्न करें शीर्षक टैग और मेटा विवरण जावास्क्रिप्ट का उपयोग करते हुए प्रत्येक पृष्ठ के लिए। वर्ण सीमा के भीतर कीवर्ड शामिल करें.
  • छवियों के लिए Alt विशेषताएँ: बेहतर पहुंच और एसईओ के लिए अपनी जावास्क्रिप्ट-आधारित छवियों में संक्षिप्त, कीवर्ड-समृद्ध ऑल्ट विशेषताएँ जोड़ें।
  • मेटा रोबोट टैग: अनुक्रमण और लिंक का अनुसरण करने पर खोज इंजन क्रॉलर का मार्गदर्शन करने के लिए मेटा रोबोट टैग शामिल करें। वांछित सामग्री के लिए "इंडेक्स" और "फ़ॉलो" चुनें या संवेदनशील या डुप्लिकेट सामग्री के लिए "नोइंडेक्स" और "नोफ़ॉलो" का उपयोग करें।
  • जावास्क्रिप्ट लोडिंग और प्रदर्शन: पृष्ठ गति और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए जावास्क्रिप्ट लोडिंग को अनुकूलित करें। लोडिंग समय को कम करने, कैशिंग का लाभ उठाने और महत्वपूर्ण पृष्ठ तत्वों को अवरुद्ध करने से बचने के लिए फ़ाइल आकार को संपीड़ित करें।

उचित लिंक का प्रयोग करें

जावास्क्रिप्ट को लागू करते समय आपको यह याद रखने की आवश्यकता है कि Google केवल जेएस-इंजेक्टेड लिंक का अनुसरण करेगा यदि वे ठीक से कोडित हैं। एक HTML टैग एक यूआरएल और एक के साथ href उचित यूआरएल की ओर इशारा करने वाली विशेषता वह स्वर्णिम नियम है जिसका आपको पालन करना होगा। जब तक टैग है, आप सब अच्छे हैं, भले ही आप लिंक कोड में कुछ जेएस जोड़ दें।

आपका एंकर टेक्स्ट

इस बीच, अन्य सभी विविधताएं जैसे गायब टैग वाले लिंक या href विशेषता या उचित यूआरएल के बिना उपयोगकर्ताओं के लिए काम करेगा लेकिन Google उनका अनुसरण नहीं कर पाएगा।

आपका एंकर टेक्स्ट, आपका एंकर टेक्स्ट, आपका एंकर टेक्स्ट, कोई लिंक नहीं

निश्चित रूप से, यदि आप a का उपयोग करते हैं साइट का नक्शा, Google को अभी भी आपके वेबसाइट पृष्ठों की खोज करनी चाहिए, भले ही वह इन पृष्ठों पर जाने वाले आंतरिक लिंक का अनुसरण न कर सके। हालाँकि, खोज इंजन अभी भी साइटमैप के लिंक को प्राथमिकता देता है क्योंकि वे आपकी वेबसाइट की संरचना और पृष्ठों के एक-दूसरे से संबंधित होने के तरीके को समझने में मदद करते हैं। इसके अलावा, आंतरिक लिंकिंग आपको इसकी अनुमति देती है लिंक जूस फैलाएं आपकी वेबसाइट पर. इसकी जांच करो आंतरिक लिंकिंग पर गहन मार्गदर्शिका यह कैसे काम करता है यह जानने के लिए।

सार्थक HTTP स्थिति कोड का उपयोग करें

यह सुनिश्चित करना कि HTTP स्थिति कोड प्रासंगिक और सार्थक हैं, एक आवश्यक SEO अभ्यास है जो Googlebot के साथ अच्छे संचार को सुविधाजनक बनाने में महत्वपूर्ण भूमिका निभाता है। जावास्क्रिप्ट इस प्रक्रिया को सरल बना सकता है। उदाहरण के लिए, यदि 404 कोड या कोई अन्य त्रुटि सामने आती है, तो उपयोगकर्ताओं को स्वचालित रूप से एक अलग/नहीं मिले पृष्ठ पर निर्देशित किया जाएगा। HTTP स्थिति कोड को प्रबंधित करने के लिए जावास्क्रिप्ट का उपयोग करके, वेबसाइटें अधिक सहज उपयोगकर्ता अनुभव प्रदान कर सकती हैं, निराशा को कम कर सकती हैं और आगंतुकों को संभावित त्रुटियों के माध्यम से नेविगेट करने में सहायता कर सकती हैं।

अपनी robots.txt फ़ाइल में महत्वपूर्ण JavaScript फ़ाइलों को ब्लॉक करने से बचें

अपनी वेबसाइट की robots.txt फ़ाइल में आवश्यक जावास्क्रिप्ट फ़ाइलों को ब्लॉक न करें। यदि आप ऐसा करते हैं, तो Google आपकी सामग्री तक पहुंच, प्रसंस्करण या यहां तक ​​कि उसके साथ इंटरैक्ट नहीं कर पाएगा। इससे आपकी वेबसाइट को प्रभावी ढंग से समझने और रैंक करने की Google की क्षमता में भारी बाधा आ सकती है।

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

पेजिनेशन सही ढंग से लागू करें

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

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

इस समस्या को हल करने के लिए, उपयोगकर्ता क्रियाओं के अलावा, सही लिंक के साथ पेजिनेशन लागू करें। <a href> लिंक की सहायता से, खोज इंजन आसानी से प्रत्येक पृष्ठांकित पृष्ठ का अनुसरण और क्रॉल कर सकते हैं, यह सुनिश्चित करते हुए कि सभी सामग्री मिल गई है और अनुक्रमित है।

सर्वर-साइड या स्टेटिक रेंडरिंग का उपयोग करें 

जैसा कि ऊपर बताया गया है, वेब क्रॉलर को जावास्क्रिप्ट निष्पादित करने में कठिनाई होती है। यही कारण है कि क्रॉलर कभी-कभी इस प्रकार की सामग्री को पूरी तरह से अनदेखा कर सकते हैं। पृष्ठ क्रॉलर पृष्ठ को अनुक्रमित करने से पहले गतिशील सामग्री के पूर्ण रूप से प्रस्तुत होने की प्रतीक्षा करने से इंकार कर सकते हैं। 

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

SEO के लिए JS का परीक्षण

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

अधिमानतः, परीक्षण प्रारंभिक विकास चरण में किया जाना चाहिए जब चीजें आसानी से ठीक हो सकती हैं। मोबाइल-फ्रेंडली टेस्ट का उपयोग करके, आप हर बग को पहले ही पकड़ सकते हैं - बस अपने डेवलपर्स से विशेष टूल (उदाहरण के लिए) का उपयोग करके अपने स्थानीय होस्ट सर्वर पर एक यूआरएल बनाने के लिए कहें जादू करना). 

अब, आइए अन्य तरीकों का पता लगाएं जिनका उपयोग आप एसईओ के लिए जावास्क्रिप्ट का परीक्षण करने के लिए कर सकते हैं।

क्रोम में निरीक्षण करें

यह जांचने के लिए कि खोज इंजन आपके जावास्क्रिप्ट की व्याख्या कैसे करते हैं, आप क्रोम ब्राउज़र के डेवलपर टूल का उपयोग कर सकते हैं। Chrome में अपनी वेबसाइट खोलें, किसी भी तत्व पर राइट-क्लिक करें और "निरीक्षण करें" चुनें। इससे डेवलपर कंसोल खुल जाएगा, जहां आप पृष्ठ की HTML संरचना देख सकते हैं और जांच सकते हैं कि वांछित जावास्क्रिप्ट सामग्री दिखाई दे रही है या नहीं। यदि सामग्री छिपी हुई है या सही ढंग से प्रस्तुत नहीं की गई है, तो यह खोज इंजन के लिए पहुंच योग्य नहीं हो सकती है।

वैकल्पिक रूप से, आप टूल को चलाने के लिए Command+Option+J (Mac) या Control+Shift+J (Windows, Linux, Chrome OS) दबा सकते हैं।

Chrome DevTools में JavaScript डिबग करना

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

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

Google खोज कंसोल

Google खोज कंसोल एक शक्तिशाली उपकरण है जो आपको Google खोज परिणामों में अपनी वेबसाइट की उपस्थिति की निगरानी और अनुकूलन करने की अनुमति देता है। यह इस बारे में बहुमूल्य जानकारी प्रदान करता है कि Google आपकी साइट को कैसे क्रॉल और अनुक्रमित करता है। इसके लिए सर्च कंसोल के “यूआरएल निरीक्षण” अनुभाग पर जाएं। यहां से आप अलग-अलग यूआरएल सबमिट कर सकते हैं और देख सकते हैं कि Google किसी भी जावास्क्रिप्ट सामग्री सहित उन्हें कैसे प्रस्तुत करता है। इससे आपको यह पहचानने में मदद मिलेगी कि Google आपकी जावास्क्रिप्ट सामग्री तक प्रभावी ढंग से पहुंच और अनुक्रमणित करने में सक्षम है या नहीं।

"यूआरएल निरीक्षण" पर क्लिक करें और फिर "टेस्ट लाइव यूआरएल" सुविधा का उपयोग करें। फिर, पर क्लिक करें परीक्षण किया गया पृष्ठ देखें > और जानकारी > जावास्क्रिप्ट कंसोल संदेश.

जावास्क्रिप्ट कंसोल संदेश

Google कैश

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

गूगल में टेक्स्ट सर्च कर रहे हैं

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

साइट ऑडिट चलाएँ

एसईओ के लिए जावास्क्रिप्ट का परीक्षण करने और अपनी साइट पर जेएस से संबंधित सभी त्रुटियों का पता लगाने का एक आसान तरीका लॉन्च करना है तकनीकी एसईओ लेखा परीक्षा. यदि आप एसई रैंकिंग उपयोगकर्ता हैं, तो आपको वेबसाइट ऑडिट की समस्या रिपोर्ट के कई अनुभागों की जांच करनी होगी: जावास्क्रिप्ट और HTTP स्थिति कोड.

एसई रैंकिंग न केवल आपकी साइट पर पाई गई सभी त्रुटियों को सूचीबद्ध करती है बल्कि उन्हें ठीक करने के तरीके के बारे में सुझाव भी प्रदान करती है।

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

समस्याओं वाली JavaScript फ़ाइलें

हमारे लेख को पढ़ें वेबसाइट ऑडिट कैसे करें और सुधारों को प्राथमिकता दें और व्यापक वेबसाइट ऑडिट शुरू करके स्वयं टूल का परीक्षण करें।

और यदि आप प्रत्येक त्रुटि प्रकार का अधिक विस्तार से अध्ययन करना चाहते हैं, तो पढ़ना जारी रखें।

सामान्य जावास्क्रिप्ट एसईओ मुद्दे और उनसे कैसे बचें

अब, आप सोच रहे होंगे कि इस प्रोग्रामेटिक भाषा के साथ कौन से सामान्य एसईओ मुद्दे जुड़े हुए हैं। और ध्यान देने योग्य पहली बात यह है कि जावास्क्रिप्ट को फ़ाइलों के रूप में अलग से संग्रहीत किया जाता है और पृष्ठ से लिंक किया जाता है अनुभाग। 

मुख्य अनुभाग में सीएसएस और जेएस फ़ाइलें

पृष्ठ की सामग्री को पूर्ण रूप से प्रस्तुत करने के लिए ब्राउज़र और Google को इन संसाधनों को लाने की आवश्यकता है। कभी-कभी, Google और ब्राउज़र-या केवल Google-फ़ाइलों को लोड करने में विफल हो जाते हैं, और ऐसा होने के कारण CSS और JavaScript दोनों के लिए सामान्य हैं। 

कम कठोर मामलों में, Google और ब्राउज़र फ़ाइलें ला सकते हैं, लेकिन वे बहुत धीमी गति से लोड होते हैं, जो उपयोगकर्ता अनुभव को नकारात्मक रूप से प्रभावित करता है और वेबसाइट अनुक्रमण को भी धीमा कर सकता है। 

Google JS फ़ाइलें क्रॉल नहीं कर सकता

आपकी जावास्क्रिप्ट फ़ाइलें लाने के लिए, Googlebot को ऐसा करने की अनुमति की आवश्यकता होगी। अतीत में, Google को robots.txt फ़ाइल के साथ इन फ़ाइलों तक पहुँचने से रोकना आम बात थी क्योंकि Google वैसे भी उनका उपयोग नहीं करता था। अब जबकि सर्च दिग्गज वेबसाइट की सामग्री को समझने के लिए जावास्क्रिप्ट पर निर्भर है वेबमास्टर्स को प्रोत्साहित करता है "करने के लिएउन सभी साइट संपत्तियों को क्रॉल करने की अनुमति दें जो पेज रेंडरिंग को महत्वपूर्ण रूप से प्रभावित करेंगी: उदाहरण के लिए, सीएसएस और जावास्क्रिप्ट फ़ाइलें जो पेजों की समझ को प्रभावित करती हैं।” यदि आप फ़ाइलों को अनब्लॉक नहीं करते हैं, तो Google उन्हें रेंडर करने और जावास्क्रिप्ट-संचालित सामग्री को अनुक्रमित करने में सक्षम नहीं होगा। 

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

Google और ब्राउज़र JS फ़ाइलें लोड नहीं कर सकते

यह जांचने के लिए कि क्या आप क्रॉलिंग की अनुमति देते हैं, robots.txt फ़ाइल को पढ़ने के बाद, Googlebot आपके जावास्क्रिप्ट यूआरएल तक पहुंचने के लिए एक HTTP अनुरोध करता है। फ़ाइलों को प्रस्तुत करने के लिए आगे बढ़ने के लिए, इसे 200 ओके प्रतिक्रिया कोड प्राप्त करना चाहिए। हालाँकि, कभी-कभी, 4XX या 5XX जैसे अन्य स्थिति कोड वापस आ जाते हैं। यदि आपको विभिन्न स्थिति कोडों का त्वरित पुनर्कथन चाहिए, तो उनका क्या मतलब है इस गाइड आप के लिए है.

4XX स्थिति के साथ जावास्क्रिप्ट

4XX प्रतिक्रिया कोड का मतलब है कि अनुरोधित संसाधन मौजूद नहीं है। जावास्क्रिप्ट फ़ाइलों की बात करें तो इसका मतलब है कि Googlebot ने इसमें दर्शाए गए URL का अनुसरण किया है पृष्ठ का अनुभाग, लेकिन आपकी फ़ाइलें निर्दिष्ट स्थानों पर नहीं मिलीं। जब कोई पृष्ठ 4XX लौटाता है, तो इसका आमतौर पर मतलब होता है कि पृष्ठ हटा दिया गया था। जावास्क्रिप्ट के साथ, त्रुटि अक्सर होती है क्योंकि फ़ाइल का पथ सही ढंग से इंगित नहीं किया जाता है। यह एक अनुमति मुद्दा भी हो सकता है.

4XX प्रतिक्रिया कोड के बारे में बुरी बात यह है कि केवल Google ही आपकी जावास्क्रिप्ट फ़ाइलों को प्रस्तुत करने में समस्याओं का सामना नहीं कर रहा है। ब्राउज़र ऐसी फ़ाइलों को निष्पादित करने में भी सक्षम नहीं होंगे, जिसका अर्थ है कि आपकी वेबसाइट उतनी अच्छी नहीं दिखेगी और अपनी अन्तरक्रियाशीलता खो देगी।

यदि जेएस का उपयोग वेबसाइट पर सामग्री लोड करने के लिए किया जाता है (उदाहरण के लिए संबंधित वेबसाइट पर स्टॉक एक्सचेंज दरें), तो कोड ठीक से नहीं चलने पर सभी गतिशील रूप से प्रस्तुत सामग्री गायब हो जाएगी। 

त्रुटि को ठीक करने के लिए, आपके डेवलपर्स को पहले यह पता लगाना होगा कि इसका कारण क्या है, और उपयोग की गई तकनीकों के आधार पर कारण अलग-अलग होंगे।

5XX स्थिति के साथ जावास्क्रिप्ट

5XX प्रतिक्रिया कोड इंगित करते हैं कि आपके वेब सर्वर पर कोई समस्या है। इसका मतलब है कि एक ब्राउज़र या Googlebot एक HTTP अनुरोध भेजता है, आपकी जावास्क्रिप्ट फ़ाइल का पता लगाता है लेकिन फिर आपका सर्वर फ़ाइल को वापस करने में विफल रहता है। 

सबसे खराब स्थिति में, त्रुटि इसलिए होती है क्योंकि आपका पूरी वेबसाइट डाउन है. ऐसा तब होता है जब आपका सर्वर ट्रैफ़िक की मात्रा का सामना नहीं कर पाता है। ट्रैफ़िक में अचानक वृद्धि स्वाभाविक हो सकती है, लेकिन ज्यादातर मामलों में, यह आक्रामक पार्सिंग सॉफ़्टवेयर या किसी दुर्भावनापूर्ण बॉट द्वारा इसे बंद करने के विशिष्ट उद्देश्य (DDoS) के साथ आपके सर्वर में बाढ़ के कारण होता है। 

यदि ब्राउज़र निर्धारित समय अवधि के दौरान उन्हें लाने में विफल रहता है, तो सर्वर जावास्क्रिप्ट फ़ाइल वितरित करने में भी विफल हो सकता है 504 टाइमआउट त्रुटि. ऐसा तब हो सकता है जब फ़ाइल बंडल बहुत बड़ा हो या उपयोगकर्ता का इंटरनेट कनेक्शन धीमा हो।

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

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

जावास्क्रिप्ट फ़ाइलें पर्याप्त तेज़ी से लोड नहीं हो रही हैं

इस अनुभाग में, आइए उन मुद्दों पर गहराई से विचार करें जिनके कारण आपकी JavaScript फ़ाइलें लंबे समय तक या वांछित से थोड़ी अधिक देर तक लोड होती हैं। भले ही ब्राउज़र और Googlebot दोनों आपकी JS फ़ाइलों को लोड और रेंडर करने का प्रबंधन करते हैं, लेकिन ऐसा करने में उन्हें थोड़ा समय लगता है, आपको चिंतित होना चाहिए।

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

3XX स्थिति के साथ जावास्क्रिप्ट

3xx स्थिति कोड इंगित करता है कि अनुरोधित संसाधन को फिर से रूट किया गया है, और यह आपके वेबसाइट कोड में यूआरएल को नए स्थान पर रीडायरेक्ट करने के लिए आवश्यक है। यह न केवल डोमेन और पथ के लिए बल्कि संसाधन को पुनः प्राप्त करने के लिए उपयोग किए जाने वाले HTTP/HTTPS प्रोटोकॉल के लिए भी सच है।

नीचे दिए गए उदाहरण में, जावास्क्रिप्ट फ़ाइल को प्रारंभ में HTTP URL का उपयोग करके संदर्भित किया गया है:

<script nomodule type="text/javascript" src="http://static.files.bbci.co.uk/orbit/7c43b78b94b8ed38e941a5a5336425e5/js/polyfills.js"></script>

हालाँकि, फ़ाइल के लिए सही और अद्यतित URL को HTTPS का उपयोग करना चाहिए:

<script nomodule type="text/javascript" src="https://static.files.bbci.co.uk/orbit/7c43b78b94b8ed38e941a5a5336425e5/js/polyfills.js"></script>

Googlebot और ब्राउज़र अभी भी फ़ाइलें लाएंगे क्योंकि आपका सर्वर उन्हें उचित पते पर रीडायरेक्ट कर देगा। चेतावनी यह है कि गंतव्य URL तक पहुँचने के लिए उन्हें एक अतिरिक्त HTTP अनुरोध करना होगा। यह लोडिंग समय के लिए अच्छा नहीं है. हालांकि एकल यूआरएल या कुछ फ़ाइलों के लिए प्रदर्शन प्रभाव बहुत अधिक नहीं हो सकता है, बड़े पैमाने पर, यह पेज लोडिंग समय को काफी धीमा कर सकता है।

यहां समाधान स्पष्ट है - आपको बस वेबसाइट कोड में प्रत्येक पुराने जावास्क्रिप्ट यूआरएल को अप-टू-डेट गंतव्य यूआरएल से बदलना होगा।

कैशिंग सक्षम नहीं है 

आपके सर्वर पर HTTP अनुरोधों की संख्या को कम करने का एक शानदार तरीका प्रतिक्रिया हेडर में कैशिंग की अनुमति देना है। आपने निश्चित रूप से कैशिंग के बारे में सुना होगा - जब किसी वेबसाइट पर जानकारी ठीक से प्रदर्शित नहीं होती है तो आपको अक्सर अपने ब्राउज़र कैश को साफ़ करने का सुझाव मिलेगा।

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

कैश-नियंत्रण HTTP हेडर कैशिंग नियमों को निर्दिष्ट करने के लिए उपयोग किया जाता है जिनका ब्राउज़रों को पालन करना चाहिए: यह इंगित करता है कि किसी विशेष संसाधन को कैश किया जा सकता है या नहीं, इसे कौन कैश कर सकता है, और कैश्ड कॉपी कितने समय तक चल सकती है। जेएस फ़ाइलों की कैशिंग की अनुमति देने की अत्यधिक अनुशंसा की जाती है क्योंकि जब भी उपयोगकर्ता किसी वेबसाइट पर जाते हैं तो ब्राउज़र इन फ़ाइलों को अपलोड करते हैं, इसलिए उन्हें कैश में संग्रहीत करने से पेज लोडिंग समय में काफी वृद्धि हो सकती है। 

यहां JS फ़ाइलों के लिए कैशिंग को एक दिन और सार्वजनिक पहुंच पर सेट करने का एक उदाहरण दिया गया है।

हेडर ने कैश-कंट्रोल सेट किया "अधिकतम आयु=86400, सार्वजनिक"

हालांकि यह ध्यान देने योग्य है कि Googlebot आमतौर पर कैश-कंट्रोल HTTP हेडर को अनदेखा कर देता है क्योंकि वेबसाइट सेट के निर्देशों का पालन करने से क्रॉलिंग और रेंडरिंग इंफ्रास्ट्रक्चर पर बहुत अधिक भार पड़ेगा।

इसलिए, जब भी आप अपनी JS फ़ाइल को अपडेट करते हैं और चाहते हैं कि Google इस पर ध्यान दे, तो यह अनुशंसा की जाती है कि आप अपनी फ़ाइल का नाम बदलें और इसे एक अलग URL का उपयोग करके अपलोड करें। इस तरह, Google फ़ाइल को पुनः प्राप्त करेगा क्योंकि वह इसे एक बिल्कुल नए संसाधन के रूप में मानेगा जिसका उसने पहले कभी सामना नहीं किया है।

फाइलों की संख्या मायने रखती है

एकाधिक JavaScript फ़ाइलों का उपयोग करना डेवलपर के दृष्टिकोण से सुविधाजनक हो सकता है, लेकिन प्रदर्शन के लिहाज़ से यह बहुत अच्छा नहीं है। ब्राउज़र प्रत्येक फ़ाइल को लोड करने के लिए एक अलग HTTP अनुरोध भेजते हैं, और ब्राउज़र द्वारा संसाधित किए जा सकने वाले एक साथ नेटवर्क कनेक्शन की संख्या सीमित है। इसलिए, किसी पृष्ठ के सभी JS संसाधन रेंडरिंग गति को कम करते हुए एक-एक करके लोड होते रहेंगे।

इस कारण से, ब्राउज़र द्वारा लोड की जाने वाली फ़ाइलों की संख्या को न्यूनतम रखने के लिए अपनी जावास्क्रिप्ट फ़ाइल को बंडल करने की अनुशंसा की जाती है।

Google के दृष्टिकोण से, बहुत सारी JavaScript फ़ाइलें कोई समस्या नहीं है, जिसका अर्थ है कि यह उन्हें वैसे भी प्रस्तुत करेगा। लेकिन आपके पास जितनी अधिक फ़ाइलें होंगी, आप जेएस फ़ाइलें लोड करने पर अपना क्रॉल बजट उतना ही अधिक खर्च करेंगे। लाखों पृष्ठों वाली बड़ी वेबसाइटों के लिए, यह महत्वपूर्ण हो सकता है क्योंकि इसका मतलब यह होगा कि Google कुछ पृष्ठों को समय पर अनुक्रमित नहीं करेगा।

फ़ाइल का आकार भी मायने रखता है 

जावास्क्रिप्ट फ़ाइलों को बंडल करने में समस्या यह है कि जैसे-जैसे आपकी वेबसाइट बढ़ती है, कोड की नई लाइनें फाइलों में जुड़ जाती हैं और अंततः वे इतनी बड़ी हो सकती हैं कि यह एक बन जाएगी प्रदर्शन की समस्याएं.

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

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

के अनुसार सूचीकरण उपयोग की गई कैशिंग प्रौद्योगिकियों के आधार पर यह दो तरीकों से जा सकता है: आप या तो Googlebot को अपने JS बंडल को लगातार रीकैश करने के लिए बाध्य करेंगे या Google समय पर यह नोटिस करने में विफल हो सकता है कि कैश अब मान्य नहीं है और आप अंततः Google को पुरानी सामग्री देखेंगे।

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

सीएसएस और जावास्क्रिप्ट को संपीड़ित और छोटा करना

अपनी जावास्क्रिप्ट फ़ाइलों को हल्का रखने के लिए, आप उन्हें संपीड़ित और छोटा करना चाहेंगे। दोनों प्रथाएं स्रोत कोड को संपादित करके आपकी वेबसाइट संसाधनों के आकार को कम करने के लिए हैं, लेकिन वे स्पष्ट रूप से भिन्न हैं।

संपीड़न उस स्ट्रिंग के पहले उदाहरण के लिए स्रोत कोड के भीतर दोहराए जाने वाले स्ट्रिंग को पॉइंटर्स से बदलने की प्रक्रिया है। चूँकि किसी भी कोड में बहुत सारे दोहराव वाले हिस्से होते हैं (सोचिए कितने)। tags your JS contains) and pointers use less space than the initial code, file compression allows to reduce the file size by 70% तक. ब्राउज़र संपीड़ित कोड को नहीं पढ़ सकते हैं, लेकिन जब तक ब्राउज़र संपीड़न विधि का समर्थन करता है, तब तक वह रेंडर करने से पहले फ़ाइल को अनकंप्रेस करने में सक्षम होगा।

संपीड़न के बारे में सबसे अच्छी बात यह है कि डेवलपर्स को इसे मैन्युअल रूप से करने की आवश्यकता नहीं है। सभी भारी भारोत्तोलन सर्वर द्वारा किया जाता है, बशर्ते कि इसे संसाधनों को संपीड़ित करने के लिए कॉन्फ़िगर किया गया हो। उदाहरण के लिए, अपाचे सर्वर के लिए, कुछ कोड की पंक्तियाँ .htaccess फ़ाइल में जोड़ी जाती हैं संपीड़न सक्षम करने के लिए. 

minification स्रोत कोड से सफेद स्थान, गैर-आवश्यक अर्धविराम, अनावश्यक पंक्तियाँ और टिप्पणियों को हटाने की प्रक्रिया है। परिणामस्वरूप, आपको वह कोड मिलता है जो पूरी तरह से मानव-पठनीय नहीं है, लेकिन फिर भी मान्य है। ब्राउज़र ऐसे कोड को पूरी तरह से अच्छी तरह से प्रस्तुत कर सकते हैं, और वे इसे कच्चे कोड की तुलना में तेजी से पार्स और लोड भी करेंगे। वेब डेवलपर्स को स्वयं ही लघुकरण का ध्यान रखना होगा, लेकिन बहुत सारे समर्पित टूल के साथ, यह कोई समस्या नहीं होनी चाहिए। 

फ़ाइल आकार को कम करने की बात करें तो, लघुकरण आपको चौंका देने वाला 70% नहीं देगा। यदि आपके सर्वर पर पहले से ही संपीड़न सक्षम है, तो अपने संसाधनों को और छोटा करने से आपको उनके आकार को कुछ अतिरिक्त से 16% तक कम करने में मदद मिल सकती है, यह इस पर निर्भर करता है कि आपके संसाधनों को कैसे कोडित किया गया है। इस कारण से, कुछ वेब डेवलपर्स का मानना ​​है कि लघुकरण अप्रचलित है। हालाँकि, आपकी JS फ़ाइलें जितनी छोटी होंगी। बेहतर। इसलिए दोनों विधियों को संयोजित करना एक अच्छा अभ्यास है। 

बाहरी जावास्क्रिप्ट फ़ाइलों का उपयोग करना

कई वेबसाइटें तृतीय-पक्ष डोमेन पर होस्ट की गई बाहरी JavaScript फ़ाइलों का उपयोग करती हैं। एक ओपन-सोर्स कोड का पुन: उपयोग करना जो आपकी समस्या को पूरी तरह से हल करता है, एक महान विचार की तरह लग सकता है - आखिरकार, पहिये को फिर से बनाने का कोई मतलब नहीं है। किसी तैयार समाधान का उपयोग करने में वास्तव में कुछ भी गलत नहीं है जब तक कि इसे कॉपी करके वेबसाइट के सर्वर पर अपलोड किया जाता है। साथ ही, बाहरी रूप से होस्ट की गई तृतीय-पक्ष JS फ़ाइलों का उपयोग करना कई जोखिमों से जुड़ा है। 

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

अभिनय की दृष्टि से, ऊपर चर्चा की गई सभी त्रुटियों के बारे में सोचें। यदि आपके पास उस सर्वर तक पहुंच नहीं है जहां JS फ़ाइलें होस्ट की गई हैं, तो आप कैशिंग, संपीड़न, या 5XX त्रुटियों को डीबग करने में सक्षम नहीं होंगे।

यदि फ़ाइलों को होस्ट करने वाली वेबसाइट किसी बिंदु पर फ़ाइल को हटा देती है और आप इसे समय पर नोटिस करने में विफल रहते हैं, तो आपकी वेबसाइट ठीक से काम नहीं करेगी और आप 404 JS फ़ाइल को किसी वैध फ़ाइल से तुरंत बदलने में सक्षम नहीं होंगे।

अंत में, यदि JS फ़ाइलों को होस्ट करने वाली वेबसाइट एक (थोड़ी) भिन्न फ़ाइल पर 3XX रीडायरेक्ट सेट करती है, तो आपका वेबपेज अपेक्षा के अनुरूप नहीं दिख सकता है और काम नहीं कर सकता है। 

यदि आप तृतीय-पक्ष JS फ़ाइलों का उपयोग करते हैं, तो मेरी सलाह है कि उन पर कड़ी नज़र रखें। फिर भी, एक बेहतर समाधान यह है कि बाहरी जेएस का बिल्कुल भी उपयोग न किया जाए।

स्पॉट_आईएमजी

नवीनतम खुफिया

स्पॉट_आईएमजी