জাভাস্ক্রিপ্ট SEO সম্পর্কে প্রাথমিক ধারণা

জাভাস্ক্রিপ্ট ওয়েব প্ল্যাটফর্মের একটি গুরুত্বপূর্ণ বিষয়। তার কারণ হল এটিতে একাধিক ফিচার আছে যা ওয়েবকে একটি শক্তিশালী অ্যাপ্লিকেশন প্ল্যাটফর্মে পরিণত করে। আপনি আপনার যে ওয়েব অ্যাপ্লিকেশনগুলিতে জাভাস্ক্রিপ্ট ব্যবহার করেছেন সেইগুলিকে Google সার্চের মাধ্যমে খুঁজে পাওয়ার যোগ্য করে রাখলে, আপনার ওয়েব অ্যাপের দেওয়া কনটেন্ট খুঁজছেন এমন নতুন ব্যবহারকারী পেতে পারবেন এবং বর্তমান ব্যবহারকারীদের নতুন করে আপনার কনটেন্টের প্রতি আগ্রহী করে তুলতে পারবেন। Chromium-এর একটি এভারগ্রিন ভার্সন ব্যবহার করে Google Search জাভাস্ক্রিপ্ট রান করলেও, কিছু জিনিস আপনি অপ্টিমাইজ করতে পারেন

Google সার্চ কীভাবে জাভাস্ক্রিপ্ট প্রসেস করে এবং Google সার্চের জন্য জাভাস্ক্রিপ্ট দিয়ে তৈরি ওয়েব অ্যাপ উন্নত করার পেশাদার পদ্ধতি সম্পর্কে বিবরণ এই নির্দেশিকায় দেওয়া আছে।

Googlebot-এর জাভাস্ক্রিপ্ট প্রসেস করার পদ্ধতি

Googlebot তিনটি প্রধান ধাপে জাভাস্ক্রিপ্ট দিয়ে তৈরি ওয়েব অ্যাপ প্রসেস করে:

  1. ক্রলিং
  2. রেন্ডারিং
  3. ইন্ডেক্সিং

Googlebot কোনও একটি পৃষ্ঠা ক্রল, রেন্ডার এবং ইন্ডেক্স করে।

Googlebot ক্রলের জন্য অপেক্ষার সারি থেকে কোনও
       একটি ইউআরএল বেছে নিয়ে সেটিকে ক্রল করে এবং তারপরে প্রসেসিংয়ের জন্য পরের ধাপে পাঠিয়ে দেয়। প্রসেসিংয়ের ধাপে, যে আলাদা করা লিঙ্কগুলি
       আবার ক্রলের জন্য অপেক্ষার সারিতে ফিরে যায় এবং রেন্ডার করার জন্য পৃষ্ঠাকে অপেক্ষার সারিতে রাখা হয়। পৃষ্ঠা রেন্ডার করার জন্য অপেক্ষার সারি
       থেকে রেন্ডারারের কাছে চলে যায় যা রেন্ডার হওয়া HTML-কে আবার প্রসেসিংয়ে পাঠিয়ে দেয়। প্রসেসিংয়ের পরে কন্টেন্ট ইন্ডেক্স হয়
       এবং লিঙ্ক বেছে নিয়ে ক্রলের জন্য অপেক্ষার সারিতে পাঠিয়ে দেওয়া হয়।

HTTP অনুরোধ করে Googlebot যখন ক্রলিংয়ের জন্য অপেক্ষার সারিতে থাকা ইউআরএল নিয়ে আসে, তখন সেটি দেখে নেয় যে আপনি ক্রলিংয়ের অনুমতি দিয়েছেন কিনা। Googlebot robots.txt ফাইল পড়ে নেয়। ইউআরএলটির জন্য অনুমতি না দেওয়া থাকলে, Googlebot এই ইউআরএলের জন্য কোনও HTTP অনুরোধ করে না এবং সেটিকে এড়িয়ে যায়।

এরপরে, Googlebot HTML লিঙ্কের href অ্যাট্রিবিউটের হিসেবে অন্য ইউআরএলের প্রতিক্রিয়া পার্স করে এবং ক্রল করার জন্য অপেক্ষার তালিকাতে ইউআরএলগুলি যোগ করে। লিঙ্কটি শনাক্ত করা আটকাতে, nofollow mechanism ব্যবহার করা হয়।

