ডায়নামিক রেন্ডারিং প্রয়োগ করা

বর্তমানে, জাভাস্ক্রিপ্ট প্রসেস করা কঠিন এবং সব সার্চ ইঞ্জিন ক্রলার এটিকে সঠিকভাবে বা সঙ্গে সঙ্গে প্রসেস করতে পারে না। ভবিষ্যতে এই সমস্যার সমাধান হয়ে যাবে বলে আশা করা যায়। কিন্তু যতক্ষণ পর্যন্ত তা না হচ্ছে, ততক্ষণ এই সমস্যা এড়াতে ডায়নামিক রেন্ডারিং ব্যবহার করা ভাল। নির্দিষ্ট ইউজার-এজেন্টের জন্য ক্লায়েন্ট-সাইডে রেন্ডার করা ও প্রি-রেন্ডার করা কন্টেন্টের মধ্যে বদল করাকে বলে ডায়নামিক রেন্ডারিং।

যেসব সাইটের ডায়নামিক রেন্ডারিং ব্যবহার করা উচিত

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

ডায়নামিক রেন্ডারিং কীভাবে কাজ করে তা বোঝা

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

ডায়নামিক রেন্ডারিং কীভাবে কাজ করে তা বোঝানোর জন্য একটি রেখাচিত্র। রেখাচিত্রে দেখা যাচ্ছে যে সার্ভার ব্রাউজারে
              প্রাথমিক HTML ও জাভাস্ক্রিপ্ট কন্টেন্ট সরাসরি পাঠাচ্ছে। অপরপক্ষে, রেখাচিত্র দেখাচ্ছে যে সার্ভার
              রেন্ডারারে প্রাথমিক HTML ও জাভাস্ক্রিপ্ট কন্টেন্ট সরাসরি পাঠাচ্ছে। যা প্রাথমিক HTML
              ও জাভাস্ক্রিপ্টকে স্ট্যাটিক HTML রূপান্তরিত করবে। একবার কন্টেন্ট রূপান্তর হয়ে গেলে, রেন্ডারার
             স্ট্যাটিক HTML ক্রলারকে প্রদান করে।

ডায়নামিক রেন্ডারিং কিন্তু ক্লোকিং নয়

সাধারণত Googlebot ডায়নামিক রেন্ডারিংকে ক্লোকিং বলে মনে করে না। ডায়নামিক রেন্ডারিংয়ের মাধ্যমে আপনি একইরকম কন্টেন্ট প্রদান করলে Googlebot এটিকে ক্লোকিং বলে বিবেচনা করবে না।

ডায়নামিক রেন্ডারিং সেট-আপ করার সময়, আপনার সাইটে সমস্যার পৃষ্ঠা তৈরি হতে পারে। Googlebot এই সমস্যার পৃষ্ঠাগুলিকে ক্লোকিং বলে মনে করে না এবং এগুলিকে অন্যান্য সমস্যার পৃষ্ঠার মতোই বিবেচনা করে থাকে

ডায়নামিক রেন্ডারিংয়ের মাধ্যমে ব্যবহারকারী ও ক্রলারকে সম্পূর্ণ আলাদা কন্টেন্ট পরিবেশন করলে কিন্তু সেটি ক্লোকিং বলে ধরে নেওয়া হতে পারে। যেমন কোনও ওয়েবসাইটের বিড়াল সম্পর্কিত যে পৃষ্ঠা ব্যবহারকারীকে দেখানো হচ্ছে সেটিরই কুকুর সম্পর্কিত ভার্সন ক্রলারকে পরিবেশন করা হলে তা ক্লোকিং হিসেবে বিবেচিত হবে।

ডায়নামিক রেন্ডারিং প্রয়োগ করা

আপনার কন্টেন্টের জন্য ডায়নামিক রেন্ডারিং সেট-আপ করতে, আমাদের সাধারণ নির্দেশিকা অনুসরণ করুন। বিভিন্ন প্রয়োগের ক্ষেত্রে আলাদা হয় বলে আপনাকে আপনার বিশেষ কনফিগারেশনের বিবরণ দেখে নিতে হবে।

