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

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

इस गाइड में बताया गया है कि Google Search किस तरह JavaScript को प्रोसेस करता है. साथ ही, इसमें Google Search के लिए 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 सर्वर साइड पर कोई गड़बड़ी हो.

एक पेज वाले ऐप्लिकेशन में 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 टैग का सावधानी से इस्तेमाल करना

आप Googlebot को पेज इंडेक्स करने या मेटा robots टैग की मदद से किसी लिंक पर जाने से रोक सकते हैं. उदाहरण के लिए, अपने पेज के सबसे ऊपरी हिस्से में इन मेटा टैग को जोड़ने से 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, रोबोट मेटा टैग में noindex दिखाई देता है, तो वह उस पेज को रेंडर या इंडेक्स नहीं करता.

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

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

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

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

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

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>
    

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

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