ক্লাসিক ওয়েবসাইট অথবা সার্ভার-সাইড রেন্ডার করা হচ্ছে এমন পৃষ্ঠা যেখানে HTTP প্রতিক্রিয়ায় থাকা HTML-এ সব কন্টেন্ট থাকে, সেই ক্ষেত্রে কোনও একটি ইউআরএল ক্রল এবং HTML প্রতিক্রিয়া পার্স করার কাজটি ভাল হয়। কিছু জাভাস্ক্রিপ্ট সাইটে অ্যাপ শেল মডেল ব্যবহার করা হতে পারে। অ্যাপ শেল মডেল যাতে প্রাথমিক HTML-এ আসল কন্টেন্ট থাকে না এবং জাভাস্ক্রিপ্টের তৈরি করা আসল পৃষ্ঠার কন্টেন্ট দেখতে Googlebot-এর জাভাস্ক্রিপ্ট ব্যবহার করার প্রয়োজন হয়।

যদি না রোবট মেটা ট্যাগ বা হেডারGooglebot-কে পৃষ্ঠা ইন্ডেক্স করতে নিষেধ করে, Googlebot রেন্ডার করার জন্য সব পৃষ্ঠা অপেক্ষার সারিতে রাখে। পৃষ্ঠা এই অপেক্ষার সারিতে কয়েক সেকেন্ড থাকার কথা, কিন্তু তার থেকেও আরও বেশি সময় লাগতে পারে। Googlebot-এর রিসোর্স একবার অনুমতি দিলেই, কোনও একটি হেডলেস Chromium পৃষ্ঠা রেন্ডার এবং জাভাস্ক্রিপ্ট ব্যবহার করবে। Googlebot লিঙ্কের জন্য রেন্ডার করা হচ্ছে এমন HTML আবার পার্স করে এবং ক্রলিংয়ের জন্য যে ইউআরএল পায় তা অপেক্ষার সারিতে রাখে। পৃষ্ঠা ইন্ডেক্স করতেও Googlebot রেন্ডার করা হচ্ছে এমন HTML ব্যবহার করে।

মনে রাখবেন যে সার্ভার-সাইড বা প্রি-রেন্ডারিং এখনও একটি দারুণ পদ্ধতি কারণ এটি আপনার ওয়েবসাইটকে ব্যবহারকারী এবং ক্রলারের জন্য আরও দ্রুত ব্যবহারযোগ্য করে এবং সব বট জাভাস্ক্রিপ্ট রান করতে পারে না।

অনন্য শীর্ষক এবং স্নিপেট ব্যবহার করে পৃষ্ঠার বিবরণ দেওয়া

ব্যবহারকারীরা যে কন্টেন্ট খুঁজছে তার সেরা ফলাফল দ্রুত শনাক্ত করতে, তাদের অনন্য, বিবরণযুক্ত শীর্ষক এবং সহায়তাকারী মেটা বিবরণ সাহায্য করে এবং আমাদের নির্দেশিকায় ভাল শীর্ষক এবং বিবরণ কীভাবে লেখা হয় তার বিবরণ দেওয়া হয়েছে।

মেটা বিবরণ সহ শীর্ষক সেট বা পরিবর্তন করতে আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।

মানানসই কোড লেখার পদ্ধতি

ব্রাউজার এমন অনেক কোডে লেখা এপিআই এবং জাভাস্ক্রিপ্ট অফার করে যা খুব তাড়াতাড়ি বদলে যায়। এপিআই এবং জাভাস্ক্রিপ্টের ফিচার এমন কিছু কোড ব্যবহার করে যা Googlebot পরীক্ষা করতে পারে না। Googlebot আপনার লেখা কোড পরীক্ষা করতে পারবে কিনা তা ভাল করে দেখে নিতে আমাদের জাভাস্ক্রিপ্ট সংক্রান্ত সমস্যার সমাধান করার জন্য নির্দেশিকা দেখুন।

প্রয়োজনীয় HTTP স্ট্যাটাস কোড ব্যবহার

পৃষ্ঠা ক্রল করার সময়ে কোনও সমস্যা হলে কী হয়েছে তা জানতে Googlebot HTTP স্ট্যাটাস কোড ব্যবহার করে।

