Blogger Mobile Friendly Tips

Blogger Website Mobile Friendly করার ১০টি গুরুত্বপূর্ণ টিপস

হ্যালো বন্ধুরা, কেমন আছেন সবাই? আশা করি সবাই অনেক ভালো আছেন। আজকের এই আর্টিকেলে আমি আপনাদের সাথে ব্লগিংয়ের অত্যন্ত গুরুত্বপূর্ণ একটি বিষয় নিয়ে আলোচনা করব। বিষয়টি হলো— কীভাবে আপনার ব্লগার (Blogger) ওয়েবসাইটকে সম্পূর্ণ মোবাইল ফ্রেন্ডলি (Mobile Friendly) করবেন। আপনারা যারা ব্লগিং করেন, তারা নিশ্চয়ই জানেন যে বর্তমানে যেকোনো ওয়েবসাইটের অর্ধেকেরও বেশি, বলতে গেলে প্রায় ৭০-৮০ শতাংশ ভিজিটর আসে মোবাইল ডিভাইস থেকে। তাই আপনার ওয়েবসাইটটি যদি মোবাইলের জন্য পারফেক্ট না হয়, তাহলে আপনি বিশাল মাপের ট্রাফিক বা ভিজিটর হারাবেন।

অনেকেই আমাকে বলেন যে, "ভাইয়া, আমার ওয়েবসাইটে তো ভালো কনটেন্ট আছে, তাও গুগলে র‍্যাংক করছে না কেন? কিংবা গুগল এডসেন্স (Google AdSense) কেন রিজেক্ট করে দিচ্ছে?" এর অন্যতম একটি প্রধান কারণ হলো ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স (User Experience) বা মোবাইল ফ্রেন্ডলিনেস ঠিক না থাকা। গুগল এখন 'Mobile-First Indexing' পদ্ধতি ব্যবহার করে। অর্থাৎ, গুগল বট যখন আপনার ওয়েবসাইট ইনডেক্স করতে আসে, তখন সে প্রথমেই দেখে আপনার সাইটটি মোবাইলে কেমন দেখাচ্ছে। মোবাইলে ঠিকমতো লোড না হলে, ডিজাইন ভেঙে গেলে বা পড়তে অসুবিধা হলে গুগল কখনোই সেই সাইটকে র‍্যাংক দেবে না এবং এডসেন্স তো দূরের কথা!

তাই আজকে আমি আপনাদের এমন ১০টি কার্যকরী এবং পরীক্ষিত টিপস দেব, যেগুলো ফলো করলে আপনার ব্লগার সাইটটি ১০০% মোবাইল ফ্রেন্ডলি হবে, এসইও (SEO) র‍্যাংকিং বাড়বে এবং গুগল এডসেন্স পেতেও অনেক সুবিধা হবে। তো চলুন, আর কথা না বাড়িয়ে মূল বিষয়ে প্রবেশ করি।

১. একটি প্রিমিয়াম এবং রেসপন্সিভ (Responsive) থিম ব্যবহার করুন

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

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

২. ব্লগারের নিজস্ব মোবাইল ভিউ (Mobile View) সেটিং অপটিমাইজ করুন

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

এটি করার জন্য আপনার ব্লগার ড্যাশবোর্ড থেকে Theme অপশনে যান। এরপর Customize বাটনের পাশে থাকা অ্যারো (Arrow) আইকনে ক্লিক করে Mobile Settings এ ক্লিক করুন। সেখানে "Desktop" সিলেক্ট করে সেভ করে দিন। এর ফলে আপনার কাস্টম থিমের যে নিজস্ব মোবাইল ডিজাইন আছে, সেটিই ভিজিটরদের ফোনে সুন্দরভাবে শো করবে এবং ডিজাইন ভাঙবে না।

৩. ইমেজের সাইজ এবং অপটিমাইজেশন ঠিক রাখুন

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

