SEO for Single Page Applications in Bangla

Introduction to Single Page Applications (SPA)

Single-Page Applications (SPA) হল একটি web Applications যা আপনার প্রয়োজন অনুসারে তথ্য render করে। client বা visitor যখন কোন তথ্য পাওয়ার জন্য কোথাও click করে তখন আপনার application টি শুধু ওই তথ্য দেখানোর জন্য যতটুকু তথ্য render করার দরকার ততটুকুই শুধু re-render করবে বাকি অংশ যেমন আছে তেমনই থাকবে অর্থাৎ web Application এর যতটুকু অংশ render করার প্রযোজন সেই অংশটুকুই শুধু re-render হয়। উদাহরণস্বরূপঃ আপনি যখন নিজের email ব্রাউজ করেন তখন আপনি লক্ষ্য করবেন যে navigation এর সময় খুব বেশি পরিবর্তন হয় না এছাড়া যখন আপনি আপনার inbox এর email টি open করেন তখন sidebar এবং header এর কোন পরিবর্তন হয় না। SPA কেবল প্রতিটি click এর সাথে আপনার যা প্রয়োজন সেই তথ্য প্রেরণ করে এবং আপনার ব্রাউজার সেই তথ্যটি শুধু render করে। এজন্যই SPA আগেকার traditional ওয়েবসাইট থেকে আলাদা, traditional ওয়েবসাইটিতে যখন আপনি কোন তথ্যের জন্য click করেন তখন server আপনার করা click এর জন্য full page টি re-render করে এবং ব্রাউজারে send করে।

এই piece by piece method এর জন্য client-side এ তথ্য দ্রুত load হয়, এছাড়া server থেকে যতটুকু তথ্য প্রয়োজন তার থেকে বেশি তথ্য send করতে হয় না। যার ফলে server খরচ অনেক কমে যায় । এজন্য SPA একটি win-win method.

What Is SEO?

SEO এর পূর্ণরূপ হল search engine optimization সহজে search engine friendly করে ওয়েবসাইট optimize করা। এটি এমন একটি কৌশল যা ব্যবহার করে আমারা search engine কে আমাদের website চিনতে সাহায্য করি। অন্য ভাবে বলতে গেলে SEO হল এমন একটি কৌশল যা ব্যবহার করে আমরা আমাদের website কে search engine এর search result এর প্রথম দিকে show করাতে পারি। SEO এর মাধ্যমে আমরা search engine ব্যবহার করে আমাদের website টি আমাদের targeted audience/customer দের কাছে পৌছে দিতে পারি, যারা আমাদের brand, product, বা service এর সাথে related কোনো বিষয়ের উপরে search engine এ search করছে।

আমরা বলতে পারি না যে আমরা আজ যা যা শিখবো শুধু এই কৌশল ব্যবহার করেই আমরা search engine result এ প্রথমে rank করবো। সবাই SEO নিয়ে কাজ করে নিজের website এর জন্য কিন্তু যেই website থেকে visitor রা বেশি উপকার পাবে বা তথ্য পাবে অথবা ভাল বলবে সেই websiteই আগে rank করবে।

আমরা SEO’র মাধ্যমে শুধু আমাদের website টি কে search engine friendly করতে পারি। যার ফলে আমাদের সব কিছু search engine এর জানা থাকে।

Single Page Applications and SEO

আমরা সবাই জানি যে আমরা আগে যে ওয়েবসাইট দেখতাম অর্থাৎ আমরা যেই সব traditional ওয়েবসাইট দেখি তার থেকে Single Page Application (SPA) অনেক আলাদা। ইন্টারনেটের শুরুর দিকে প্রথম, একটি ওয়েবসাইট কেবলমাত্র একটি HTML ফাইল ছিল যা একটি কলেজ, বিশ্ববিদ্যালয়, সরকারী সংস্থা বা ব্যবসায়ের কম্পিউটার থেকে served করা হত। আগে ইন্টারনেটের মাধ্যমে ওই ওয়েবসাইট গুলো খুজে বের করা সহজ ছিল কারণ ওয়েবসাইটের সকল content সরাসরি HTML ফাইলে embedded করা থাকতো যেমন আমরা এখন কোন word processor থেকে কোন document পড়ার মত। এই ওয়েবসাইট গুলো, আমাদের পড়া যে কোন document এর মত স্পষ্ট ছিল কারণ এই ওয়েবসাইট গুলো DOM ব্যবহার করতো আমাদের কে content দেখানোর জন্য।

