Search से जुड़ी JavaScript समस्याएं ठीक करना

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

Googlebot को वेब का एक अच्छा सदस्य बनने के लिए डिज़ाइन किया गया है. क्रॉल करना इसकी मुख्य प्राथमिकता है. इसमें, इस बात का ध्यान रखा जाता है कि यह साइट पर आने वाले उपयोगकर्ताओं के अनुभव को खराब न करे. Googlebot और उसके वेब रेंडरिंग सेवा (WRS) कॉम्पोनेंट, ऐसे संसाधनों का विश्लेषण और उनकी पहचान करते रहते हैं जो पेज के ज़रूरी कॉन्टेंट के लिए योगदान नहीं देते. साथ ही, हो सकता है कि ऐसे संसाधनों को शामिल न किया जा सके. उदाहरण के लिए, रिपोर्टिंग और गड़बड़ी के ऐसे अनुरोध जो पेज के ज़रूरी कॉन्टेंट में योगदान नहीं देते हैं. इसी तरह के दूसरे अनुरोध जिन्हें पेज के ज़रूरी कॉन्टेंट को निकालने के लिए इस्तेमाल नहीं किया गया है या जो ज़रूरी नहीं हैं. क्लाइंट-साइड के आंकड़े, शायद आपकी साइट पर Googlebot और WRS की गतिविधि को पूरी तरह से या सही तरीके से न दिखाएंं. अपनी साइट पर Googlebot और WRS की गतिविधि के साथ-साथ सुझाव/शिकायत/राय को मॉनिटर करने के लिए Search Console का इस्तेमाल करें.

अगर आपको लगता है कि JavaScript की समस्याओं की वजह से आपके पेज या JavaScript का इस्तेमाल करके, बनाए गए पेजों के खास कॉन्टेंट को Google Search में दिखाए जाने में रुकावट आ रही है, तो यह तरीका अपनाएं. अगर आपको पक्के तौर पर यह नहीं पता कि JavaScript ही मुख्य वजह है, तो मुख्य समस्या का पता लगाने के लिए डीबग करने की हमारी सामान्य गाइड देखें.

1. यह देखने के लिए कि Google किसी यूआरएल को कैसे क्रॉल और रेंडर करता है, Search Console में ज़्यादा बेहतर नतीजे (रिच रिज़ल्ट) की जांच या यूआरएल जांचने वाला टूल इस्तेमाल करें. साइट पर लोड किए गए रिसॉर्स की सूची, JavaScript कंसोल का आउटपुट और अपवाद, रेंडर किया गया DOM, और ज़्यादा जानकारी देखी जा सकती है.

   इसके अलावा, हम चाहते हैं कि आप कॉन्टेंट के रेंडर होने के तरीके पर असर डालने वाली समस्याओं की पहचान करें. इसके लिए, हमारा सुझाव है कि आपको अपनी साइट पर उपयोगकर्ताओं और Googlebot को मिलने वाली JavaScript की गड़बड़ियां इकट्ठा करके उनका ऑडिट करना चाहिए.

   यहां दिए गए उदाहरण में दिखाया गया है कि global onerror handler में लॉग की गई JavaScript की गड़बड़ियों को कैसे लॉग किया जाता है. ध्यान दें कि JavaScript की कुछ गड़बड़ियों को इस तरीके से लॉग नहीं किया जा सकता. जैसे, पार्स करने से जुड़ी गड़बड़ी.

   window.addEventListener('error', function(e) {
       var errorText = [
           e.message,
           'URL: ' + e.filename,
           'Line: ' + e.lineno + ', Column: ' + e.colno,
           'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
       ].join('\n');
   
       // Example: log errors as visual output into the host page.
       // Note: you probably don't want to show such errors to users, or
       //       have the errors get indexed by Googlebot; however, it may
       //       be a useful feature while actively debugging the page.
       var DOM_ID = 'rendering-debug-pre';
       if (!document.getElementById(DOM_ID)) {
           var log = document.createElement('pre');
           log.id = DOM_ID;
           log.style.whiteSpace = 'pre-wrap';
           log.textContent = errorText;
           if (!document.body) document.body = document.createElement('body');
           document.body.insertBefore(log, document.body.firstChild);
       } else {
           document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
       }
   
       // Example: log the error to remote service.
       // Note: you can log errors to a remote service, to understand
       //       and monitor the types of errors encountered by regular users,
       //       Googlebot, and other crawlers.
       var client = new XMLHttpRequest();
       client.open('POST', 'https://example.com/logError');
       client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
       client.send(errorText);
   
   });