মোবাইল ফ্রেন্ডলি করার জন্য ছবিগুলো সবসময় কম্প্রেস (Compress) করে আপলোড করবেন। ছবির সাইজ ১০০ কেবি (KB) এর নিচে রাখার চেষ্টা করুন। এছাড়া ইমেজের ফরম্যাট হিসেবে WebP ফরম্যাট ব্যবহার করতে পারেন, যা ছবির কোয়ালিটি ঠিক রেখে সাইজ অনেক কমিয়ে দেয়। পাশাপাশি প্রতিটি ইমেজে alt ট্যাগ এবং width ও height অ্যাট্রিবিউট ব্যবহার করবেন, যাতে ব্রাউজার আগেই বুঝতে পারে ছবির জন্য কতটুকু জায়গা ফাঁকা রাখতে হবে।

৪. সঠিক ফন্ট সাইজ এবং টাইপোগ্রাফি (Typography) ব্যবহার করুন

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

মোবাইলের জন্য আর্টিকেলের বডি টেক্সটের ফন্ট সাইজ ১৬ পিক্সেল (16px) থেকে ১৮ পিক্সেল (18px) এর মধ্যে রাখা সবচেয়ে ভালো। এছাড়া এমন ফন্ট ফ্যামিলি ব্যবহার করবেন যা স্ক্রিনে পড়তে সুবিধা হয় (যেমন: Sans-serif ফন্টগুলো)। লাইনের মাঝখানে পর্যাপ্ত ফাঁকা জায়গা বা Line-height (অন্তত 1.5 বা 1.6) রাখবেন, যেন এক লাইনের লেখার সাথে অন্য লাইন মিশে না যায়। এতে পাঠকের পড়তে সুবিধা হবে এবং তারা লম্বা সময় আপনার ওয়েবসাইটে অবস্থান করবে।

৫. পেজ লোডিং স্পিড ফাস্ট করুন (Page Speed Optimization)

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

আপনার ব্লগার সাইটের স্পিড বাড়ানোর জন্য থিমের ভেতরের অপ্রয়োজনীয় জাভাস্ক্রিপ্ট (JavaScript) এবং সিএসএস (CSS) কোড রিমুভ করুন। বাইরে থেকে অতিরিক্ত কোনো ভারী উইজেট বা থার্ড-পার্টি স্ক্রিপ্ট সাইটে যুক্ত করবেন না। যত সিম্পল এবং ক্লিন ডিজাইন রাখবেন, আপনার ওয়েবসাইট তত দ্রুত লোড হবে। আর ওয়েবসাইট দ্রুত লোড হলে গুগল এডসেন্স এপ্রুভাল পাওয়াও অনেক সহজ হয়ে যায়।

৬. অপ্রয়োজনীয় উইজেট এবং সাইডবার রিমুভ করুন

ডেস্কটপে একটি ওয়েবসাইটের ডান বা বাম পাশে সাইডবার দেখতে খুব সুন্দর লাগে। সেখানে আমরা পপুলার পোস্ট, ক্যাটাগরি, সাবস্ক্রাইব বাটন ইত্যাদি রাখি। কিন্তু মোবাইলে এই সাইডবারগুলো সাধারণত মূল আর্টিকেলের একদম নিচে চলে যায়।

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

৭. বিরক্তিকর পপ-আপ (Pop-ups) এবং ইন্টারস্টিশিয়াল অ্যাড বন্ধ রাখুন

অনেক ওয়েবসাইটে ঢুকলেই দেখা যায় পুরো স্ক্রিন জুড়ে একটা সাবস্ক্রিপশন বক্স বা অ্যাড চলে আসে, যা ক্রস (X) বাটনে ক্লিক করে না কাটা পর্যন্ত মূল লেখা পড়া যায় না। গুগলের ভাষায় এগুলোকে বলে Intrusive Interstitials। মোবাইলের ছোট স্ক্রিনে এই ধরনের পপ-আপ খুবই বিরক্তিকর।

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

৮. ছোট ছোট প্যারাগ্রাফ এবং সাব-হেডিং ব্যবহার করুন

