JavaScript और Google Search को एक साथ काम करने देना

Google I/O 2019 से जुड़े नए अपडेट और अहम जानकारी पाएं.

लिज़ी हार्वे
लिज़ी हार्वे
मार्टिन स्प्लिट
मार्टिन स्प्लिट

Google Search के साथ बेहतरीन चीज़ें हो रही हैं और हमें Google I/O 2019 में इन चीज़ों के बारे में बताते हुए बहुत खुशी हो रही है!

इस पोस्ट में, हम JavaScript वेब ऐप्लिकेशन को Google Search में खोजे जाने लायक बनाने के सबसे सही तरीकों पर फ़ोकस करेंगे. इनमें ये शामिल हैं:

  • Googlebot अब Chromium का नया वर्शन इस्तेमाल करेगा
  • क्रॉल करने, रेंडर करने, और इंडेक्स करने के लिए Googlebot की पाइपलाइन
  • सुविधा की पहचान और गड़बड़ी ठीक करना
  • रेंडरिंग की रणनीतियां
  • Google Search में अपनी वेबसाइट के लिए टेस्टिंग टूल
  • सामान्य चुनौतियां और संभावित समाधान
  • JavaScript वाले वेब ऐप्लिकेशन में एसईओ के लिए सबसे सही तरीके

हमेशा लोकप्रिय रहने वाले Googlebot के बारे में जानें

इस साल हमने हर तरह के नए Googlebot का एलान किया था, जिसका इंतज़ार था.

Googlebot के हाथ में Chrome का लोगो
Googlebot अब Chromium का आधुनिक रेंडरिंग इंजन इस्तेमाल कर रहा है.

Googlebot, अब Google Search के लिए वेबसाइटें रेंडर करने के लिए, एक मॉडर्न Chromium इंजन का इस्तेमाल करता है. साथ ही, हम Googlebot को अपडेट रखने के लिए, Chromium के नए वर्शन की जांच करेंगे. आम तौर पर, Chrome के हर स्टेबल रिलीज़ के कुछ हफ़्तों के अंदर ऐसा किया जाता है. यह एलान, वेब डेवलपर और एसईओ के लिए एक अच्छी खबर है. ऐसा इसलिए, क्योंकि इसके लॉन्च होने के बाद Googlebot में 1,000 से ज़्यादा नई सुविधाएं उपलब्ध होंगी, जैसे कि ES6+, IntersectionObserver, और वेब कॉम्पोनेंट वर्शन 1.

जानें कि Googlebot कैसे काम करता है

Googlebot एक पाइपलाइन है, जिसमें कई कॉम्पोनेंट होते हैं. आइए जानते हैं कि Googlebot, Google Search के लिए पेजों को कैसे इंडेक्स करता है.

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

यह प्रोसेस इस तरह काम करती है:

  1. Googlebot, यूआरएल को क्रॉल करने के लिए एक लाइन में डालता है.
  2. इसके बाद, यह क्रॉल बजट के आधार पर, एचटीटीपी अनुरोध वाले यूआरएल फ़ेच करता है.
  3. Googlebot, लिंक के लिए एचटीएमएल को स्कैन करता है और खोजे गए लिंक को क्रॉल करने के लिए सूची में जोड़ देता है.
  4. इसके बाद, Googlebot, पेज को रेंडरिंग के लिए सूची में जोड़ देता है.
  5. जितनी जल्दी हो सके, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chromium इंस्टेंस, पेज को रेंडर करता है. इसमें JavaScript का एक्ज़ीक्यूशन भी शामिल है.
  6. Googlebot, पेज को इंडेक्स करने के लिए, रेंडर किए गए एचटीएमएल का इस्तेमाल करता है.

आपका तकनीकी सेट अप, क्रॉल करने, रेंडर करने, और इंडेक्स करने की प्रोसेस पर असर डाल सकता है. उदाहरण के लिए, धीमा जवाब या सर्वर की गड़बड़ियां क्रॉल बजट पर असर डाल सकती हैं. ऐसा भी हो सकता है कि लिंक को रेंडर करने के लिए JavaScript की ज़रूरत पड़े. इससे इन लिंक को खोजने में ज़्यादा समय लग सकता है.

