বর্তমানে মিলিয়ন মিলিয়ন ইউজার অ্যান্ড্রয়েড, আইওএস এবং উইন্ডোজ চালিত স্মার্টফোন ব্যবহার করে ওয়েবে অ্যাক্সেস করে। সুতরাং, এটি এখন আমাদের জন্য অপরিহার্য হয়ে উঠেছে যে, ওয়েবসাইটগুলিকে এই পরিবর্তনশীল পরিবেশের সাথে খাপ খাইয়ে নেওয়া এবং পাঠকদের কাছে আরও আকর্ষনীয় করে তোলার জন্য ওয়েবসাইট ডিজাইনে উপযুক্ত পরিবর্তন সাধন করা।
কোন সাইটের ডেস্কটপ সংস্করণ মোবাইল ডিভাইসে দেখা এবং ব্যবহার করা বেশ কঠিন হতে পারে। মোবাইল-বান্ধব নয় এমন সংস্করণটির কন্টেন্ট মোবাইল দিয়ে পড়ার সময় ইউজারকে চিমটি কাটতে বা জুম করতে হতে পারে। ইউজাররা এই বিষয়টিকে খুব ভালো ভাবে নেন না এবং কখনো কখনো সাইট ছেড়েই চলে যান। অপরদিকে, ওয়েবের মোবাইল-বান্ধব সংস্করণ পাঠযোগ্য এবং তাৎক্ষনিক ব্যবহারযোগ্য।
সাম্প্রতিক সময়ে গুগলের আপডেট ভার্সনে এটি বাধ্যতামূলক যে, কোন ওয়েবসাইট মোবাইল সার্স ইঞ্জিন থেকে ভালো ফল পেতে হলে সাইটকে অবশ্যই মোবাইল-বান্ধব হতে হবে। মনে রাখবেন, কোন ওয়েবসাইট মোবাইল-বান্ধব না হলে সার্স ইঞ্জিন সমূহেও তার কোন প্রকার প্রভাব পড়বে না।
মোবাইল ডিভাইস থেকে যারা ওয়েবসাইট অ্যাক্সেস করে তাদের জন্য সর্বোচ্চ গুরুত্ব নিশ্চিত করতে এই অধ্যায়ে আমরা আপনাকে দেখাবো কিভাবে একটি ওয়েবসাইটকে মোবাইল-বান্ধব করে তুলা যায়।
মোবাইল এসইও কি?(What is Mobile SEO?)
মোবাইল সার্স ইঞ্জিন অপ্টিমাইজেশন হল ওয়েবসাইট ডিজাইন করার একটি প্রক্রিয়া । এই প্রক্রিয়ায় সাইটটি কম ব্যান্ডউইথধারী বিভিন্ন সাইজের মোবাইল স্ক্রিনেও খুব সহজে দেখা সম্ভব। ডেস্কটপ ওয়েবসাইটের জন্য প্রযোজ্য এসইও বিধি অনুসরণের পাশাপাশি মোবাইল ডিভাইসের জন্যও ওয়েবসাইট ডিজাইনে আমাদের সমানতালে যত্ন নেওয়া উচিৎ।
আমরা একটি ওয়েবসাইটকে মোবাইল বান্ধব বলতে পারি যদি এতে নিম্নলিখিত বৈশিষ্ট্যগুলি থাকে -
1. একটি ভাল মানের মোবাইল ওয়েবসাইটে রেসপন্সিভ ডিজাইন(responsive design) বিদ্যমান থাকে যা ডেস্কটপ এবং মোবাইল উভয় ডিভাইসেই সমানতালে পারফর্ম করে। এটি কেবল ওয়েবসাইটের রক্ষণাবেক্ষণই সহজ করে না, বরং কন্টেন্টকেও সার্স ইঞ্জিনের জন্য সংগতিপূর্ণ করে তোলে।
2. একটি ভাল মোবাইল ওয়েবসাইটের কন্টেন্ট স্ক্রিন জুম না করেও মোবাইল ডিভাইসে সহজেই পড়া যায়। এতে মানানসই ফন্ট, রঙ এবং লেআউট থাকে।
3.একটি ভাল মোবাইল ওয়েবসাইটকে ছোট স্ক্রিনেও সহজেই নেভিগেট করা যায়। এটি বিভিন্ন ধরণের লিংক এবং বাটন সরবরাহ করে, যার ফলে এক আঙুল ব্যবহার করেই সাইটটি চালানো যায়।
4.একটি ভাল মোবাইল ওয়েবসাইট হালকা হয়, ফলে এটি মোবাইল নেটওয়ার্কে লোড হতে ব্যান্ডউইথ এবং সময় কম লাগে।
5. মোবাইল ওয়েবসাইটের হোম পেজ ইউজারকে তার কাংখিত কন্টেন্টের সাথে সংযোগ স্থাপনের জন্য সবচেয়ে গুরুত্বপূর্ণ ভূমিকা পালন করে। সুতরাং, ভাল মোবাইল ওয়েবসাইটের সর্বাধিক গুরুত্বপূর্ণ লিংকসমূহ হোম পেজে থাকে, যেন ইউজাররা সহজেই তাদের কাংখিত কন্টেন্ট খুঁজে পায়।
6. একটি ওয়েবসাইটের র্যাংকিং নির্ভর করে সাইটটি কতটা বন্ধুত্বপূর্ণ !
ভালোমানের মোবাইল-বান্ধব ওয়েবসাইট ডিজাইনের জন্য আপনি নীচে প্রদত্ত গাইডলাইনগুলি অনুসরণ করতে পারেন।
আপনার সাইটি মোবাইলের জন্য অপটিমাইজ করুন(Optimize Your Site for Mobile)
আপনার সাইটটি যদি ইতিমধ্যেই সার্স ইঞ্জিনের জন্য অপটিমাইজ করে থাকেন, তবে মোবাইল ডিভাইসের জন্য অপ্টিমাইজ করতে আপনার খুব বেশি বেগ পেতে হবে না। চলুন, প্রথমেই দেখে নিই মোবাইল অপটিমাইজ করতে কি কি লাগে।
পুরো বিষয়টিকে আমরা তিনটি ভাগে বিভক্ত করতে পারি।
1. ধাপ ১ - মোবাইল কনফিগারেশন নির্বাচন করুন
2. ধাপ ২ - সার্স ইঞ্জিনকে অবহিত করুন
3. ধাপ ৩ - সাধারণ ভুলগুলি এড়িয়ে চলুন
মোবাইল কনফিগারেশন নির্বাচন(Select a Mobile Configuration)
একটি ওয়েবসাইটকে তিনভাবে মোবাইলের জন্য কনফিগারেশন করা যায়। যথা-
1. ধাপ ১ − রেস্পন্সিভ ওয়েব ডিজাইন (Responsive Web Design)
2. ধাপ ২ − ডাইনামিক পরিবেশন (Dynamic Serving)
3. ধাপ ৩ − আলাদা ইউআরএল (Separate URL)
উপরোক্ত প্রত্যেকটি পদ্ধতির নিজস্ব কিছু সুবিধা এবং অসুবিধা রয়েছে। তবে গুগল রেস্পন্সিভ ওয়েব ডিজাইনের জন্য সুপারিশ করে, কারণ এটি তিনটি কনফিগারেশনই সাপোর্ট করে। মোবাইল কনফিগারেশন আপনার ইউআরএল এবং এইচটিএমএল কোডকে কিভাবে প্রভাবিত করে; নিচের টেবিলে দেখানো হল -
| মোবাইল কনফিগারেশন | ইউআরএল | এইচটিএমএল |
|---|---|---|
| রেস্পন্সিভ ওয়েব ডিজাইন | URL একই থাকে | HTML একই থাকে |
| ডাইনামিক পরিবেশন | URL একই থাকে | HTML ভিন্ন হয় |
| আলাদা ইউআরএল | URL ভিন্ন হয় | HTML ভিন্ন হয় |
রেস্পন্সিভ ওয়েব ডিজাইন(Responsive Web Design )
গুগল রেস্পন্সিভ ওয়েব ডিজাইনের সুপারিশ করে, কারণ এটির মোবাইল কনফিগারেশন সবচেয়ে সহজ এবং এর প্রয়োগও খুব সহজ। এটি একই ইউআরএলে একই HTML কোড পরিবেশন করে, তবে এটি মোবাইল ডিভাইসের স্ক্রিন সাইজের উপর নির্ভর করে প্রদর্শিত হয়।
ডাইনামিক পরিবেশন (Dynamic Serving)
ডায়নামিক পরিবেশন হল এক ধরণের মোবাইল কনফিগারেশন যেখানে আপনার ওয়েবসাইটের URL টি অপরিবর্তিত থাকে। তবে এটি যখন কোন মোবাইল ডিভাইস থেকে অ্যাক্সেস করা হয় তখন এটি বিভিন্ন HTML কন্টেন্ট সরবরাহ করে।
আপনি যদি আপনার কন্টেন্ট সার্ভার থেকে ডাইনামিকভাবে পরিবেশন করতে চান, তবে গুগলকে অবশ্যই জানান দিন যে, এটি যে কন্টেন্ট ক্রল করবে তা মোবাইল ডিভাইসে ভিন্নরকম দেখাবে। এই পদ্ধতির সবচেয়ে বড় অসুবিধা হল মোবাইল এবং ডেস্কটপ ডিভাইসের জন্য কন্টেন্ট আলাদা করতে হলে সার্ভারে অতিরিক্ত প্রসেসিং চালাতে হবে যা আপনার সার্ভারে অপ্রয়োজনীয় লোড সৃষ্টি করে এবং সাইটকে স্লো করে দেয়।।
আলাদা ইউআরএল (Separate URL)
আপনি যদি মোবাইল এবং ডেস্কটপ ব্যবহারীর কাছে একই ধরণের কন্টেন্ট সরবরাহ করার জন্য দুটি পৃথক ইউআরএল তৈরি করে থাকেন, তবে Google কে এটি অবশ্যই অবহিত করুন। গুগল পৃথক ইউআরএল ব্যবহারকে নিরুৎসাহিত করে, কারণ এটি স্বয়ংক্রিয়ভাবে সনাক্ত করতে পারে, আপনার মোবাইল পেজ আপনার ডেস্কটপ পেজ থেকে আলাদা।
সার্স ইঞ্জিনকে অবহিত করুন (Inform Search Engine)
গুগল এবং অন্যান্য সার্স ইঞ্জিনের জন্য আপনার ওয়েবসাইটের মোবাইল কনফিগারেশন ঠিক আছে কিনা তা নিশ্চিত করুন। সর্বাধিক গুরুত্বপূর্ণ বিষয়টি হল; গুগলকে অবশ্যই আপনার পেজটি বুঝতে হবে যাতে এটি আপনার ওয়েবসাইটকে সঠিকভাবে র্যাংকিং করতে পারে। আপনি কিভাবে গুগলকে অবহিত করবেন তা নির্ভর করে আপনি কোন ধরণের মোবাইল কনফিগারেশন ব্যবহার করেছেন। এই কনফিগারেশনটি হতে পারে রেসপন্সিভ ওয়েব ডিজাইন, ডাইনামিক পরিবেশন, বা পৃথক ইউআরএল।
আপনার সাইটের ডিজাইন যদি রেসপন্সিভ হয় তাহলে গুগলকে অবহিত না করা হলেও গুগলের অ্যালগরিদম এটি স্বয়ংক্রিয়ভাবে বুঝতে পারে। আপনার ওয়েবসাইটে রেসপন্সিভ ডিজাইন ব্যবহার করা হলে ওয়েব পেজের হেড সেকশনে নিম্নলিখিত মেটা-ট্যাগটি আছে কিনা নিশ্চিত করুন -
<meta name="viewport" content="width=device-width, initial-scale=1.0”>
আপনার ওয়েবপেজটি বিভিন্ন ডিভাইসে কিভাবে প্রদর্শিত হবে তা ভিউপোর্ট(viewport) ঠিক করে দেয়। রেসপন্সিভ ডিজাইনযুক্ত একটি সাইট ডিভাইসের স্ক্রিন সাইজের উপর নির্ভর করে নিজের সাইজ/আকার পরিবর্তন করতে পারে। সুতরাং ভিউপোর্ট ডিক্লেয়ার করুন যাতে আপনার ওয়েবপেজ যেকোন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।
আপনার ওয়েবসাইটটি যদি ডাইনামিকালি পরিবেশন(dynamically served) করা হয় তবে এটি নিশ্চিত করুন যে, আপনি Google কে ভ্যারি এইচটিটিপি হেডার ব্যবহার করে আপনার কনফিগারেশন সনাক্ত করতে দিয়েছেন।
Vary: User-Agent
ডেস্কটপ এবং মোবাইল ডিভাইসের জন্য আলাদা আলাদা কন্টেন্ট সরবরাহ করা হবে এই মেসেজটি সার্স ইঞ্জিনের কাছে পৌঁছে দেওয়ার জন্য ভেরি হেডার খুবই গুরুত্বপূর্ণ।
আপনার কন্টেন্ট যখন কন্টেন্ট ডেলিভারি নেটওয়ার্কের মতো কোন ক্যাশ সিস্টেম থেকে পরিবেশন করা হয় তখন এই হেডারটি সত্যিই অনেক গুরুত্বপূর্ণ। কারণ ঐসকল সিস্টেম বিভিন্ন ডিভাইসে কন্টেন্ট সরবরাহ করার সময় এই হেডারটি ব্যবহার করে।
আর আপনি যদি পৃথক ইউআরএল যেমন- sattacademy.com এবং sattacademy.com ব্যবহার করে থাকেন, তাহলে আপনি গুগলকে আপনার ডেস্কটপ ভার্সনে একটি বিশেষ লিংক rel = alternate ট্যাগ যুক্ত করে জানিয়ে রাখতে পারেন যে এই পেজের জন্য বিকল্প লিংকও আছে। একইভাবে মোবাইল ভার্সনের জন্যও এটি করুন।
ডেস্কটপ পেজের হেডারে নিম্নলিখিত কোড রাখতে হবে
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.sattacademy.com">
একইভাবে, মোবাইল পেজের হেডারে নিম্নলিখিত কোড রাখতে হবে
<link rel="canonical" href="https://sattacademy.com" >
সাধারণ ভুল এড়িয়ে চলুন(Avoid Common Mistake)
আপনার ওয়েবসাইটটি মোবাইল ডিভাইসের জন্য অপটিমাইজ করতে, আপনি নীচের ভুলগুলি করা থেকে বিরত রয়েছেন কিনা তা নিশ্চিত করুন -
Slow Mobile Page - তারযুক্ত ইন্টারনেট নেটওয়ার্কের তুলনায় মোবাইল নেটওয়ার্ক অনেক ধীর গতির হয়, তাই আপনার ওয়েবসাইটের পেজগুলো মোবাইল ডিভাইসে কত দ্রুত লোড হয় সেদিকে মনোযোগ দেওয়া গুরুত্বপূর্ণ। এটি গুগল র্যাংকিংয়ের জন্য বেশ গুরুত্বপূর্ণ বিষয়। আপনার মোবাইল পেজের গতি সন্ধান করতে মোবাইল এসইও টুলস ব্যবহার করুন। গুগলের বেশ কয়েকটি ভালো টুল আছে যেগুলো আপনি ব্যবহার করতে পারেন। নিচের লিংকটি ব্রাউজ করুন -
https://www.google.com/webmasters/tools/mobile-friendly/
সিএসএস এবং জাভাস্ক্রিপ্ট অবরুদ্ধ(block) করবেন না - গুগল মোবাইল বান্ধব ওয়েবসাইটের জন্য ইনলাইন সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করার পরামর্শ দেয় যাতে কন্টেন্টের পাশাপাশি এগুলোও ডাউনলোড করা যায়। সুতরাং আপনার সাইটে যদি খুব বেশি সিএসএস না থাকে তবে সিএসএস কোড ট্যাগের মধ্যেই রাখার চেষ্টা করুন। তবে আপনি যদি পৃথক ফাইলে প্রচুর সিএসএস ব্যবহার করেন তবে পজের নিচের অংশে এটি অন্তর্ভুক্ত করার চেষ্টা করুন যা পেজের অন্যান্য কন্টেন্ট ডাউনলোডকে অবরুদ্ধ করবে না। একই নিয়ম জাভাস্ক্রিপ্টের জন্যও প্রযোজ্য, যা পেজের ভিতরেই রাখা যেতে পারে বা পেজের নীচে অন্তর্ভুক্ত করা যেতে পারে। আপনি যদি পেজের শীর্ষে ফাইলটি অন্তর্ভুক্ত করতে চান , তবে async এট্রিবিউট যুক্ত করুন ।
<script async type="text/javascript" src=“jquery.js"></script>
মোবাইল রিডাইরেক্ট এড়িয়ে চলুন - মোবাইল নেটওয়ার্ক যেহেতু তুলনামূলক ধীর গতির হয়, তাই অধিক রিডাইরেক্ট আপনার পেজের গতি কমিয়ে দিতে পারে। আপনার সাইটে যদি একাধিক ইউআরএল থাকে তবে আপনার সমস্ত লিংকগুলি প্রাসঙ্গিক পেজকে পয়েন্ট করে কিনা নিশ্চিত করুন। আপনার সাইটে যদি একাধিক ইউআরএল থাকে এবং আপনি এটি সনাক্ত করতে পারেন, একজন ইউজার মোবাইল ডিভাইস থেকে ডেস্কটপ পেজ দেখছেন এবং এর সমতুল্য আপনার মোবাইল পেজ অন্য URL -এ রয়েছে, তবে 404 ত্রুটি প্রদর্শন না করে ইউজারকে সেই URL এ রিডাইরেক্ট করুন।
ভারী চিত্র এড়িয়ে চলুন - ভারী চিত্র লোডিং টাইম বৃদ্ধি করে। কিন্তু দরকারী এবং কার্যকর হওয়ায় আমরা এগুলির ব্যবহার পুরোপুরি ছেড়ে দিতে পারি না। সুতরাং আপনার টেক্সট এবং ভারী চিত্রের মধ্যে ভারসাম্য বজায় রাখা উচিৎ। ভারী ডাউনলোড এড়াতে ভাল কোন টুল ব্যবহার করে আপনার চিত্রগুলি অপটিমাইজ করুন এবং কম রেজুলেশনে সংরক্ষণ করুন।
প্লাগইন এবং পপ-আপ এড়িয়ে চলুন - ফ্ল্যাশ এবং জাভার মতো প্লাগইন ইউজারের মোবাইল ডিভাইসে নাও থাকতে পারে। তাই আপনার ওয়েবপেজটি তার মোবাইল ডিভাইস থেকে পড়তে সক্ষম নাও হতে পারে। এইজন্য মোবাইল পেজে অতিরিক্ত প্লাগইন এবং পপ-আপ এড়িয়ে চলুন
মোবাইল পেজ তৈরি করার সময় সর্বদা মনে রাখবেন যে, আপনার পেজ ব্রাউজ করার জন্য ইউজারের মোবাইল ডিভাইসে বেশ কিছু সীমাবদ্ধতা থাকতে পারে। সুতরাং টাইটেল, ইউআরএল এবং মেটা-বিবরণ তৈরি করার সময় যথাসম্ভব সংক্ষিপ্ত করার চেষ্টা করবেন। এটি অবশ্যই তথ্যের সারমর্ম কিংবা মানের সাথে আপস না করে করতে হবে।