Google ওয়েব index করে mobile-first: একটি পাতার মোবাইল সংস্করণটিই indexing আর ranking-এর জন্য ব্যবহৃত সংস্করণ। আপনার সাইট একটি ফোনে ডেস্কটপের চেয়ে ভিন্নভাবে আচরণ করলে, ফোন সংস্করণটিই গণনায় ধরা হয়।
মানুষ যে পরিণতিটি বাদ দেয়: শুধু ডেস্কটপ লেআউটে থাকা কন্টেন্ট কার্যত অদৃশ্য। একটি responsive ডিজাইন যদি ছোট স্ক্রিনে একটি অংশ লুকায়, বা একটি মোবাইল টেমপ্লেট ডেস্কটপে থাকা টেক্সট বাদ দেয়, সেই কন্টেন্ট ইঞ্জিন যা মূল্যায়ন করছে তা নয়।
এটি "জায়গা বাঁচাতে মোবাইলে এটি লুকিয়ে রাখুন"-কে শুধু একটি লেআউট পছন্দ নয়, SEO পরিণতিযুক্ত একটি সিদ্ধান্ত করে তোলে। খোলার জন্য একটি ট্যাপের পেছনে কন্টেন্ট গুটিয়ে রাখা সাধারণত ঠিক আছে — কন্টেন্ট এখনো HTML-এ আছে। মোবাইল markup থেকে সম্পূর্ণ সরিয়ে দেওয়া নয়।
একই যুক্তি structured data, heading, internal লিংক, আর ছবিতে প্রযোজ্য। মোবাইল সংস্করণে যা অনুপস্থিত তা অনুপস্থিত, ব্যাস। একটি সরু viewport-এ আপনার পাতা যাচাই করা মানে যে সংস্করণটি গুরুত্বপূর্ণ সেটি যাচাই করা।
CSS-এর মাধ্যমে অভিযোজিত হয় এমন এক সেট HTML পরিবেশন করা পুরো সমস্যার শ্রেণীটি এড়ায়: শুধু একটি সংস্করণ আছে, তাই এটি আলাদা হতে পারে না। এর অর্থ প্রতি পাতায় একটি URL-ও, যা canonical আর লিংক সহজ রাখে।
<!-- Responsive লেআউট কাজ করতেই এটি আবশ্যক -->
<meta name="viewport" content="width=device-width, initial-scale=1">সেই viewport ট্যাগ ছাড়া একটি মোবাইল ব্রাউজার একটি ডেস্কটপ-প্রস্থের পাতা ধরে নিয়ে zoom out করে, সেই ক্ষুদ্র অপঠনযোগ্য রেন্ডারিং তৈরি করে যা responsive CSS ঠেকানোর জন্যই ছিল। এটি এক লাইন, আর এটি বাদ দিলে বাকি সবকিছু বাতিল হয়ে যায়।
type অ্যাট্রিবিউট সঠিক কীবোর্ড আনে আর বাস্তব বিরক্তি বাঁচায়।ব্রাউজার developer tool একটি সরু viewport সিমুলেট করতে পারে, যা দ্রুত লেআউট সমস্যা ধরে। কিন্তু একটি সিমুলেটর একটি বাস্তব ফোনের প্রসেসরের গতি, নেটওয়ার্ক পরিস্থিতি, বা টাচ নির্ভুলতা পুনরুৎপাদন করে না — একটি আসল ডিভাইসে পরীক্ষা, আদর্শভাবে অফিস Wi-Fi-তে নতুন ফ্ল্যাগশিপের বদলে একটি মোবাইল সংযোগে একটি মধ্য-পর্যায়ের ডিভাইসে, এমন সমস্যা প্রকাশ করে যা একটি ডেস্কটপ সিমুলেশন কখনো করবে না।