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

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

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

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 সার্ভার সাইড প্রক্রিয়াতে কোনও সমস্যা আছে।

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

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 ওয়েব কম্পোনেন্টকে সহায়তা করে। যখন 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>
    

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

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