2. soft 404 वाली गड़बड़ियों को रोकना न भूलें. एक पेज के ऐप्लिकेशन (एसपीए) में, यह खास तौर से मुश्किल हो सकता है. गड़बड़ी वाले पेजों को इंडेक्स होने से रोकने के लिए, इनमें से एक या दोनों रणनीतियां अपनाई जा सकती हैं:
   • उस यूआरएल पर रीडायरेक्ट करें जहां सर्वर जवाब में 404 स्टेटस कोड देता है.

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          // redirect to page that gives a 404
          window.location.href = '/not-found';
        }
      });

   • robots meta टैग को noindex में जोड़ें या बदलें.

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          const metaRobots = document.createElement('meta');
          metaRobots.name = 'robots';
          metaRobots.content = 'noindex';
          document.head.appendChild(metaRobots);
        }
      });

   जब कोई एसपीए, गड़बड़ियों को ठीक करने के लिए क्लाइंट-साइड पर JavaScript का इस्तेमाल करता है, तो अक्सर सही स्टेटस कोड के बजाय, 200 एचटीटीपी स्टेटस कोड बाताया जाता है. इस वजह से, गड़बड़ी वाले पेज इंडेक्स हो जाते हैं और खोज के नतीजों में दिख सकते हैं.

3. क्या आपको चाहिए कि Googlebot, उपयोगकर्ता की अनुमति के अनुरोधों को अस्वीकार करे.
   Googlebot या सभी उपयोगकर्ताओं के लिए, ऐसी सुविधाएं किसी काम की नहीं होतीं जिनके लिए उपयोगकर्ता की अनुमति ज़रूरी हो. उदाहरण के लिए, अगर Camera API को ज़रूरी बना दिया जाता है, तो Googlebot आपको कैमरे का ऐक्सेस नहीं दे सकता. इसके बजाय, आपको कैमरे का ऐक्सेस दिए बिना ही, उपयोगकर्ताओं को अपना कॉन्टेंट ऐक्सेस करने की सुविधा देनी होगी.
