সাধারণ ভুল

মোবাইলের জন্য সাইট ডিজাইন করার সময় ওয়েবমাস্টাররা যে সাধারণ ভুলগুলি করে থাকেন সেগুলির বিবরণ এই পৃষ্ঠাতে দেওয়া হয়েছে।

ব্লক করা জাভাস্ক্রিপ্ট, CSS ও ছবির ফাইল

সবচেয়ে ভালভাবে রেন্ডার ও ইন্ডেক্স করার জন্য, Googlebot-কে আপনার ওয়েবসাইট কোনও ব্যবহারকারীর দৃষ্টিকোণ থেকে দেখতে এবং সাইটের জাভাস্ক্রিপ্ট, CSS ও ছবির ফাইল অ্যাক্সেস করতে দিন। সাইটের robots.txt ফাইলকে এই অ্যাসেট ক্রল করার অনুমতি না দিলে, আমাদের অ্যালগরিদম আপনার কন্টেন্টকে ভালভাবে রেন্ডার ও ইন্ডেক্স করতে পারবে না। এর ফলে র‍্যাঙ্কিং ক্ষতিগ্রস্ত হতে পারে।

  1. Search Console-এর ইউআরএল খতিয়ে দেখার টুল ব্যবহার করে Googlebot আপনার জাভাস্ক্রিপ্ট, CSS ও ছবির ফাইল ক্রল করতে পারছে কিনা দেখুন। Googlebot আপনার সাইটের কন্টেন্ট ঠিক কীভাবে দেখে ও রেন্ডার করে তা বুঝতে এবং ইন্ডেক্সিং সংক্রান্ত বেশ কিছু সমস্যা শনাক্ত ও সমাধান করতে এই টুলটি আপনাকে সাহায্য করবে।

  2. Search Console-এ আপনার robots.txt দেখুন এবং পরীক্ষা করুন

  3. আপনার ওয়েবসাইট মোবাইল ব্যবহারকারীদের জন্য উপযুক্ত বলে আমাদের সিস্টেম শনাক্ত করতে পারছে কিনা তা দেখতে মোবাইল পৃষ্ঠাগুলিতে মোবাইল-ফ্রেন্ডলি পরীক্ষা করে দেখুন।

  4. আপনি মোবাইল পৃষ্ঠার জন্য আলাদা ইউআরএল ব্যবহার করলে, রিডাইরেক্ট শনাক্ত ও ক্রল করা যাচ্ছে কিনা তা দেখতে মোবাইল ও ডেস্কটপ উভয় ইউআরএলই পরীক্ষা করুন।

চালানো যায় না এমন কন্টেন্ট

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

কোনও ব্যবহারকারী, মোবাইল ডিভাইসে চলে না এমন কন্টেন্ট সহ কোনও ওয়েবসাইটে গেলে, নিচের উদাহরণের মতো একটি মেসেজ দেখতে পাবেন:

Video not playable

ব্যবহারকারীর কাছে এটি মোবাইলে খারাপ অভিজ্ঞতার কারণ হয়!

মালিকানাধীন ভিডিও প্লেয়ার বা চলে না এমন ফর্ম্যাটের কন্টেন্ট ব্যবহার করার পরিবর্তে, ভিডিও বা অ্যানিমেশনের জন্য HTML5-এর স্ট্যান্ডার্ড ট্যাগ ব্যবহার করলে ভাল হয়।

অ্যানিমেট করা কন্টেন্টের জন্য সব ওয়েব ব্রাউজারে কাজ করে এমন HTML5 অ্যানিমেশন ব্যবহার করুন। HTML5-এ এই ধরনের অ্যানিমেশন সহজেই তৈরি করতে Google ওয়েব ডিজাইনার ব্যবহার করতে পারেন।

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

আরও জানতে, Google-এর ওয়েবের মূল নীতি নিবন্ধে ভিডিও সংক্রান্ত পেশাদার পদ্ধতি অংশটি পড়ুন।

ভুল রিডাইরেক্ট

আপনার আলাদা মোবাইল ইউআরএল থাকলে, প্রতিটি ডেস্কটপ ইউআরএল থেকে উপযুক্ত মোবাইল ইউআরএলে আপনার ব্যবহারকারীকে রিডাইরেক্ট করলে ভাল হয়। অন্য কোনও পৃষ্ঠায় (যেমন, সবসময় হোমপেজে) তাকে রিডাইরেক্ট করা উচিত নয়।

