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

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

Googlebot को वेब का एक अच्छा सदस्य बनने के लिए डिज़ाइन किया गया है. क्रॉल करना इसकी मुख्य प्राथमिकता है. इसमें इस बात का ध्यान रखा जाता है कि यह साइट पर आने वाले उपयोगकर्ताओं के अनुभव को खराब न करे. Googlebot और उसका वेब रेंडरिंग सेवा (WRS) कॉम्पोनेंट, ऐसे संसाधनों का विश्लेषण और उनकी पहचान करते रहते हैं जो पेज के ज़रूरी कॉन्टेंट के लिए योगदान नहीं देते. इसके अलावा, ऐसा हो सकता है कि ये इन संसाधनों को फेच़ भी न करें. उदाहरण के लिए, रिपोर्टिंग और गड़बड़ी के ऐसे अनुरोध जो पेज के ज़रूरी कॉन्टेंट में योगदान नहीं देते हैं. इसी तरह के दूसरे अनुरोध, जिन्हें पेज के ज़रूरी कॉन्टेंट को निकालने के लिए इस्तेमाल नहीं किया गया है या जो ज़रूरी नहीं हैं. क्लाइंट-साइड के आंकड़े, शायद आपकी साइट पर Googlebot और WRS की गतिविधि को पूरी तरह से या सही तरीके से न दिखाएंं. अपनी साइट पर Googlebot और WRS की गतिविधि के साथ-साथ सुझाव/शिकायत/राय को मॉनिटर करने के लिए, Google 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. पक्का करें कि आपका ऐप्लिकेशन सभी ज़रूरी एपीआई के लिए, सुविधा की पहचान का इस्तेमाल करता हो. साथ ही, ये एपीआई जहां ज़रूरत हो, फ़ॉलबैक या polyfill उपलब्ध कराते हों.
   ऐसा हो सकता है कि कुछ वेब सुविधाओं को, अब भी सभी उपयोगकर्ता एजेंट इस्तेमाल न कर रहे हों. साथ ही, ऐसा भी हो सकता है कि कुछ सुविधाओं को जान-बूझकर बंद कर दिया गया हो. उदाहरण के लिए, ब्राउज़र में फ़ोटो इफ़ेक्ट दिखाने की सुविधा को रेंडर करने के लिए WebGL का इस्तेमाल करने पर, 'सुविधा की पहचान' से पता चल जाता है कि Googlebot, WebGL पर काम नहीं करता. इस समस्या को हल करने के लिए, फ़ोटो इफ़ेक्ट की सुविधा छोड़ने का विकल्प होता है. इसके अलावा, फ़ोटो इफ़ेक्ट को प्रीरेंडर करने के लिए, सर्वर-साइड रेंडरिंग का इस्तेमाल किया जा सकता है. इस तरह आपके कॉन्टेंट को सभी ऐक्सेस कर सकेंगे, जिसमें Googlebot भी शामिल है.
8. पक्का करें कि आपका कॉन्टेंट एचटीटीपी कनेक्शन के साथ काम करता हो.
   आपके सर्वर से कॉन्टेंट वापस पाने के लिए, Googlebot, एचटीटीपी अनुरोधों का इस्तेमाल करता है. यह किसी दूसरे तरह के कनेक्शन के साथ काम नहीं करता, जैसे कि WebSockets या WebRTC कनेक्शन. ऐसे कनेक्शन से जुड़ी समस्याओं से बचने के लिए, एचटीटीपी फ़ॉलबैक ज़रूर दें. इससे कॉन्टेंट वापस पाने और बड़ी गड़बड़ियों को ठीक करने के साथ ही सुविधा की पहचान करने में मदद मिलेगी
9. पक्का करें कि आपके वेब कॉम्पोनेंट ठीक तरह से रेंडर हुए हों. यह जांचने के लिए कि रेंडर किए गए एचटीएमएल में वह पूरा कॉन्टेंट मौजूद है या नहीं जिसकी आपको को उम्मीद थी, ज़्यादा बेहतर नतीजों (रिच रिज़ल्ट) की जांच या यूआरएल जांचने वाले टूल का इस्तेमाल करें.
   WRS, लाइट डीओएम और शैडो डीओएम को एक जैसा करता है. अगर आपका वेब कॉम्पोनेंट, लाइट डीओएम कॉन्टेंट के लिए <slot> तकनीक का इस्तेमाल नहीं करता है, तो ज़्यादा जानकारी के लिए उस वेब कॉम्पोनेंट का दस्तावेज़ देखें या दूसरे वेब कॉम्पोनेंट का इस्तेमाल करें. ज़्यादा जानकारी के लिए, वेब कॉम्पोनेंट के लिए सबसे सही तरीके देखें.
10. इस चेकलिस्ट में मौजूद आइटम से जुड़ी समस्याएं ठीक करने के बाद, अपने पेज की फिर से जांच करें. ऐसा करने के लिए, Search Console में ज़्यादा बेहतर नतीजों (रिच रिज़ल्ट) की जांच या यूआरएल जांचने वाले टूल का इस्तेमाल करें.

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