সাধারণ ভুল

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

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

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

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

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

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

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

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

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

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

ভিডিও প্লে করা যাচ্ছে না

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

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

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

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

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

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

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

যেমন:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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