डाइनैमिक रेंडरिंग लागू करना

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

डाइनैमिक रेंडरिंग का इस्तेमाल ऐसी साइटों को करना चाहिए

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

डाइनैमिक रेंडरिंग के काम करने के तरीके को समझना

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

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

डाइनैमिक रेंडरिंग, क्लोकिंग नहीं है

आम तौर पर, Googlebot, डाइनैमिक रेंडरिंग को क्लोकिंग नहीं मानता. जब तक डाइनैमिक रेंडरिंग मिलती-जुलती सामग्री बनाती है, तब तक Googlebot डाइनैमिक रेंडरिंग को क्लोकिंग के तौर पर नहीं देखता.

जब आप डाइनैमिक रेंडरिंग सेट अप करते हैं, तो आपकी साइट गड़बड़ी वाले पेज दिखा सकती है. Googlebot, गड़बड़ी वाले इन पेजों को क्लोकिंग के तौर पर नहीं देखता. वह गड़बड़ी वाले दूसरे पेजों की तरह ही इन पर कार्रवाई करता है.

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

डाइनैमिक रेंडरिंग लागू करना

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

  1. डाइनैमिक रेंडरर को इंस्टॉल और कॉन्फ़िगर करें, ताकि आपकी सामग्री स्टैटिक एचटीएमएल में बदली जा सके. सामग्री का यह वर्शन क्रॉलर के इस्तेमाल के लिए आसान होता है. आम तौर पर इस्तेमाल होने वाले डाइनैमिक रेंडरर हैं: Puppeteer, Rendertron, और prerender.io.
  2. अपने हिसाब से ऐसे उपयोगकर्ता एजेंट चुनें जिन्हें सामग्री का स्टैटिक एचटीएमएल वर्शन दिखना चाहिए. साथ ही, उपयोगकर्ता एजेंट अपडेट करने या जोड़ने का तरीका जानने के लिए, अपनी कॉन्फ़िगरेशन की खास जानकारी देखें. यहां Rendertron मिडलवेयर में सामान्य उपयोगकर्ता एजेंट की सूची का एक उदाहरण दिया गया है:
        export const botUserAgents = [
          'googlebot',
          'google-structured-data-testing-tool',
          'bingbot',
          'linkedinbot',
          'mediapartners-google',
        ];
  3. अगर प्री-रेंडरिंग यानी पहले रेंडर करने की सुविधा आपके सर्वर की रफ़्तार कम करती है या आपको प्री-रेंडरिंग के ज़्यादा अनुरोध दिखते हैं, तो आप पहले से रेंडर की गई सामग्री के लिए कैश मेमोरी इस्तेमाल कर सकते हैं. इसके अलावा, आप इस बात की पुष्टि कर सकते हैं कि अनुरोध सही क्रॉलर ने किए हैं या नहीं.
  4. तय करें कि उपयोगकर्ता एजेंट को डेस्कटॉप या मोबाइल सामग्री की ज़रूरत है या नहीं. सामग्री का सही डेस्कटॉप या मोबाइल वर्शन दिखाने के लिए, डाइनैमिक तरीके से दिखाने की सुविधा का इस्तेमाल करें. नीचे दिए गए उदाहरण में बताया गया है कि कॉन्फ़िगरेशन से यह कैसे तय हो सकता है कि उपयोगकर्ता एजेंट को डेस्कटॉप या मोबाइल सामग्री की ज़रूरत है या नहीं:
        isPrerenderedUA = userAgent.matches(botUserAgents)
        isMobileUA = userAgent.matches(['mobile', 'android'])
        
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. चुने गए क्रॉलर को स्टैटिक एचटीएमएल सामग्री उपलब्ध कराने के लिए अपना सर्वर कॉन्फ़िगर करें. अपने पास मौजूद टेक्नोलॉजी के हिसाब से, आप कई तरीकों से ऐसा कर सकते हैं. यहां कुछ उदाहरण दिए गए हैं:
    • क्रॉलर से डाइनैमिक रेंडरर को मिलने वाले प्रॉक्सी अनुरोध की मदद से.
    • सर्वर को कॉन्फ़िगर करने के दौरान, प्री-रेंडरिंग करके और अपने सर्वर से क्रॉलर को स्टैटिक एचटीएमएल भेजकर.
    • अपने कस्टम सर्वर कोड में डाइनैमिक रेंडरिंग बनाकर.
    • प्री-रेंडरिंग सुविधा का इस्तेमाल करके, क्रॉलर को स्टैटिक सामग्री भेजकर.
    • अपने सर्वर के लिए मिडलवेयर का इस्तेमाल करके (जैसे, Rendertron मिडलवेयर).

अपने कॉन्फ़िगरेशन की पुष्टि करना