যেমন:

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

  • আপনার ডেস্কটপ সাইট কিছু মোবাইল ডিভাইস রিডাইরেক্ট করলেও অন্যগুলিকে করে না। যেমন, একটি সাইট শুধু Android ব্যবহারকারীকে মোবাইল সাইটে রিডাইরেক্ট করে কিন্তু iPhone অথবা Windows Phone ব্যবহারকারীকে করে না।

  • Search Console ব্যবহার করুন। আপনি যাচাই করা ব্যবহারকারী হলে এবং আপনার সাইটের কোনও পৃষ্ঠা স্মার্টফোন ব্যবহারকারীকে হোমপেজে রিডাইরেক্ট করলে আমরা আপনাকে মেসেজ পাঠাব।

  • স্মার্টফোন ব্যবহারকারীকে স্মার্টফোন সাইটের সমতুল্য ইউআরএলে রিডাইরেক্ট করার জন্য সার্ভার সেট-আপ করুন।

  • আপনার সাইটে যদি এমন কোনও পৃষ্ঠা থাকে যেটির স্মার্টফোনের জন্য সমতুল্য ভার্সন নেই, তাহলে ব্যবহারকারীকে স্মার্টফোন সাইটের হোমপেজে রিডাইরেক্ট না করে ডেস্কটপ পৃষ্ঠায় রাখুন। এই ক্ষেত্রে, ভুল কিছু করার থেকে কিছু না করা ভাল।

  • ডেস্কটপ এবং স্মার্টফোন ব্যবহারকারীকে একই কন্টেন্ট দেখাতে প্রতিক্রিয়াশীল ওয়েব ডিজাইন ব্যবহার করার কথা ভেবে দেখুন।

শুধুমাত্র মোবাইলের জন্য 404

একটি ইউআরএল অ্যাক্সেস করার সময় কিছু সাইট ডেস্কটপ ব্যবহারকারীকে কন্টেন্ট দেখালেও মোবাইল ব্যবহারকারীকে একটি সমস্যার পৃষ্ঠা দেখায়।

Mobile-only 404s

আপনি যদি লক্ষ্য করেন যে মোবাইল ডিভাইস ব্যবহার করে কোনও ব্যবহারকারী একটি ডেস্কটপ পৃষ্ঠা দেখছেন এবং সেই পৃষ্ঠাটির যদি অন্য ইউআরএলে একটি সমতুল্য মোবাইল পৃষ্ঠা থাকে, তাহলে তাকে ভাল অভিজ্ঞতা প্রদান করতে 404 বা সফ্ট 404 পৃষ্ঠা দেখানোর পরিবর্তে সেই মোবাইল ইউআরএলে রিডাইরেক্ট করে দিন। এছাড়াও, মোবাইল-ফ্রেন্ডলি পৃষ্ঠাটি নিজেই একটি সমস্যার পৃষ্ঠা কিনা দেখুন।

Good redirects
  • Search Console ব্যবহার করুন। আপনি সাইটের যাচাই করা ব্যবহারকারী হলে, আমরা আপনাকে মেসেজ সেন্টার-এ বিজ্ঞপ্তি পাঠাব।

  • আপনার স্মার্টফোন সাইটের আলাদা ইউআরএল থাকলে, স্মার্টফোন ব্যবহারকারীকে সেই সাইটের সমতুল্য ইউআরএলে রিডাইরেক্ট করার জন্য সার্ভার সেট-আপ করুন।

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

  • আপনার সাইটে কোনও পৃষ্ঠার স্মার্টফোনের জন্য সমতুল্য ভার্সন না থাকলে ব্যবহারকারীকে ডেস্কটপ পৃষ্ঠাতেই রাখুন। সমস্যার পৃষ্ঠা দেখানোর চেয়ে ব্যবহারকারী যে কন্টেন্ট খুঁজছেন তা দেখানো অনেক বেশি গুরুত্বপূর্ণ।

  • যেখানে সম্ভব সেখানে প্রতিক্রিয়াশীল ওয়েব ডিজাইন ব্যবহার করুন। এই কনফিগারেশন, যেকোনও ডিভাইসে ব্যবহারকারীকে একই কন্টেন্ট দেখানোর সুযোগ করে দেয়।

