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

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

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

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

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

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

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

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

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

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

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

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

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

  1. डायनामिक रेंडरर को इंस्टॉल और कॉन्फ़िगर करें ताकि आपकी सामग्री स्टैटिक एचटीएमएल में बदली जा सके. सामग्री का यह वर्शन क्रॉलर के इस्तेमाल करने के लिए आसान होता है. आम तौर पर इस्तेमाल होने वाले डायनैमिक रेंडरर हैं: Puppeteer, Rendertron, और prerender.io.
  2. ऐसे उपयोगकर्ता एजेंट चुनें जिन्हें आपके हिसाब से सामग्री का स्टैटिक एचटीएमएल वर्शन दिखना चाहिए. साथ ही, उपयोगकर्ता एजेंट अपडेट करने या जोड़ने का तरीका जानने के लिए, अपनी खास कॉन्फ़िगरेशन की जानकारी देखें. यहां 'रेंडरट्रॉन मिडलवेयर' में सामान्य उपयोगकर्ता एजेंट की सूची का एक उदाहरण दिया गया है:
    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. चुने गए क्रॉलर को स्टैटिक एचटीएमएल सामग्री उपलब्ध कराने के लिए अपना सर्वर कॉन्फ़िगर करें. आपके पास मौजूद तकनीक के हिसाब से आप कई तरीकों से ऐसा कर सकते हैं. यहां ऐसा करने के कुछ उदाहरण दिए गए हैं:
    • क्रॉलर से डायनैमिक रेंडरर को मिलने वाले प्रॉक्सी अनुरोध की मदद से.
    • सर्वर को कॉन्फ़िगर करने के दौरान, प्री-रेंडरिंग करके और अपने सर्वर से क्रॉलर को स्टैटिक एचटीएमएल भेजकर.
    • अपने कस्टम सर्वर कोड में डायनैमिक रेंडरिंग बनाकर.
    • प्री-रेंडरिंग सुविधा का इस्तेमाल करके, क्रॉलर को स्टैटिक सामग्री भेजकर.
    • अपने सर्वर के लिए मिडलवेयर का इस्तेमाल करके (जैसे, रेंडरट्रॉन मिडलवेयर).

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

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

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

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

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

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

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

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

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

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

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

समस्याओं का हल

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

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

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

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

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

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

हो गया समस्या को ठीक करें

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

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

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

हो गया समस्या को ठीक करें

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

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

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

हो गया समस्या को ठीक करें

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