JavaScript SEO की बुनियादी बातों को समझें

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

इस गाइड में बताया गया है कि 'Google सर्च' किस तरह JavaScript को प्रोसेस करता है. साथ ही, इसमें 'Google सर्च' के लिए JavaScript वेब ऐप्लिकेशन को बेहतर बनाने के सबसे अच्छे तरीके भी हैं.

Googlebot का JavaScript को प्रोसेस करने का तरीका

JavaScript वाले वेब ऐप्लिकेशन को प्रोसेस करने के लिए Googlebot मुख्य तौर पर इन स्तरोंं पर काम करता है:

  1. क्रॉल करना
  2. रेंडर करना
  3. इंडेक्स करना

Googlebot किसी पेज को क्रॉल करता है, रेंडर करता है, और इंडेक्स करता है.

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

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

इसके बाद Googlebot, एचटीएमएल लिंक की href विशेषता में मौजूद यूआरएल के अनुरोध के जवाब को पार्स करता है और यूआरएल, क्रॉल की सूची में जोड़ देता है. लिंक को खोजने से रोकने के लिए nofollow तरीके का इस्तेमाल करें.

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

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

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

खास शीर्षक और स्निपेट का इस्तेमाल करके, अपने पेज की जानकारी देना

जानकारी देने वाले खास शीर्षक और मददगार मुख्य जानकारियां, उपयोगकर्ताओं के लिए सबसे बेहतर नतीजा पहचानने में मदद करती हैं. हमने अपने दिशा-निर्देशों में बताया है कि अच्छे शीर्षक और जानकारियां क्या होती हैं.

आप JavaScript का इस्तेमाल मुख्य जानकारी और शीर्षक सेट करने या उनमें बदलाव करने के लिए कर सकते हैं.

इस्तेमाल किया जा सकने वाला कोड लिखना

ब्राउज़र कई एपीआई की सुविधा देते हैं. साथ ही, JavaScript का इस्तेमाल बहुत तेज़ी से बढ़ रहा है. Googlebot के लिए कुछ चुनिंदा एपीआई और JavaScript की तय सुविधाएं ही इस्तेमाल की जा सकती हैं. यह पक्का करने के लिए कि आपका कोड, Googlebot पर इस्तेमाल किया जा सकता है, JavaScript की समस्याओं को हल करने से जुड़े हमारे दिशा-निर्देशों का पालन करें.

सही एचटीटीपी स्टेटस कोड का इस्तेमाल करना

क्रॉल करने में होने वाली गड़बड़ियों का पता लगाने के लिए Googlebot, एचटीटीपी स्टेटस कोड का इस्तेमाल करता है.

Googlebot को यह बताने के लिए किसी पेज को क्रॉल या इंडेक्स नहीं करना है, आपको सही स्थिति कोड इस्तेमाल करने चाहिए. उदाहरण के लिए, जो पेज मौजूद नहीं है उसके लिए 404 या लॉग इन की ज़रूरत वाले पेजों के लिए 401 कोड का इस्तेमाल करना चाहिए. आप एचटीटीपी स्टेटस कोड की मदद से Googlebot को यह बता सकते हैं कि पेज को नए यूआरएल पर मूव कर दिया है, ताकि इंडेक्स को उसी हिसाब से अपडेट किया जा सके.

कुछ एचटीटीपी स्टेटस कोड और उनके इस्तेमाल का तरीका यहां बताया गया है:

एचटीटीपी कोड स्थिति इस समय इस्तेमाल करना चाहिए
301 / 302 जब पेज किसी नए यूआरएल पर मूव कर दिया गया हो.
401 / 403 जब अनुमति की समस्या की वजह से पेज उपलब्ध न हो.
404 / 410 जब किसी पेज को हटा दिया गया हो.
5xx सर्वर साइट पर कोई गड़बड़ी हो.

सावधानी से मेटा रोबोट टैग का इस्तेमाल करना

आप Googlebot को पेज इंडेक्स करने या मेटा रोबोट टैग की मदद से किसी लिंक पर जाने से रोक सकते हैं. उदाहरण के लिए, अपने पेज के सबसे ऊपरी हिस्से में इन मेटा टैग को जोड़ने से Googlebot, पेज को इंडेक्स नहीं कर पाएगा:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

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

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

JavaScript के इस्तेमाल से पहले जब Googlebot, रोबोट मेटा टैग में noindex दिखाई देता है, तो वह उस पेज को रेंडर या इंडेक्स नहीं करता.

वेब कॉम्पोनेंट के लिए सबसे सही तरीके अपनाना

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

अगर सामग्री रेंडर किए गए एचटीएमएल में नहीं दिखती है, तो Googlebot उसे इंडेक्स नहीं कर पाएगा.

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

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      let p = document.createElement('p');
      p.innerHTML = 'Hello World, this is shadow DOM content. Here comes the light DOM: <slot></slot>';
      this.shadowRoot.appendChild(p);
    }
  }

  window.customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>This is light DOM content. It's projected into the shadow DOM.</p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
            

रेंडर करने के बाद, Googlebot इस सामग्री को इंडेक्स करेगा:

<my-component>
  Hello World, this is shadow DOM content. Here comes the light DOM:
  <p>This is light DOM content. It's projected into the shadow DOM<p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
    

इमेज और लोड होने में ज़्यादा समय लेने वाली सामग्री की समस्या ठीक करना

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