কোনও পৃষ্ঠা ক্রল বা ইনডেক্স করা দরকার না হলে, সেই বিষয়ে Googlebot-কে জানাতে আপনাকে অর্থবোধক স্ট্যাটাস কোড ব্যবহার করতে হবে, যেমন, খুঁজে না পাওয়া কোনও পৃষ্ঠার জন্য একটি 404 কোড বা লগ-ইন সংক্রান্ত পৃষ্ঠার জন্য একটি 401 কোড। নতুন ইউআরএলে কোনও পৃষ্ঠা সরানো হলে, Googlebot-কে জানাতে HTTP স্ট্যাটাস কোড ব্যবহার করতে পারেন, যাতে সেই হিসেবে ইনডেক্স আপডেট করা যায়।

এখানে HTTP স্ট্যাটাস কোডের তালিকা এবং কখন তা ব্যবহার করতে হবে তার উল্লেখ করা হল:

HTTP স্ট্যাটাস কখন ব্যবহার করবেন
301 / 302 কোনও একটি নতুন ইউআরএলে পৃষ্ঠা সরানো হলে।
401 / 403 অনুমতি সংক্রান্ত সমস্যা থাকায় পৃষ্ঠা দেখা যাচ্ছে না।
404 / 410 পৃষ্ঠা আর দেখা যাবে না।
5xx সার্ভার সাইড প্রক্রিয়াতে কোনও সমস্যা আছে।

সিঙ্গেল-পেজ অ্যাপে সফ্ট ৪০৪ সমস্যা এড়িয়ে চলুন

ক্লায়েন্ট-সাইড রেন্ডার করা সিঙ্গেল-পেজ অ্যাপে, রাউটিং প্রায়শই ক্লায়েন্ট-সাইড রাউটিং হিসেবে প্রয়োগ করা হয়। এই ক্ষেত্রে, অর্থপূর্ণ HTTP স্ট্যাটাস কোডগুলি ব্যবহার করা অসম্ভব বা অবৈধ হতে পারে। ক্লায়েন্ট-সাইড রেন্ডারিং এবং রাউটিং ব্যবহার করার সময় সফ্ট ৪০৪ সমস্যা এড়াতে, নিম্নলিখিত কৌশলগুলির মধ্যে একটি ব্যবহার করুন:

  • একটি জাভাস্ক্রিপ্ট রিডাইরেক্টটি এমন URL-এ ব্যবহার করুন যেখানে সার্ভার ৪০৪ HTTP স্ট্যাটাস কোড সহ প্রতিক্রিয়া জানায় (উদাহরণস্বরূপ /not-found)।
  • জাভাস্ক্রিপ্ট ব্যবহার করে সমস্যাযুক্ত পৃষ্ঠাতে <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);
  }
})

ফ্র্যাগমেন্টের পরিবর্তে History API ব্যবহার করুন

Googlebot যখন আপনার পৃষ্ঠাতে লিঙ্ক সার্চ করে, তখন এটি শুধুমাত্র HTML লিঙ্ক অ্যাট্রিবিউটের ইউআরএলগুলিhref বিবেচনা করে

ক্লায়েন্ট-সাইড রাউটিং সহ সিঙ্গেল-পেজ অ্যাপ্লিকেশনের জন্য আপনার ওয়েবের বিভিন্ন ভিউয়ের মধ্যে রাউটিং ইমপ্লিমেন্ট করতে History API ব্যবহার করুন। 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-এ History API প্রয়োগ করে অ্যাক্সেসযোগ্য:

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

সতর্কভাবে মেটা রোবট ট্যাগের ব্যবহার

Googlebot-কে কোনও একটি পৃষ্ঠা ইন্ডেক্স করা থেকে আটকাতে বা মেটা রোবট ট্যাগের মাধ্যমে নিচে উল্লেখ করা লিঙ্ক আপনি বন্ধ করতে পারেন। যেমন, পৃষ্ঠার হেডারে নিচে উল্লেখ করা মেটা ট্যাগ যোগ করলে Googlebot পৃষ্ঠাটি ইন্ডেক্স করতে পারে না:

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

কোনও পৃষ্ঠায় মেটা robots ট্যাগ যোগ করতে বা সেটির কন্টেন্টে পরিবর্তন করতে আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। কোনও এপিআই কলে কন্টেন্ট পাওয়া না গেলে বর্তমান পৃষ্ঠার ইন্ডেক্সিং বন্ধ করতে জাভাস্ক্রিপ্টের সাহায্যে কীভাবে মেটা 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
    // ...
  });
    