উদাহরণ স্বরূপঃ <h1> থেকে <h6> পর্যন্ত ট্যাগ ব্যহহার হয় কোন content এর শিরোনাম (Title or sub-title) লিখার জন্য এছাড়া <p> ট্যাগ ব্যবহার হয় প্যারা আকারে content লিখার জন্য, একাধিক <p> ( paragraph tag ) ব্যবহার করার জন্য <section> ট্যাগ ব্যবহার করা হয় এবং <table> ট্যাগ ব্যবহার করা হয় টেবিল আকারে তথ্য দেখানো জন্য। HTML সম্পর্কে আর জানতে চাইলে MDN Web Docs থেকে Introduction to HTML বা বাংলাতে HTML শিখতে চাইলে HTML5 Bangla Tutorials এই youtube Playlist টি দেখতে পারেন। DOM সম্পর্কে বিস্তারিত জানার জন্য এবং DOM সাথে কিভাবে interact করা যায় JavaScript ব্যবহার করে তা জানার জন্য MDN এর Introduction to the DOM এছাড়া বাংলায় DOM শেখার জন্য youtube থেকে DOM: Client Side Javascript এই Playlist টি দেখতে পারেন।

Client এর কাছে content Show হওয়ার আগে কোনো page এ content লোড করার উপায় হিসাবে server-side rendering পরে যুক্ত করা হয়েছে। server-side rendering মূলত আমাদের কে আমাদের প্রয়োজন অনুসারে blogs, news sites এবং business application তৈরি করতে সাহায্য করে। application এর জটিলতা বেড়ে যাওয়ার জন্য আমাদের এমন ভাবে HTML ব্যবহার করতে হচ্ছে যাতে বেশি document না থাকে। search engine যাতে সহজেই এই sites এবং applications থেকে content খুঁজে পায় এজন্য আমাদের SEO (Search Engine Optimization) এর প্রয়োজন হয়।

দিন দিন javascript এর frameworks গুলোর ব্যবহার বৃদ্ধি পাচ্ছে এর ফলে ওয়েবসাইট গুলো নাটকীয় ভাবে পরিবর্তন হচ্ছে। infinite scrolling Feature এর জন্য asynchronously ডেটা load হওয়ার আগে ajax বা অন্য XHR libraries এর সাহায্যে HTML ফাইল গুলো load হচ্ছে এবং DOM elements গুলো সরাসরি client-side এ render হচ্ছে, এজন্য search engine সহজে ওয়েবসাইট crawl করতে পারে না। SPA গুলি সার্ভারে নতুন কোন request না দিয়ে এবং URL পরিবর্তন না করেও সম্পন্ন Page আপডেট করতে পারে।

এখন SPA খুবই পরিচিত। search Engine এখন SPA গুলো চিনেছে এবং Search Engine জানে কিভাবে SPA এর সাথে কাজ করতে হবে। SPA গুলো কে load এবং crawl করার জন্য Search Engine তাদের search function গুলোকে পুনরায় আপডেট করেছে। উদাহরণঃ Google তৈরি করেছে angular.js এবং microsoft angular.js ব্যবহার করছে এছাড়া Facebook ও একই কাজ করেছে কারণ তারা react.js তৈরি করেছে। যদিও Search engine তাদের search function গুলি আপডেট করেছে তার মানে এই না যে আমরা একটা SPA তৈরি করবো এবং সাথে সাথে search engine তার search result এ আপনার ওয়েবসাইট দেখাবে। search result এ আপনার SPA দেখানোর জন্যও আপনার SEO এর Basic জানা লাগবে । এই আর্টিকেলে আমরা SPA এর জন্য SEO Basic এর কোন কোন বিষয় জানা প্রয়োজন সেই সম্পর্কে জানবো।

The Challenge of Single Page Application SEO