সাহায্য পেতে আমাদের নতুন
  1. আপনার কন্টেন্টকে ক্রলারের বোঝার পক্ষে উপযোগী স্ট্যাটিক HTML-এ পরিবর্তন করে দেয়, এমন ডায়নামিক রেন্ডারার ইনস্টল করে কনফিগার করুন। সাধারণ কিছু ডায়নামিক রেন্ডারারের মধ্যে Puppeteer, Rendertronprerender.io পড়ে।
  2. আপনার স্ট্যাটিক HTML যে ইউজার-এজেন্টগুলিকে পাঠানো হবে বলে মনে হয় সেগুলি বেছে নিন এবং কীভাবে ইউজার-এজেন্ট আপডেট অথবা যোগ করবেন সেই সম্পর্কে জানতে নির্দিষ্ট কনফিগারেশনের বিবরণ পড়ুন। Rendertron মিডলওয়্যারে উপস্থিত প্রচলিত ইউজার-এজেন্টের তালিকার উদাহরণ এখানে দেওয়া হল:
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. প্রি-রেন্ডারিং আপনার সার্ভারের গতিকে ধীর করে দিলে অথবা প্রি-রেন্ডারিংয়ের জন্য অনেক বেশি অনুরোধ দেখতে পেলে, প্রি-রেন্ডার করা কন্টেন্টের জন্য একটি ক্যাশে ব্যবহার করার কথা ভেবে দেখুন অথবা সঠিক ক্রলার অনুরোধ করছে কিনা তা যাচাই করে দেখুন
  4. ইউজার এজেন্টের মোবাইল না ডেস্কটপ কন্টেন্ট কোনটি লাগবে তা নির্ধারণ করুন। উপযুক্ত ডেস্কটপ বা মোবাইল ভার্সন প্রদান করতে, ডায়নামিক সার্ভিং ব্যবহার করুন। ইউজার এজেন্টের ডেস্কটপ না মোবাইল কন্টেন্ট কোনটি লাগবে তা এখানে দেওয়া উদাহরণে দেওয়া কনফিগারেশনের মাধ্যমে নির্ধারণ করা যেতে পারে:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. আপনার বেছে নেওয়া ক্রলারে স্ট্যাটিক HTML পৌঁছে দেওয়ার জন্য সার্ভার কনফিগার করুন। আপনার প্রযুক্তির উপর নির্ভর করে এই কাজটি করার বিভিন্ন উপায় আছে। এখানে তার কিছু উদাহরণ দেওয়া হল:
    • ডায়নামিক রেন্ডারারের কাছে ক্রলারের পাঠানো প্রক্সি অনুরোধ।
    • প্রয়োগ প্রক্রিয়ার অংশ হিসেবে প্রি-রেন্ডার করুন এবং আপনার সার্ভার যাতে ক্রলারকে স্ট্যাটিক HTML প্রদান করতে পারে, সেই ব্যবস্থা করুন।
    • আপনার কাস্টম সার্ভার কোডে ডায়নামিক রেন্ডারিংয়ের ব্যবস্থা করুন।
    • প্রি-রেন্ডারিং পরিষেবা থেকে ক্রলারে স্ট্যাটিক কন্টেন্ট সার্ভ করুন।
    • আপনার সার্ভারের জন্য কোনও মিডলওয়্যার ব্যবহার করুন (যেমন, Rendertron মিডলওয়্যার)।

কনফিগারেশন যাচাই করা

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

  1. Google আপনার কন্টেন্ট দেখতে পাচ্ছে কিনা তা ভাল করে দেখে নিতে আপনার মোবাইল কন্টেন্ট মোবাইল-ফ্রেন্ডলি হওয়ার পরীক্ষার মাধ্যমে পরীক্ষা করুন।

    done সফল হয়েছে: ব্যবহারকারীকে আপনি যেমনভাবে দেখাতে চান আপনার মোবাইল কন্টেন্ট তেমনভাবেই দেখানো হচ্ছে।

    error আবার চেষ্টা করুন: আপনার কন্টেন্ট প্রয়োজন অনুসারে না দেখানো হলে সমস্যার সমাধান সংক্রান্ত বিভাগটি দেখুন

  2. রেন্ডার করা পৃষ্ঠায় (Googlebot যেভাবে পৃষ্ঠাটি দেখে তাকে রেন্ডার করা পৃষ্ঠা বলে) ডেস্কটপ কন্টেন্ট সঠিকভাবে দেখা যাচ্ছে কিনা তা জানতে ইউআরএল খতিয়ে দেখার টুল দিয়ে আপনার ডেস্কটপ কন্টেন্ট পরীক্ষা করে দেখুন।

    done সফল হয়েছে: ব্যবহারকারীকে আপনি যেমনভাবে দেখাতে চান আপনার ডেস্কটপ কন্টেন্ট তেমনভাবেই দেখানো হচ্ছে।

    error আবার চেষ্টা করুন: আপনার কন্টেন্ট প্রয়োজন অনুসারে না দেখানো হলে সমস্যার সমাধান সংক্রান্ত বিভাগটি দেখুন

  3. আপনি স্ট্রাকচার্ড ডেটা ব্যবহার করলে সেটি ঠিকমত রেন্ডার হচ্ছে কিনা জানতে স্ট্রাকচার্ড ডেটা টেস্টিং টুল দিয়ে পরীক্ষা করে দেখুন।

    done সফল হয়েছে: স্ট্রাকচার্ড ডেটা আপনার প্রয়োজন অনুসারে কাজ করছে।

    error আবার চেষ্টা করুন: আপনার স্ট্রাকচার্ড ডেটা প্রয়োজন অনুসারে না দেখানো হলে সমস্যার সমাধান সংক্রান্ত বিভাগটি দেখুন