ইন্টারস্টিশিয়াল এড়িয়ে যাওয়া

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

অ্যাপ ডাউনলোড করার ইন্টারস্টিশিয়াল

অনেক ওয়েবমাস্টার মোবাইল ওয়েবসাইটের দর্শকদের কাছে নিজের ব্যবসার নেটিভ অ্যাপ প্রচার করেন। সেটি ঠিকভাবে করা না হলে, ইন্ডেক্সিংয়ের সমস্যা ও দর্শকদের সাইট ব্যবহার করার সময় অসুবিধা হতে পারে।

ইন্টারস্টিশিয়াল এড়িয়ে যাওয়া
ইন্টারস্টিশিয়ালটি ব্যবহারকারীকে কাজ করতে দিচ্ছে না।
App banner
ব্যানারটি ব্যবহারকারীকে কাজ করার সাথে সাথে অ্যাপও দেখতে দিচ্ছে।
  • পৃষ্ঠার কন্টেন্টের সাথে একটি সাধারণ ব্যানার একই লাইনে রেখে আপনার অ্যাপের প্রচার করুন। এগুলি ব্যবহার করে এই ব্যানার প্রয়োগ করা যেতে পারে:
    • Safari-র জন্য Smart App Banners অথবা Chrome-এর জন্য Native App Banners-এর মতো ব্রাউজারে চলে এমন ব্যানার।
    • ছোট বিজ্ঞাপনের মতো একটি HTML ব্যানার অথবা ছবি, যেটি ডাউনলোডের জন্য ব্যবহারকারীকে সঠিক অ্যাপ স্টোরে নিয়ে যায়।

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

  • লিঙ্কগুলি সঠিক সমতুল্য পৃষ্ঠায় নির্দেশ করছে কিনা দেখুন।

মোবাইল পৃষ্ঠার ধীর গতিতে লোড হওয়া

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

Google PageSpeed ইনসাইট-এর "স্পিড" উপ-বিভাগের মধ্যে আপনার পৃষ্ঠাতে দেরি করে লোড হওয়া সংক্রান্ত কোনও সমস্যা আছে কিনা দেখুন। "ঠিক করা প্রয়োজন" হিসেবে চিহ্নিত সমস্যাগুলি সমাধান করার চেষ্টা করুন।

আরও তথ্যের জন্য এগুলি দেখুন:

আপনার ভিউপোর্ট সঠিকভাবে সেট করা

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

  • এমন ভিউপোর্ট ব্যবহার করা যার প্রস্থ পরিবর্তন করা যায় না। এর ফলে পৃষ্ঠাটি বিভিন্ন ডিভাইসের সাইজ (এবং সেই রকম ডিভাইস অনেক আছে) অনুযায়ী ছোট বড় হয় না। আরও জানুন
  • ভিউপোর্টের ন্যূনতম প্রস্থটি খুব বেশি হলে ছোট ডিভাইসে পৃষ্ঠাটি পাশাপাশি স্ক্রল করে ব্যবহারকারীকে পড়তে হবে। CSS ডিক্লারেশনে যদি পৃষ্ঠার প্রস্থের জন্য কোনও মান নির্দিষ্ট করে দেওয়া থাকে অথবা যদি পৃষ্ঠায় এমন কোনও ছবি ব্যবহার করা হয় যা ব্রাউজারের একটি নির্দিষ্ট প্রস্থেই (যেমন ৯৮০ পিক্সেল) ভালোভাবে দেখা যায়, তাহলে এই সমস্যাটি দেখা দিতে পারে। এই সমস্যার সমাধান করতে, পৃষ্ঠার CSS উপাদানে প্রস্থ ও অবস্থানের আপেক্ষিক মান দেওয়া আছে কিনা এবং বিভিন্ন সাইজের ডিভাইস অনুযায়ী ছবি ঠিক স্কেল করছে কিনা তা নিশ্চিত করুন। আরও জানুন

ফন্টের সাইজ ছোট

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

টাচ করা যায় এমন উপাদানগুলিকে খুব কাছাকাছি রাখা

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

Send feedback about...

সার্চ
সার্চ