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

फ़िलहाल, 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 Search के नतीजों में सामाग्री नहीं दिख रही है, तो नीचे दी गई आम समस्याएं हल करने की कोशिश करें. अगर अब भी समस्या बनी हुई है, तो वेबमास्टर फ़ोरम में नया विषय पोस्ट करें.

कॉन्टेंट पूरा नहीं है या अलग दिख रहा है

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

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

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

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

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

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

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

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

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

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

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

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

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

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