মোবাইলে পড়ার সময় বড় বড় প্যারাগ্রাফ চোখের জন্য কষ্টকর। আপনি যদি একটানা ২০-২৫ লাইনের একটা প্যারাগ্রাফ লিখে রাখেন, তবে ভিজিটর সেটা দেখে ভয় পেয়ে যাবে এবং পড়ার আগ্রহ হারিয়ে ফেলবে।

তাই আর্টিকেল লেখার সময় ছোট ছোট প্যারাগ্রাফ তৈরি করুন। প্রতিটি প্যারাগ্রাফে ৩ থেকে ৪ লাইনের বেশি লেখা রাখবেন না। পাশাপাশি লেখার ভেতরে পর্যাপ্ত পরিমাণে সাব-হেডিং (H2, H3, H4) এবং বুলেট পয়েন্ট ব্যবহার করুন। এতে আর্টিকেলের গঠন সুন্দর হয়, স্ক্যান করা সহজ হয় এবং ভিজিটররা খুব সহজেই তাদের প্রয়োজনীয় তথ্য খুঁজে পায়। এই পদ্ধতিটি এসইও এবং মোবাইল রিডেবিলিটি— উভয়ের জন্যই অত্যন্ত কার্যকরী।

৯. টাচ টার্গেট (Touch Targets) এবং বাটনগুলো সঠিক মাপে রাখুন

মোবাইলে আমরা আঙুল দিয়ে টাচ করে ওয়েবসাইট ব্রাউজ করি। এখন আপনার ওয়েবসাইটে থাকা লিংক বা বাটনগুলো যদি খুব কাছাকাছি থাকে, তবে দেখা যাবে ভিজিটর একটা লিংকে ক্লিক করতে গিয়ে ভুলে অন্য লিংকে ক্লিক করে ফেলছে। গুগলের সার্চ কনসোলে অনেক সময় এই এররটি দেখায়— "Clickable elements too close together".

এই সমস্যা সমাধানের জন্য আপনার ওয়েবসাইটের মেনু, সোশ্যাল শেয়ার বাটন এবং ইন্টারনাল লিংকগুলোর মাঝখানে পর্যাপ্ত ফাঁকা জায়গা (Padding/Margin) রাখতে হবে। একটি আদর্শ টাচ টার্গেটের সাইজ অন্তত 48x48 পিক্সেল হওয়া উচিত। বাটনগুলো এমনভাবে তৈরি করুন যেন মোবাইলের স্ক্রিনে যে কেউ খুব সহজেই আঙুল দিয়ে সঠিকভাবে ক্লিক করতে পারে।

১০. গুগলের 'Mobile-Friendly Test' টুল এবং সার্চ কনসোল ব্যবহার করুন

আপনি উপরের সবকটি কাজ ঠিকঠাক করার পর আপনার ওয়েবসাইটটি আসলেই মোবাইল ফ্রেন্ডলি হয়েছে কি না, তা যাচাই করা প্রয়োজন। এর জন্য গুগল তাদের নিজস্ব একটি টুল তৈরি করে রেখেছে। আপনি গুগলে গিয়ে "Google Mobile-Friendly Test" লিখে সার্চ করলে টুলটি পেয়ে যাবেন। সেখানে আপনার ওয়েবসাইটের লিংক দিয়ে চেক করে নিতে পারবেন যে, সাইটে কোনো সমস্যা আছে কি না।

এছাড়া আপনার Google Search Console ড্যাশবোর্ডের "Mobile Usability" সেকশনে নিয়মিত নজর রাখবেন। গুগল বট যদি আপনার সাইটটি মোবাইলে ক্রল করতে গিয়ে কোনো টেকনিক্যাল সমস্যার সম্মুখীন হয় (যেমন- ফন্ট অনেক ছোট, স্ক্রিনের বাইরে লেখা চলে যাচ্ছে ইত্যাদি), তবে সেখানে আপনাকে রিপোর্ট করে জানিয়ে দেবে। সেই রিপোর্ট দেখে আপনি দ্রুত সমস্যাগুলো ফিক্স করে নিতে পারবেন।

শেষ কথা

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

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