SEO

SEO For Single Page Applications in Bangla

Shayaike Salvy
Shayaike Salvy
Search Engine Optimization For Single Page Applications - Stack Journal

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 website vs Single Page website - Stack Journal

কিন্তু আমরা 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 করা সম্ভব।

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

Creating Social Media Meta Tags

বর্তমান সময়ে social media এর সাথে web application সংযুক্ত করে অনেক গুরুত্তপূর্ণ। কারন এখন single page application SEO অথবা traditional webpage SEO এর জন্য social media এর সাথে web application/website সংযুক্ত করা অনেক গুরুত্তপূর্ণ।

Open Graph এর মতন Protocols ব্যবহার করে social media তে share করা তথ্যগুলিকে optimize এবং structure প্রদান করা হয়। Open Graph মূলত Facebook এর জন্য তৈরি করা হয়েছি কিন্ত এখন Open Graph ব্যবহার করে social media গুলিতে share করা সকল ডেটা তথ্য কে optimize এবং structure প্রদানের জন্য ব্যবহার করা হয়।

Open Graph কোন Website এ integrate করার জন্য আমাদের কিছু বিশেষ <meta> tags ব্যবহার করতে হয়, website এর <head> section এ।

social media তে web site কিভাবে দেখানো হবে তা সম্পূন্ন নির্ভর করে Open Graph এর উপর । যখন কোন web site এর URL প্রথমবারের মতন facebook এ share করা হয় তখন facebook crawler এই URL কে analysis করে তথ্য সংগ্রহ করে একটি graphical object তৈরি করে এরপর facebook এ share করে।

Open Graph জন্য বেশ কয়েকটি প্রয়োজনীয় ট্যাগঃ

– og: title – the name (e. g. of the article);

– og: description – short description of your data content;

– og: type – the data type of page content (the default is “website”);

– og: image – URL address of the picture to represent the page;

– og: url – canonical URL of the page.

website এ যদি facebook crawler কোন Open Graph এর <meta> tag খুঁজে না পায় তাহলে facebook নিজে নিজে website থেকে তথ্য সংগ্রহ করবে এবং নিজের মত করে তথ্য দেখাবে যা আপনার মনের মত নাও হতে পারে।

তাই, আমরা বলতে পারি যে webpage এ Open Graph meta tags যক্ত করার মাধ্যমে আমরা website কে social media এর সাথে link/integrate করতে পারি। আমাদের যদি meta tag নিজে কাজ করার পূর্ব অভিজ্ঞতা থাকে তাহলে আমরা খুব সহজেই Open Graph meta tag গুলি আমাদের সাইটে যক্ত করতে পারি।আপনারা এই link থেকে নিজেদের জন্য Open Graph meta tags তৈরি করে নিতে পারেন।

<!-- Primary Meta Tags -->
<title>Search Engine Optimization For Single Page Applications</title>
<meta name="title" content="Search Engine Optimization For Single Page Applications">
<meta name="description" content="এই article এ Search Engine Optimization For Single Page Application নিয়ে আলোচনা করেছি। এই article থেকে আমরা SPA এর জন্য SEO এর Best Practice সম্পর্কে জানবো।">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://journal.stacklearner.com/search-engine-optimization-for-single-page-applications/">
<meta property="og:title" content="Search Engine Optimization For Single Page Applications">
<meta property="og:description" content="এই article এ Search Engine Optimization For Single Page Application নিয়ে আলোচনা করেছি। এই article থেকে আমরা SPA এর জন্য SEO এর Best Practice সম্পর্কে জানবো।">
<meta property="og:image" content="https://journal.stacklearner.com/content/images/2020/08/Search-Engine-Optimization-For-Single-Page-Applications-1.jpg">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://journal.stacklearner.com/search-engine-optimization-for-single-page-applications/">
<meta property="twitter:title" content="Search Engine Optimization For Single Page Applications">
<meta property="twitter:description" content="এই article এ Search Engine Optimization For Single Page Application নিয়ে আলোচনা করেছি। এই article থেকে আমরা SPA এর জন্য SEO এর Best Practice সম্পর্কে জানবো।">
<meta property="twitter:image" content="https://journal.stacklearner.com/content/images/2020/08/Search-Engine-Optimization-For-Single-Page-Applications-1.jpg">