सुविधा की पहचान करने और गड़बड़ियों को ठीक करने का तरीका

सदाबहार Googlebot में कई नई सुविधाएं हैं, लेकिन कुछ सुविधाएं अब भी काम नहीं करती हैं. काम न करने वाली सुविधाओं पर भरोसा करने या गड़बड़ियों को ठीक से मैनेज न करने का मतलब यह हो सकता है कि Googlebot आपके कॉन्टेंट को रेंडर या इंडेक्स नहीं कर सकता.

आइए एक उदाहरण देखें:

 <body>
   <script>
     navigator.geolocation.getCurrentPosition(function onSuccess(position) {
       loadLocalContent(position);
     });
   </script>
 </body>

कुछ मामलों में यह पेज कोई कॉन्टेंट नहीं दिखा सकता, क्योंकि जब उपयोगकर्ता अनुमति अस्वीकार कर देता है या getCurrentPosition कॉल एक गड़बड़ी दिखाता है, तब कोड हैंडल नहीं करता. Googlebot इस तरह के अनुमति के अनुरोधों को डिफ़ॉल्ट रूप से अस्वीकार करता है.

यह एक बेहतर समाधान है:

 <body>
   <script>
     if (navigator.geolocation) {
       // this browser supports the Geolocation API, request location!
       navigator.geolocation.getCurrentPosition(
         function onSuccess(position) {
           // we successfully got the location, show local content
           loadLocalContent(position);
         }, function onError() {
           // we failed to get the location, show fallback content
           loadGlobalContent();
         });
     } else {
       // this browser does not support the Geolocation API, show fallback content
       loadGlobalContent();
     }
   </script>
 </body>

अगर आपको अपनी JavaScript साइट को इंडेक्स कराने में समस्याएं आ रही हैं, तो इसका समाधान पाने के लिए समस्या हल करने वाली हमारी गाइड देखें.

अपने वेब ऐप्लिकेशन के लिए रेंडरिंग की सही रणनीति चुनना

एक पेज वाले ऐप्लिकेशन के लिए, रेंडरिंग की डिफ़ॉल्ट रणनीति, मौजूदा क्लाइंट-साइड रेंडरिंग है. एचटीएमएल, JavaScript को लोड करता है. इसके बाद, वह कॉन्टेंट को ब्राउज़र में जनरेट करता है.

आइए एक ऐसे वेब ऐप्लिकेशन पर नज़र डालते हैं जो बिल्ली की इमेज का कलेक्शन दिखाता है और ब्राउज़र में पूरी तरह से रेंडर करने के लिए JavaScript का इस्तेमाल करता है.

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

अगर आप रेंडरिंग की रणनीति चुन सकते हैं, तो सर्वर-साइड रेंडरिंग या प्री-रेंडरिंग का इस्तेमाल करें. वे शुरुआती एचटीएमएल कॉन्टेंट जनरेट करने के लिए सर्वर पर JavaScript लागू करते हैं. इससे उपयोगकर्ताओं और क्रॉलर, दोनों की परफ़ॉर्मेंस बेहतर हो सकती है. ये रणनीतियां ब्राउज़र को नेटवर्क पर एचटीएमएल के आते ही, उसे रेंडर करना शुरू करने में मदद करती हैं. इससे पेज तेज़ी से लोड होता है. I/O पर रेंडरिंग सेशन या वेब पर रेंडरिंग के बारे में ब्लॉग पोस्ट से पता चलता है कि सर्वर-साइड रेंडरिंग और हाइड्रेशन से वेब ऐप्लिकेशन की परफ़ॉर्मेंस और उपयोगकर्ता अनुभव कैसे बेहतर हो सकता है. साथ ही, इन रणनीतियों के लिए ज़्यादा कोड के उदाहरण भी दिए गए हैं.

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