সমস্যার সমাধান করা

মোবাইল-ফ্রেন্ডলি হওয়ার পরীক্ষায় আপনার কন্টেন্টে কোনও সমস্যা দেখা দিলে বা Google Search-এর ফলাফলে সেটি না দেখানো হলে, নিচের তালিকায় দেওয়া সাধারণ সমস্যার সমাধান করুন। তারপরেও সমস্যা হলে ওয়েবমাস্টার ফোরাম-এ এটি পোস্ট করুন

কন্টেন্ট অসম্পূর্ণ অথবা দেখতে অন্যরকম লাগা

error কী কারণে সমস্যা হয়েছে: আপনার রেন্ডারার হয়ত সঠিকভাবে কনফিগার করা নেই অথবা আপনার ওয়েব অ্যাপ্লিকেশন হয়ত আপনার রেন্ডারিং সংক্রান্ত সমস্যার সমাধানের পক্ষে উপযুক্ত নয়। টাইম-আউটের জন্য কখনও কখনও কন্টেন্ট সঠিকভাবে রেন্ডার হয় না।

done সমস্যার সমাধান করুন: আপনার ডায়নামিক রেন্ডারিং সেট-আপকে ডিবাগ করতে রেন্ডারিং সংক্রান্ত সমস্যার সমাধানের জন্য নির্দিষ্ট ডকুমেন্টটি দেখুন।

প্রতিক্রিয়া পাঠাতে অনেক সময় লাগা

error কী কারণে সমস্যা হয়েছে: হেডলেস ব্রাউজার ব্যবহার করে প্রয়োজন অনুসারে পৃষ্ঠা রেন্ডার করলে প্রায়ই প্রতিক্রিয়া পাঠাতে অনেক সময় লাগে, যার ফলে ক্রলার অনুরোধ বাতিল করে দিতে পারে এবং আপনার কন্টেন্ট ইন্ডেক্স নাও করতে পারে। আপনার কন্টেন্ট ক্রল ও ইন্ডেক্স করার সময় প্রতিক্রিয়া পাঠাতে অনেক সময় লাগলে ক্রলের হার কমে যেতে পারে।

done সমস্যার সমাধান করুন

  1. প্রি-রেন্ডার করা HTML-এর জন্য ক্যাশে সেট-আপ করুন অথবা বানানোর সময় প্রক্রিয়াটির একটি অংশ হিসেবে আপনার কন্টেন্টের একটি স্ট্যাটিক HTML ভার্সন তৈরি করুন।
  2. কনফিগারেশনে (যেমন ক্রলারকে আপনার ক্যাশের দিকে নির্দেশ করা) ক্যাশে চালু করার কথা ভুলবেন না।
  3. ক্রলার আপনার কন্টেন্ট দ্রুত অ্যাক্সেস করতে পারছে কিনা তা মোবাইল-ফ্রেন্ডলি হওয়ার পরীক্ষা বা webpagetest-এর মাধ্যমে দেখুন (Google ক্রলার ইউজার-এজেন্ট-এর তালিকা থেকে কাস্টম ইউজার-এজেন্ট স্ট্রিং ব্যবহার করে)। আপনার কন্টেন্ট লোড করার অনুরোধ যেন টাইম-আউট হয়ে না যায়।

ওয়েব উপাদানগুলি প্রত্যাশা মতো রেন্ডার করে না

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

করা হয়ে গেছে এমন সমস্যার সমাধান করুন

  1. কাস্টম এলিমেন্ট ও ছায়া DOM-এর জন্য webcomponents.js পলিফিল লোড করুন।
  2. আপনার রেন্ডারিংয়ের সমাধানের রেন্ডার করা HTML-এ কন্টেন্ট দেখা যাচ্ছে কিনা তা চেক করে দেখতে মোবাইল-ফ্রেন্ডলি হওয়ার পরীক্ষা অথবা ইউআরএল খতিয়ে দেখার টুল ব্যবহার করে দেখুন।

স্ট্রাকচার্ড ডেটা অনুপস্থিত

error কী কারণে সমস্যা হয়েছে: স্ট্রাকচার্ড ডেটা ইউজার-এজেন্ট না লেখা হলে অথবা আউটপুটে JSON-LD কোডে লেখা স্ক্রিপ্ট ট্যাগ অন্তর্ভুক্ত না করলে স্ট্রাকচার্ড ডেটা সংক্রান্ত সমস্যা হতে পারে।

done সমস্যার সমাধান করুন

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