डाइनैमिक रेंडरिंग लागू करने के बाद, इस बात की पुष्टि करें कि सब कुछ आपकी उम्मीद के मुताबिक काम कर रहा है. इसके लिए आप नीचे दिए गए टेस्ट की मदद से यूआरएल की जांच कर सकते हैं:

  1. मोबाइल के हिसाब से जांच की मदद से अपनी सामग्री के मोबाइल वर्शन की जांच करके यह पक्का कर लें कि Google आपकी सामग्री देख सकता है.

    done पूरा हुआ: आपके मोबाइल की सामग्री वैसी ही दिख रही है जैसी आप उपयोगकर्ता को दिखाना चाहते हैं.

    error फिर से कोशिश करें: जो सामग्री आपको दिख रही है, अगर वह आपकी उम्मीद के मुताबिक नहीं है, तो 'समस्या का हल करना' सेक्शन देखें.

  2. यूआरएल की जांच करने वाले टूल की मदद से अपनी सामग्री के डेस्कटॉप वर्शन की जांच करें. यह पक्का कर लें कि डेस्कटॉप की सामग्री रेंडर किए गए पेज पर भी दिख रही है. Googlebot, आपके पेज की सामग्री को उसी तरह देखता है जैसी वह रेंडर किए गए पेज पर दिखती है.

    done पूरा हुआ: सामग्री का डेस्कटॉप वर्शन वैसा ही दिख रहा है जैसा आप उपयोगकर्ता को दिखाना चाहते हैं.

    error फिर से कोशिश करें: अगर आपकी साइट पर ऐसी सामग्री दिख रही है जो आपकी उम्मीद के मुताबिक नहीं है, तो 'समस्या का हल करना' सेक्शन देखें.

  3. अगर आप स्ट्रक्चर्ड डेटा इस्तेमाल करते हैं, तो स्ट्रक्चर्ड डेटा टेस्टिंग टूल की मदद से जांच लें कि आपका स्ट्रक्चर्ड डेटा ठीक से रेंडर हो रहा है.

    done पूरा हुआ: स्ट्रक्चर्ड डेटा आपकी उम्मीद के मुताबिक दिख रहा है.

    error फिर से कोशिश करें: अगर स्ट्रक्चर्ड डेटा आपकी उम्मीद के मुताबिक नहीं दिखता, तो 'समस्या का हल करना' सेक्शन देखें.

समस्या का हल करना

अगर मोबाइल के हिसाब से जांच में आपकी सामग्री में गड़बड़ियां दिख रही हैं या Google Search के नतीजों में सामाग्री नहीं दिख रही है, तो नीचे दी गई आम समस्याएं हल करने की कोशिश करें. अगर अब भी समस्या बनी हुई है, तो वेबमास्टर फ़ोरम में नया विषय पोस्ट करें.

सामग्री पूरी नहीं है या अलग दिख रही है

error समस्या किस वजह से हुई: शायद आपका रेंडरर सही तरीके से कॉन्फ़िगर न हुआ हो या फिर आपका वेब ऐप्लिकेशन आपके रेंडरर के साथ काम न करता हो. कभी-कभी समय खत्म होने की वजह से भी सामग्री ठीक से रेंडर नहीं हो पाती.

done समस्या ठीक करें: डाइनैमिक रेंडरिंग सेट अप को डीबग करने के लिए अपने खास रेंडरिंग समाधान से जुड़े दस्तावेज़ देखें.

जवाब देने में ज़्यादा समय लगना

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

done समस्या को ठीक करना

  1. पहले से रेंडर किए गए एचटीएमएल के लिए कैश मेमोरी सेट अप करें या अपनी बिल्ड प्रोसेस के हिस्से के तौर पर सामग्री का स्टैटिक एचटीएमएल वर्शन बनाएं.
  2. देख लें कि आपकी कॉन्फ़िगरेशन में कैश किया गया वर्शन चालू हो. उदाहरण के लिए, क्रॉलर को कैश किए गए वर्शन पर भेजकर आप ऐसा कर सकते हैं.
  3. मोबाइल के हिसाब से जांच या webpagetest जैसा टूल इस्तेमाल करके जांच लें कि क्रॉलर आपकी सामग्री को जल्दी से देख पाए. Google क्रॉलर उपयोगकर्ता एजेंट की सूची में शामिल कस्टम उपयोगकर्ता एजेंट स्ट्रिंग की मदद से webpagetest का इस्तेमाल करें. आपके अनुरोध समयसीमा खत्म होने से पहले पूरे हो जाने चाहिए.

वेब कॉम्पोनेंट ठीक तरह से रेंडर न होना

error समस्या किस वजह से हुई: शैडो DOM को पेज से अलग कर दिया गया है. रेंडर करने से जुड़े बॉट (जैसे Rendertron) अलग शैडो DOM में सामग्री नहीं देख सकते. ज़्यादा जानकारी के लिए, वेब कॉम्पोनेंट के लिए सबसे सही तरीके देखें.

done समस्या को ठीक करना

  1. कस्टम एलीमेंट और शैडो DOM के लिए webcomponents.js पॉलीफ़िल लोड करें.
  2. यह जांचने के लिए कि रेंडर करने वाले बॉट के लिए रेंडर किए गए एचटीएमएल में आपकी सभी सामग्री दिखती है या नहीं, मोबाइल के हिसाब से जांच या यूआरएल जांचने वाला टूल इस्तेमाल करें.

स्ट्रक्चर्ड डेटा मौजूद नहीं है

error समस्या किस वजह से हुई: स्ट्रक्चर्ड डेटा उपयोगकर्ता एजेंट के मौजूद न होने या आउटपुट में JSON-LD स्क्रिप्ट के टैग शामिल न करने की वजह से स्ट्रक्चर्ड डेटा की गड़बड़ियां हो सकती हैं.

done समस्या को ठीक करना

  1. स्ट्रक्चर्ड डेटा टेस्टिंग टूल का इस्तेमाल करके पक्का कर लें कि पेज पर स्ट्रक्चर्ड डेटा मौजूद है. इसके बाद, स्ट्रक्चर्ड डेटा टेस्टिंग टूल के लिए उपयोगकर्ता एजेंट कॉन्फ़िगर करें. इससे आप पहले से रेंडर की गई सामग्री की जांच कर पाएंगे.
  2. देख लें कि आपकी सामग्री के डाइनैमिक तरीके से रेंडर किए गए एचटीएमएल में JSON-LD स्क्रिप्ट के टैग शामिल हों. ज़्यादा जानकारी के लिए, रेंडरिंग की समस्या ठीक करने से जुड़े दस्तावेज़ देखें.