अपने पेज की जांच करें

आम तौर पर, ज़्यादातर पेज Googlebot के साथ ठीक से काम करते हैं. हालांकि, हमारा सुझाव है कि आप अपने पेजों की नियमित तौर पर जांच करें. इससे यह पक्का किया जा सकेगा कि आपका कॉन्टेंट, Googlebot पर उपलब्ध है और इसमें कोई समस्या नहीं है. ऐसा करने के लिए कई बेहतरीन टूल मौजूद हैं.

मोबाइल-फ़्रेंडली जांच की मदद से, किसी पेज की आसानी से जांच की जा सकती है. यह आपको मोबाइल-फ़्रेंडली होने से जुड़ी समस्याओं के बारे में बताता है. साथ ही, यह आपको वेबपेज पर सबसे ऊपर मौजूद कॉन्टेंट और रेंडर किए गए एचटीएमएल का स्क्रीनशॉट भी दिखाता है, जैसा कि Googlebot को दिखता है.

मोबाइल-फ़्रेंडली जांच से पता चलता है कि पेज को रेंडर करने के बाद, Googlebot को रेंडर किया गया एचटीएमएल कौनसा दिखता है
मोबाइल-फ़्रेंडली टेस्ट से पता चलता है कि Googlebot, रेंडर किए गए एचटीएमएल को किस तरह इस्तेमाल करता है.

इससे यह भी पता लगाया जा सकता है कि रिसॉर्स लोड करने में समस्याएं आ रही हैं या JavaScript की गड़बड़ियां हैं.

मोबाइल-फ़्रेंडली टेस्ट, JavaScript की गड़बड़ियों और स्टैक ट्रेस को दिखाता है.

हमारा सुझाव है कि आप Google Search Console में अपने डोमेन की पुष्टि करें. इससे यूआरएल के क्रॉल और इंडेक्स होने की स्थिति के बारे में ज़्यादा जानने के लिए, यूआरएल जांचने वाले टूल का इस्तेमाल किया जा सकता है. साथ ही, इससे आपको Search Console में समस्याओं का पता चलने पर मैसेज पाने, और Google Search में आपकी साइट की परफ़ॉर्मेंस के बारे में ज़्यादा जानकारी पाने में मदद मिलती है.

यूआरएल जांचने वाला टूल, जिसमें ऐसे पेज को दिखाया गया है जिसे एक यूआरएल के लिए खोजने, क्रॉल करने, और इंडेक्स करने से जुड़ी जानकारी के साथ इंडेक्स किया गया है
Search Console में यूआरएल जांचने वाला टूल, किसी पेज के क्रॉल, रेंडर, और इंडेक्स होने की स्थिति को दिखाता है.

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

लाइटहाउस एसईओ रिपोर्ट में 44 का स्कोर दिया गया है. इसमें मोबाइल-फ़्रेंडली होने के बारे में चेतावनियां और कॉन्टेंट के सबसे सही तरीकों के बारे में चेतावनियां भी दी गई हैं
Lighthouse किसी पेज के लिए, एसईओ के सामान्य सुझाव दिखाता है.

इन टूल की मदद से, Google Search में पेजों से जुड़ी समस्याओं को पहचाना जा सकता है, उन्हें डीबग किया जा सकता है, और ठीक किया जा सकता है. ये आपके डेवलपमेंट रूटीन का हिस्सा होने चाहिए.

अप-टू-डेट रहें और संपर्क में रहें

Google Search से जुड़ी सूचनाओं और बदलावों के बारे में अप-टू-डेट रहने के लिए, हमारा वेबमास्टर ब्लॉग, Google वेबमास्टर YouTube चैनल, और हमारे Twitter खाते पर नज़र रखें. साथ ही, एसईओ और JavaScript के बारे में ज़्यादा जानने के लिए, हमारी Google Search की डेवलपर गाइड और JavaScript एसईओ के बारे में वीडियो सीरीज़ देखें.