"rel=canonical" হলে একটি HTML element যা ব্যবহার করে web developer রা website কে content duplication থেকে বিরত রাখতে পারবে। এই element ব্যবহার করে SPA এর SEO এর উন্নতি করা সম্ভব কারণ googlebot গুলো content duplication পছন্দ করে না।

The idea is simple: যদি আমাদের website এ duplicate content থাকে তাহলে এই canonical ব্যবহার করে googlebot কে অবগত করা হয় যে কোন content টি কে search engine এ দেখাতে হবে এবং অন্য সব duplicate content গুলি ignore করে হবে।

প্রত্যেকটি একই content এর URLs এর জন্য canonical URL ব্যবহার করে SEO এর উন্নতি করা সম্ভব। যদি আমরা rel=”canonical” element ব্যবহার করতে চাই তাহলে website এর URLs গুলিকে dynamic ভাবে তৈরি করতে হবে এবং একটা বিষয় লক্ষ্য রাখতে হবে যেন ‘sitemap.xml’ এর URLs এবং canonical URL যেন একই হয়।

Server-Side Rendering

Server-side rendering হল এমন একটি প্রক্রিয়া যা server request এর উপর নির্ভর করে website এর page গুলোকে server এ render করে। এজন্য googlebot খুব সহজে website এর page গুলে crawl করে google এ index করতে পারে।

Server-side rendering এর ক্ষেতে, প্রথমে website টি server এ render এর মাধ্যমে virtual DOM থেকে HTML string তৈরি করে, এই HTML string এর মধ্যে যে javascript ফাইলটি আছে, সেই ফাইলটি execute করে আমারা client side এ যেই page টি দেখতাম তার মতো একটি পেজ তৈরি করে, যার ফলে Search Engine এর crawler গুলো সম্পূর্ণ পেজ এবং পেজের content দেখতে পারে এবং এর থেকে তথ্য সংগ্রহ করে Search Engine এ Index করে ।

এইভাবে, Server-side rendering এর মাধ্যমে single page application গুলিকে crawler-friendly করে।  javascript কাঠামো complex হওয়া সত্ত্বেও  search engine কে যথাযথভাবে index করতে সহায়তা করে।

Pre-Rendering

Pre-Rendering হল এমন একটা প্রক্রিয়া যা ব্যবহার করে সম্পন্ন webpage এর সকল element কে preload করে রাখা হয় যার ফলে search engine crawler সম্পূর্ণ page কে crawl করে search engine এ index করতে পারে। prerender service গুলো server এ আসা সব request কে middleware ব্যবহার করে track করে যদি request টি real user এর কাছ থেকে আসে তাহলে স্বাভাবিক ভাবে data পাঠায় কিন্তু user-agent যদি কোন bot হয় তাহলে prerender middleware তাকে পূর্বে static ভাবে render করা webpage এর cached version পাঠায় যার ফলে search engine bot সেই page এর সকল JavaScript, content এবং Image কে crawl করে search engine এ index করতে পারে।

কিছু Service আছে যা ব্যবহার করে আমরা আমাদের web page এর সকল তথ্য কে static HTML এ রুপান্তর করতে পারি, যার ফলে search engine bot  খুব সহজে website টি read এবং crawl করতে পারে। এই পদ্ধতির সাহায্যে আমরা latest javascript frameworks যেমন react, Ember এবং Angular ব্যবহার করে আমাদের site টি চালিয়ে যেতে পারি এবং যার ফলে আমাদের server side rendering services এর উপর নির্ভর করতে হবে না।

Understand ReactJS Core Features - Absolute Beginner
The fundamental concept of React is very important before dive deep into React. In this chunk, we have only focused on the fundamentals of React. So that you have a nice idea about React and at the end of this course, you can think like React.