বিগত কয়েক বছর ধরে, SPA এবং SPA framework গুলি প্রচুর জনপ্রিয়তা অর্জন করেছে, তবে SPA-SEO একটি চ্যালেঞ্জ। সবাই এখন SPA এর দিকে যাচ্ছে কারণ user এবং web developer দের জন্য SPA অনেক সমস্যার সমাধান দিচ্ছে খুব সহজে। SPA অনেক fast, user-friendly এবং মজার বিষয় হচ্ছে এটা restful APIs support করে। এছাড়া SPA ব্যবহার করে server এবং client কম্পিউটারের মধ্যে processing workload কে খুব সুন্দর ভাবে distribute করা যায়। এছাড়া SPA থেকে খুব সহজে Mobile Application তৈরি করা সম্ভব।

SPA তে browser যখন প্রথম বার server এ request দেয় তখন server থেকে browser এ index.html ফাইল আসে। এই HTML ফাইল শুধু একবারই আসে কারণ এই HTML ফাইলে js ফাইলের জন্য একটা script tag থাকে যেই js ফাইল পরে index.html এর উপর সম্পন্ন control নিয়ে নেই। এরপর থেকে browser থেকে server এ যত request ই যাক না কেন প্রতিবারই JSON ডাটা আসে এবং application এর JSON ডাটা ব্যবহার করে page কে dynamic ভাবে update করে যার ফলে page কে reload করার প্রয়োজন হয় না।

client ই server থেকে আসা ডাটাকে HTML এ রুপান্তর এর কাজ করে যখন application টি শুরু হয়।মূলত, বেশিরভাগ modern SPA frameworks গুলি browser এ templating-engine run করে HTML তৈরির জন্য।

traditional web application এ client-side থেকে যখন server-side এ request দেই তখন server-side সম্পন্ন HTML ফাইল render করে এবং এই render ফাইল client-side এ send করে। তখন client-side সম্পন্ন page কে re-load করে। এ ক্ষেত্রে client-side বলতে browse কে বোঝানো হয়েছে।

কিন্তু আমরা traditional ওয়েবসাইটের মত করে SPA এর জন্য SEO এর plan করতে পারবো না, SPA এর জন্য আমাদের different SEO plan করতে হয়, আর এই plan করাটাই হল সব থেকে বড় challenge।

What is Googlebot & How it Sees Single Page Websites

গুগল কোন website থেকে তথ্য সংগ্রহের জন্য যে unique crawl tool ব্যবহার করে তাকেই googlebot বলে। googlebot এর সাহায্যে গুগল কোন website থেকে তথ্য সংগ্রহ করে এবং এই তথ্য গুলোকে নিজের ডেটাবেজে জমা করে। এই ডেটা ব্যবহার করে গুগল তার search Engine এর জন্য searchable index তৈরি করে এবং এই searchable index এর সাহায্যে গুগল search engine ranking করে। আর এজন্য googlebot কে সকল SEO expert রা এত সমাদর করে।

সাধারণত googlebot ওয়েবসাইট এর HTML/CSS ফাইল থেকে ডেটা সংগ্রহ করে এবং সেই ডেটা কে google এ index করে। কিন্তু এখন single-page application এর ক্ষেতে এটা করা একটু কঠিন হয়েছে কারণ single page application এর frontend এ javascript framework ব্যবহার করা হচ্ছে।

এই সমস্যা সমাধানের জন্য গুগল তার bot কে আপডেট করেছে, এখন googlebot এই javascript framework থেকে তথ্য সংগ্রহের জন্য এই সব সাইটে প্রথমে ৫ থেকে ২০ সেকেন্ড javascript ব্যবহার মাধ্যমে Ajax call করে তারপর এই সাইট গুলো থেকে তথ্য সংগ্রহ করে। এই advanced technique ব্যবহার করে googlebot এখন single page applications কে সম্পূর্ণভাবে crawl করে এবং SERP এর জন্য তথ্য index করে এবং SEO এর জন্য কার্যকর করে তোলে।

Best Practices for SPA SEO

ভাগ্যক্রমে, SEO Expert দের জন্য SPA এর SEO করার সব রাস্তা বন্ধ হয়নি। এখনও কিছু technique আছে যা ব্যবহার করে developer দের সাহায্যে single page application গুলোকে search engine friendly করা সম্ভব।

চলুন, একসাথে এর কৌশলগুলি জেনে আসি:

Read Full Article | Originally published at LimkedIN on August 22, 2020.