4. अलग-अलग कॉन्टेंट लोड करने के लिए, फ़्रैगमेंट यूआरएल इस्तेमाल न करें.
   कोई एसपीए, अलग-अलग व्यू को लोड करने के लिए फ़्रैगमेंट यूआरएल (उदाहरण के लिए, https://example.com/#/products) इस्तेमाल कर सकता है. AJAX-क्रॉलिंग स्कीम को, 2015 के बाद से बंद कर दिया गया है. इसलिए, Googlebot के साथ काम करने के लिए, फ़्रैगमेंट यूआरएल पर भरोसा नहीं किया जा सकता. हम किसी एसपीए में, यूआरएल के हिसाब से अलग-अलग कॉन्टेंट लोड करने के लिए, History API का इस्तेमाल करने का सुझाव देते हैं.
5. कॉन्टेंट दिखाने के लिए, डेटा के बने रहने पर भरोसा न करें.
   किसी सामान्य ब्राउज़र की तरह ही WRS भी सर्वर और क्लाइंट रीडायरेक्ट करने के बाद, हर यूआरएल को लोड करता है. Google के कॉन्टेंट खोजने के तरीके पर खास जानकारी पाने के लिए, Google Search कैसे काम करता है पर जाएं. हालांकि, WRS की सुविधा को पेज लोड होने तक बरकरार नहीं रखा जा सकता है:
   • लोकल मेमोरी और सेशन मेमोरी के डेटा को सभी पेज लोड से मिटा दिया जाता है.
   • एचटीटीपी कुकी को पेज लोड से हटा दिया जाता है.
6. Googlebot की मदद से कैश मेमोरी में सेव होने की समस्याओं से बचने के लिए, कॉन्टेंट फ़िंगरप्रिंट की सुविधा का इस्तेमाल करें.
   नेटवर्क के अनुरोधों और रिसॉर्स के इस्तेमाल को कम करने के लिए, Googlebot, कॉन्टेंट को कैश मेमोरी में सेव करता है. ऐसा हो सकता है कि WRS, कैश मेमोरी में सेव किए जाने वाले हेडर अनदेखा कर दे. इसकी वजह से WRS पुराने JavaScript या सीएसएस रिसॉर्स का इस्तेमाल कर सकता है. कॉन्टेंट फ़िंगरप्रिंटिंग का तरीका, main.2bb85551.js जैसे फ़ाइल नाम के कॉन्टेंट वाले हिस्से का एक फ़िंगरप्रिंट बनाकर इस समस्या से बचाता है. फ़िंगरप्रिंट, फ़ाइल के कॉन्टेंट पर निर्भर करता है. इसलिए, अपडेट में हर बार एक अलग फ़ाइल नाम जनरेट किया जाता है. ज़्यादा जानने के लिए, लंबे समय के लिए पेज को कैश मेमोरी में सेव करने की रणनीति के बारे में web.dev गाइड देखें.
7. पक्का करें कि आपका ऐप्लिकेशन सभी ज़रूरी एपीआई के लिए, सुविधा की पहचान का इस्तेमाल करता हो. साथ ही, ये एपीआई जहां ज़रूरत हो, फ़ॉलबैक या पॉलीफ़िल उपलब्ध कराते हों.
   ऐसा हो सकता है कि कुछ वेब सुविधाओं को, अब भी सभी उपयोगकर्ता एजेंट इस्तेमाल न कर रहे हों. साथ ही, ऐसा भी हो सकता है कि कुछ सुविधाओं को जान-बूझकर बंद कर दिया गया हो. उदाहरण के लिए, ब्राउज़र में फ़ोटो इफ़ेक्ट दिखाने की सुविधा को रेंडर करने के लिए WebGL का इस्तेमाल करने पर, 'सुविधा की पहचान' से पता चल जाता है कि Googlebot, WebGL पर काम नहीं करता. इस समस्या को हल करने के लिए, फ़ोटो इफ़ेक्ट की सुविधा छोड़ने का विकल्प होता है. इसके अलावा, फ़ोटो इफ़ेक्ट को पहले ही रेंडर करने के लिए, सर्वर-साइड रेंडरिंग का इस्तेमाल किया जा सकता है. इस तरह आपके कॉन्टेंट को सभी ऐक्सेस कर सकेंगे, जिसमें Googlebot भी शामिल है.
8. पक्का करें कि आपका कॉन्टेंट एचटीटीपी कनेक्शन के साथ काम करता हो.
   आपके सर्वर से कॉन्टेंट वापस पाने के लिए, Googlebot, एचटीटीपी अनुरोधों का इस्तेमाल करता है. यह किसी दूसरे तरह के कनेक्शन के साथ काम नहीं करता, जैसे कि WebSockets या WebRTC कनेक्शन. ऐसे कनेक्शन से जुड़ी समस्याओं से बचने के लिए, एचटीटीपी फ़ॉलबैक ज़रूर दें. इससे कॉन्टेंट वापस पाने और बड़ी गड़बड़ियों को ठीक करने के साथ ही सुविधा की पहचान करने में मदद मिलेगी.
9. पक्का करें कि आपके वेब कॉम्पोनेंट ठीक तरह से रेंडर हुए हों. यह जांचने के लिए कि रेंडर किए गए एचटीएमएल में वह पूरा कॉन्टेंट मौजूद है या नहीं जिसकी आपको को उम्मीद थी, ज़्यादा बेहतर नतीजे (रिच रिज़ल्ट) की जांच या यूआरएल जांचने वाला टूल इस्तेमाल करें.
   WRS, लाइट डीओएम और शैडो डीओएम को एक जैसा करता है. अगर आपका वेब कॉम्पोनेंट, लाइट डीओएम कॉन्टेंट के लिए <slot> तकनीक का इस्तेमाल नहीं करता है, तो ज़्यादा जानकारी के लिए उस वेब कॉम्पोनेंट का दस्तावेज़ देखें या दूसरा वेब कॉम्पोनेंट का इस्तेमाल करें. ज़्यादा जानकारी के लिए, वेब कॉम्पोनेंट के लिए सबसे सही तरीके देखें.
10. इस चेकलिस्ट में बताई गई समस्याएं ठीक करने के बाद, अपने पेज की फिर से जांच करें. ऐसा करने के लिए, Search Console में ज़्यादा बेहतर नतीजे (रिच रिज़ल्ट) की जांच या यूआरएल जांचने वाले टूल का इस्तेमाल करें.

    समस्या को ठीक कर लेने पर, हरे रंग का सही का निशान दिखता है और गड़बड़ियां नहीं दिखती हैं. अगर आपको अब भी गड़बड़ियां दिखती हैं, तो JavaScript के सर्च वर्किंग ग्रुप में पोस्ट करें.