Other SEO Optimizations in SPA Site

URL

URLs আবশ্যই SEO friendly হাওয়া দরকার। ভাল ফলাফলের জন্য একটা website এর URL structures এ দুইটি অংশ থাকা প্রয়োজন প্রথম অংশে থাকবে ID URL এবং দ্বিতীয় অংশে থাকবে Slug URL।  Slug URL অবশ্যয় সুস্পষ্টভাবে বলতে হবে, প্রত্যেকটা শব্দ hyphens দ্বারা আলাদা করা হবে এবং URL কখনই complicated করা যাবে না। URL র অবশ্যই সব relevant keyword থাকতে হবে যেই keyword এ আমরা rank করতে চাই এবং URL এর দৈর্ঘ্য limit এর থেকে বড় করা উচিত নয়।

Meta Tags

পেজের মধ্যে সকল গুরুত্বপূর্ণ meta tag গুলো থাকতে হবে যেমনঃ page title, description, canonical tags, hreflang। এই সকল meta tag গুলিকে page এর source code এ সরাসরি যুক্ত করতে হবে যার ফলে server-side rendering ভাল হবে এবং search engine bot ও সহজে এই meta tag গুলো খুঁজে পাবে।

Internal Linking

Internal Linking মানে হল website এর মধ্যে এই একই website এর অন্য content কে link করা। সকল Internal Linking অবশ্যই content এর মধ্যে হতে হবে এবং <a> ট্যাগ ব্যাবহার করে embed করতে হবে যার ফলে search engine bot খুব সহজে ওই পেজ কে crawl করতে পারে।

Frequently Asked Questions

  • Q: Is Single Page Applications (SPA) SEO-friendly?
    • সাধারণত Single Page Applications (SPA) কে non SEO friendly বলা হয় কারণ search engine bot এর জন্য Single Page Application গুলি crawl করা এবং content render করা কঠিন
  • Q: Is Vue.js SEO-friendly?
    • সাধারণত, Vue.js দ্বারা তৈরি website ও SEO friendly হয় না কারণ এর ও কিছু issues থাকে যেমন page load speed, meta, sitemap, hash URL updates এবং আরও অনেক.
  • Q: Is React better than Vue for SEO?
    • React বা Vue কোনটাই SEO friendly na. এছাড়া কিছু নির্দিষ্ট অনুশীলন আছে যা করলে React এবং Vue দ্বারা তৈরি website কে ও SEO friendly করা সম্ভব।

Final Words

Single Page Application(SPA) গুলো অত্যন্ত interactive এবং design এর ক্ষেত্রে অনন্য, তবে SEO তে সামান্য সীমাবদ্ধতা রয়েছে। এই article এ আমরা সেই সব issue নিয়ে আলোচনা করেছি, যেই issue গুলো search engine ranking এর ক্ষেত্রে Single Page Application গুলো সম্মুখীন হয়ে থাকে। এই article এ আমরা SEO এর কিছু advance topic দেখলাম এবং SPA এর জন্য SEO এর best practices সম্পর্কে জানলাম। এরপর ও আরও অনেক কিছু বাকি থাকে, যেই topic গুলি বাকি আসে সেই topic গুলি আমরা নিজে নিজে খুঁজে বের করার try করবো এবং যদি ইচ্ছে হয় তাহলে আমাদের সাথে share করতে পারেন। আমি নিজেও আরও advance topic গুলো নিজে study করবো, তারপর আবার আপনাদের সাথে share করবো। এই article এ যেই যেই topic গুলো লেখা আছে, এই topic গুলির অনেক নতুন নতুন তথ্য আমি এই article লিখতে গিয়ে শিখেছি। আপনারা কি কি নতুন তথ্য জানলেন এই article পড়তে গিয়ে এবং এই article পড়তে গিইয়ে নিজে নিজে কি কি শিখলেন আবশ্যই Comment box এ জানাবেন আর article টি ভাল লাগলে আবশ্যয় Like এবং Share করবেন।

Frontend Development Bootcamp - React [Online & Offline]