JavaScript एसईओ से जुड़ी बुनियादी बातें समझना

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

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

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

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

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

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

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

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

इसके बाद Googlebot, एचटीएमएल लिंक के href एट्रिब्यूट में मौजूद अन्य यूआरएल के अनुरोध के जवाब को पार्स करता है और यूआरएल को क्रॉल की सूची में जोड़ देता है. Googlebot लिंक को न खोज सके, इसके लिए 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 सर्वर साइड पर कोई गड़बड़ी हो.

एक पेज वाले ऐप्लिकेशन में soft 404 गड़बड़ियों से बचना

क्लाइंट-साइड पर रेंडर किए गए एक पेज वाले ऐप्लिकेशन में, रूटिंग को अक्सर क्लाइंट-साइड रूटिंग के रूप में लागू किया जाता है. इस मामले में, सही एचटीटीपी स्टेटस कोड का इस्तेमाल करना नामुमकिन या गलत हो सकता है. क्लाइंट-साइड रेंडरिंग और रूटिंग का इस्तेमाल करते समय soft 404 गड़बड़ियों से बचने के लिए, इनमें से किसी एक रणनीति का इस्तेमाल करें:

  • JavaScript रीडायरेक्ट का इस्तेमाल उस यूआरएल के लिए करें जिसके लिए सर्वर जवाब के रूप में 404 एचटीटीपी स्टेटस कोड (उदाहरण के लिए, /not-found) दिखाता है.
  • JavaScript का इस्तेमाल करके, गड़बड़ियों वाले पेज में <meta name="robots" content="noindex"> जोड़ें.

रीडायरेक्ट करने के लिए सैंपल कोड, यहां दिया गया है:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    window.location.href = '/not-found'; // redirect to 404 page on the server.
  }
})

noindex टैग का इस्तेमाल करने के लिए सैंपल कोड, यहां दिया गया है:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

फ़्रैगमेंट के बजाय इतिहास एपीआई का इस्तेमाल करना

जब Googlebot आपके पेजों में लिंक खोजता है, तो यह सिर्फ़ एचटीएमएल लिंक के href एट्रिब्यूट वाले यूआरएल पर ध्यान देता है.

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

<nav>
  <ul>
    <li><a href="#/products">Our products</a></li>
    <li><a href="#/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="#/products">our products</a> and <a href="#/services">our services</p>
</div>
<script>
window.addEventListener('hashchange', function goToPage() {
  // this function loads different content based on the current URL fragment
  const pageToLoad = window.location.hash.slice(1); // URL fragment
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
});
</script>

इसके बजाय, आप इतिहास एपीआई लागू करके यह पक्का कर सकते हैं कि Googlebot, लिंक यूआरएल को ऐक्सेस कर सके:

<nav>
  <ul>
    <li><a href="/products">Our products</a></li>
    <li><a href="/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="/products">our products</a> and <a href="/services">our services</p>
</div>
<script>
function goToPage(event) {
  event.preventDefault(); // stop the browser from navigating to the destination URL.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // remove the leading slash
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history.
}

// Enable client-side routing for all links on the page
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

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

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

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

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

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 को robots मेटा टैग में noindex दिखता है, तो वह उस पेज को रेंडर या इंडेक्स नहीं करता.

लंबे समय तक कैश मेमोरी में सेव रखने का तरीका इस्तेमाल करना

नेटवर्क के अनुरोधों और रिसॉर्स के इस्तेमाल को कम करने के लिए, Googlebot कॉन्टेंट को कैश मेमोरी में सेव करता है. वेब रेंडरिंग सर्विस (WRS) कैश मेमोरी में सेव किए जाने वाले हेडर को अनदेखा कर सकता है. इसकी वजह से WRS पुराने JavaScript या सीएसएस रिसॉर्स का इस्तेमाल कर सकता है. कॉन्टेंट फ़िंगरप्रिंटिंग का तरीका, main.2bb85551.js जैसे फ़ाइल नाम के कॉन्टेंट वाले हिस्से का एक फ़िंगरप्रिंट बनाकर इस समस्या से बचाता है. फ़िंगरप्रिंट, फ़ाइल के कॉन्टेंट पर निर्भर करता है. इसलिए, अपडेट में हर बार एक अलग फ़ाइल नाम जनरेट किया जाता है. ज़्यादा जानकारी के लिए, लंबे समय तक कैश मेमोरी में सेव रखने से जुड़े हमारे निर्देशों की web.dev गाइड देखें.

स्ट्रक्चर्ड डेटा का इस्तेमाल करना

अपने पेजों पर स्ट्रक्चर्ड डेटा का इस्तेमाल करते समय, आप ज़रूरी JSON-LD जनरेट करने और इसे पेज में इंजेक्ट करने के लिए, JavaScript इस्तेमाल कर सकते हैं. किसी तरह की समस्या से बचने के लिए, अपनी कार्रवाई के नतीजे की जांच करना न भूलें.

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

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

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

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

<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>
    

इमेज और धीमी रफ़्तार से लोड होने वाले कॉन्टेंट की समस्या ठीक करना

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

सुलभता के लिए डिज़ाइन

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