সঠিক উপায়ে Mobile Template থেকে অপ্রয়োজনীয় HTML Hide করুন

গত ২০১৫ সালের এপ্রিল মাসে Google's Mobile Friendly Update Algorithm এর নতুন নিয়ম আপডেট করে। যার ফলে অনেক ভালমানের ব্লগের মোবাইলের মাধ্যমে ভিজিটর পাওয়ার পরিমান কমে গেছে। কারণ অনেক ওয়েব ডেভেলপাররা বুঝতে পারেনি যে, ব্লগার টেমপ্লেটের ডিজাইন শুধুমাত্র মোবাইল উপযোগী হলে হবে না, পাশাপাশি মোবাইল Browsers গুলির স্পীড এর উপযোগীও হতে হবে। মোবাইল টেমপ্লেটের স্পীড নরমালি যে কোন কম্পিউটার Browsers টেমপ্লেটের চাইতে অনেক কম হয়ে থাকে। তাছাড়াও মোবাইলের মাধ্যমে বেশীরভাগ লোক 2G ও 3G নেটওয়ার্কের মাধ্যমে Internet ব্যবহার করে থাকেন। যার গতি যে কোন Broad Band ইন্টারনেটের চাইতে অনেকগুন কম হয়ে থাকে। কাজেই আপনার ব্লগের মোবাইল টেমপ্লেটকে ঐ সব আনুষাঙ্গিক বিষয় মাথায় রেখে সাজাতে হবে। শুধুমাত্র মোবাইল উপযোগী স্টাইল করলেই হবে না। কারণ যখন কোন ভিজিটর ব্লগ ভিজিট করার সময় বেশী সময় নেবে সে ঐ ব্লগ ভিজিট না করে তার বিষয়টি অন্যত্র খোঁজার চেষ্টা করবে।

আমি অনেক ভালমানের ব্লগার টেমপ্লেট রিসার্চ করেছি এবং দেখেছি যে, বেশীরভাগ ডেভেলপাররা তাদের ব্লগের মোবাইল টেমপ্লেট হতে কোন HTML অংশ Hide করার জন্য শুধুমাত্র "Display:none" Property ব্যবহার করেছেন। এভাবে যদিও কোন HTML Element Hide করা সম্ভব, তবুও এটি মোবাইল টেমপ্লেটের ক্ষেত্রে ১০০% নিরাপদ নয়। 

 Responsive Templates এ কেন "Display:none" ব্যবহার করা উচিত নয়?

• "Display:none" Property শুধুমাত্র Images, Iframes এবং Div Section -কে Hide করার ক্ষেত্রে অবশ্যই ব্যবহার করবেন। তবে আপনি যদি এ ভাবে সকল ধরনের HTML অংশ মোবাইল টেমপ্লেট থেকে Hide করেন তাহলে যদিও এটি মোবাইল টেমপ্লেটের Out Put থেকে Hide হবে তবে Input এ ঠিকই কাজ করবে। ফলে দেখা যাবে ঐ সমস্ত HTML অংশ Rendered করার পাশাপাশি প্রত্যেকটি লিংক Search Robot Crawl করতে থাকবে। এতেকরে আপনার টেমপ্লেট সার্চ ইঞ্জিন অপটিমাইজেশনে বড় সমস্যার সম্মুখিন হবে।
• অধীকন্তু আপনি যদি মোবাইল টেমপ্লেট থেকে "Display:none" Property ব্যবহার করে কোন আর্টিকেল Hide করেন তাহলে সেটিও সার্চ Robot -দের Visible করে রাখবে। যারফলে সার্চ রোবট আপনার ব্লগের বিভিন্ন কনটেন্ট এর ব্যাপারে Confused এ পড়ে যাবে। এটিও সার্চ ইঞ্জিন অপটিমাইজেশনে অনেক ব্যাঘাত ঘটাবে। 
• সবচেয়ে বড় সমস্যা হচ্ছে এটি ব্যবহার করে কোন অংশ Hide করার ফলে যদি আপাতত ঐ সমস্ত কনটেন্ট বাহ্যিক ‍দৃষ্টিতে দেখা যাবে না তবে সেগুলি Input এ ঠিকই কাজ করতে থাকবে। যার ফলে আপনার টেমপ্লেটের Speed কমতে থাকবে।

 সঠিক উপায়ে Mobile Template থেকে অপ্রয়োজনীয় HTML Hide করাঃ

Blogger Templates XHTML ফরমেটে তৈরি করা হয়েছে, যার জন্য এটি অনেক ধরনের Conditional Tag Support করে। মোবাইল টেমপ্লেটের জন্য isMobileRequest অত্যন্ত গুরুত্বপূর্ণ একটি Conditional Tag যেটি যে কোন HTML DOM এর ক্ষেত্রে ব্যবহার করতে পারবেন। এই isMobileRequest এর True ও False দুটি Condition রয়েছে। নিচে আমাদের ব্লগের User Experience দেখুন, যেখানে গুগল আমাদের ব্লগের জন্য 100/100 Score প্রদান করছে। আপনার ব্লগের User Experience গুগল ডেভেলপার পেজ এর লিংক থেকে চেক করে নিতে পারেন।

 কিভাবে Conditional Tag ব্যবহার করবেন?

• আপনার ব্লগে লগইন করুন।
• ব্লগের কোন অংশ শুধুমাত্র মোবাইল টেমপ্লেটে দেখানোর জন্য নিচের Conditional Tag টি ব্যবহার করুন।

<b:if cond='data:blog.isMobileRequest == "true"'>

HTML To Show Only in Mobile Devices

</b:if>

• অথবা আপনার ব্লগের কোন অংশ যদি শুধুমাত্র কম্পিউটার টেমপ্লেটে দেখাতে চান তাহলে নিচের Conditional Tag টি ব্যবহার করতে হবে।
• 
  
• 
  
•  <b:if cond='data:blog.isMobileRequest == "false"'>
  
  HTML To Show Only in Desktop Devices
  
  </b:if>

• উপরের এই Conditional Tag দুটি HTML Element-কে শুধুমাত্র প্রয়োজনীয় জায়গাতে Active করে রাখবে এবং অপ্রয়োজনীয় ক্ষেত্রে Disable করে রাখবে।

সাহায্য জিজ্ঞাসাঃ আশা করছি উপরের কোন বিষয় আপনাদের বুঝতে অসুবিধা হবে না। তারপরও যদি কোন অংশ সম্পর্কে দ্বিধা থাকে তাহলে আমাদের জানাতে পারেন। আমাদের পরবর্তী পোষ্টে শেয়ার করব কিভাবে isMobileRequest ব্যবহার করে ব্লগের JavaScript ও Widget Disable করে মোবাইল টেমপ্লেটের Speed বৃদ্ধি করবেন।