জাভাস্ক্রিপ্ট রান করার আগে Googlebot যদি robots মেটা ট্যাগে noindex খুঁজে পায় তাহলে সেটি আর পৃষ্ঠা রেন্ডার বা ইন্ডেক্স করে না।

দীর্ঘস্থায়ী ক্যাশিং ব্যবহার করা

নেটওয়ার্কের অনুরোধ এবং রিসোর্স ব্যবহার কমানোর জন্য Googlebot যথেচ্ছভাবে ক্যাশে করতে থাকে। WRS হয়ত ক্যাশিং হেডার এড়িয়ে যেতে পারে। এর ফলস্বরূপ WRS পুরনো জাভাস্ক্রিপ্ট বা CSS রিসোর্স ব্যবহার করতে পারে। কন্টেন্ট ফিঙ্গারপ্রিন্টিং, main.2bb85551.js-এর মতো ফাইলের নামের কন্টেন্ট অংশের আঙ্গুলের ছাপ তৈরি করে এই সমস্যাটি এড়ায়। আঙ্গুলের ছাপটি ফাইলের কন্টেন্টের উপর নির্ভর করে, কাজেই আপডেটগুলি প্রতিবার বিভিন্ন ফাইলের নাম তৈরি করে। আরও জানতে দীর্ঘস্থায়ী ক্যাশিংয়ের কৌশল সংক্রান্ত web.dev নির্দেশিকা দেখুন।

স্ট্রাকচার্ড ডেটা ব্যবহার করা

আপনার পৃষ্ঠায় স্ট্রাকচার্ড ডেটা ব্যবহার করার সময়, আপনি প্রয়োজনীয় JSON-LD তৈরি করতে এবং সেটিকে পৃষ্ঠায় ইঞ্জেক্ট করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। সমস্যা এড়ানোর জন্য ঠিকভাবে প্রয়োগ করা হচ্ছে কিনা পরীক্ষা করে দেখুন।

ওয়েব কম্পোনেন্টের জন্য পেশাদার পদ্ধতি অনুসরণ করুন

Googlebot ওয়েব কম্পোনেন্টকে সহায়তা করে। যখন Googlebot একটি পৃষ্ঠাকে রেন্ডার করে, এটি কন্টেন্টের ছায়া DOM এবং লাইট DOM-কে হাল্কা করে দেয়। এর অর্থ হল Googlebot শুধুমাত্র সেইসব কন্টেন্টই দেখতে পায় যা রেন্ডার করা HTML-এ দেখতে পাওয়া যায়। Googlebot যাতে রেন্ডার করার পরেও আপনার কন্টেন্ট দেখতে পায়, সেটি ভাল করে দেখে নিতে মোবাইল-ফ্রেন্ডলি হওয়ার পরীক্ষা বা ইউআরএল খতিয়ে দেখার টুল ব্যবহার করুন এবং রেন্ডার করা HTML দেখুন।

রেন্ডার করা HTML-এ কন্টেন্ট যদি দেখা না যায়, Googlebot তাকে ইনডেক্স করতে পারবে না।

নিচে দেওয়া উদাহরণটি ওয়েব কম্পোনেন্ট তৈরি করে যা এটির ছায়া DOM-এর মধ্যে লাইট DOM কন্টেন্টকে ডিসপ্লে করে। রেন্ডার করা HTML-এ লাইট ও ছায়া 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>
    

ছবি ও লেজি-লোড করা কন্টেন্ট সংক্রান্ত সমস্যার সমাধান করা

ব্যান্ডউইথ এবং পারফর্ম্যান্স অনুযায়ী ছবিগুলি যথেষ্ট মূল্যবান হতে পারে। লেজি-লোডিং ব্যবহার করার একটি উত্তম উপায় হল ছবিগুলি শুধুমাত্র তখনই লোড করা যখন ব্যবহারকারীরা সেগুলি দেখতে যাবেন। কোনও সার্চের পক্ষে উপযুক্ত পদ্ধতিতে আপনি লেজি-লোডিং ব্যবহার করছেন কিনা তা ভাল করে দেখে নিতে, আমাদের লেজি-লোডিং সংক্রান্ত নির্দেশিকা পড়ে দেখুন।