Mobile Friendly Checker
यह फ्री मोबाइल फ्रेंडली चेकर किसी पेज के HTML को पढ़ता है और उन चीजों को टेस्ट करता है जो यह तय करती हैं कि वह फोन पर काम करता है या नहीं: सही viewport meta टैग, zoom डिसेबल न हो, कोई Flash या प्लगइन टैग न हो, कोई छोटा फॉन्ट साइज या फिक्स्ड-विड्थ लेआउट न हो, रेस्पॉन्सिव इमेज एट्रिब्यूट और सही साइज के टैप टार्गेट। यह एक heuristic HTML चेक है, इसलिए हर रिजल्ट बताता है कि यह क्या साबित कर सकता है और क्या नहीं।
Mobile Friendly Checker
Technical SEO
इस टूल के बारे में
Google पहले किसी पेज का मोबाइल वर्जन इंडेक्स करता है, और ज्यादातर साइटों पर ज्यादातर विजिटर फोन पर आते हैं। एक पेज जिसे पढ़ने के लिए पिंच करना पड़े, जो स्क्रीन से बाहर निकल जाए, या जिसके लिंक टैप करने के लिए बहुत छोटे हों, विजिटर को सेकंडों में खो देता है। Google ने 2023 में अपना Mobile-Friendly Test बंद कर दिया, इसलिए साइट ओनर्स को असली फोन पर पेज देखने से पहले बेसिक्स को कैच करने का एक और तरीका चाहिए।
चेकर सर्वर जो HTML भेजता है उसे फेच करता है और उन सिग्नल्स को देखता है जो मोबाइल बिहेवियर तय करते हैं: viewport meta टैग और क्या यह zoom को ब्लॉक किए बिना width=device-width सेट करता है, प्लगइन टैग जैसे Flash जो फोन नहीं चला सकते, inline स्टाइल्स और स्टाइल ब्लॉक्स में 12 पिक्सल से कम फॉन्ट साइज, टेबल्स और फिक्स्ड विड्थ वाले एलिमेंट्स जो फोन स्क्रीन से चौड़े हों, srcset या sizes एट्रिब्यूट वाली इमेज, inline स्टाइल्स में मीडिया क्वेरीज, लिंक्स जिनका टेक्स्ट टैप करने के लिए बहुत छोटा हो, legacy फॉन्ट टैग्स, और AMP या mobile-alternate लिंक्स।
यह पेज को रेंडर नहीं कर सकता या external स्टाइलशीट्स नहीं पढ़ सकता, इसलिए यह नहीं माप सकता कि लेआउट असली में कैसा दिखता है, टेक्स्ट सच में पढ़ने योग्य है या नहीं, या एलिमेंट्स ओवरलैप करते हैं या नहीं। एक पेज जो यहां हर चेक को पास करता है वह फोन पर अभी भी अजीब हो सकता है, और एक पेज जो सब कुछ के लिए external CSS यूज करता है वह ऐसी वार्निंग ट्रिगर कर सकता है जिसके लायक नहीं है। रिजल्ट को एक चेकलिस्ट मानें, फिर पेज को असली फोन पर और Chrome DevTools डिवाइस मोड में खोलें।
अक्सर पूछे जाने वाले सवाल
हर पेज के पास कौन सा viewport meta टैग होना चाहिए?
स्टैंडर्ड है <meta name="viewport" content="width=device-width, initial-scale=1">। यह फोन को पेज को स्क्रीन विड्थ पर लेआउट करने के लिए कहता है, बजाय 980 पिक्सल डेस्कटॉप होने का नाटक करने और सब कुछ को सिकोड़ने के। इसके बिना, टेक्स्ट छोटा है और विजिटर को पढ़ने के लिए zoom करना पड़ता है।
क्या user-scalable=no से zoom डिसेबल करना बुरा है?
हां। यह खराब आंखों वाले लोगों को टेक्स्ट बड़ा करने से रोकता है और WCAG के तहत एक accessibility फेलियर है। मॉडर्न iOS वैसे भी इसे इग्नोर करता है। user-scalable=no और maximum-scale=1 को हटाएं जब तक पेज अपने zoom कंट्रोल्स वाला एक फुल-स्क्रीन ऐप न हो।
Google के Mobile-Friendly Test का क्या हुआ?
Google ने दिसंबर 2023 में इसे बंद कर दिया, साथ ही Search Console में मोबाइल usability रिपोर्ट भी। Chrome DevTools में Lighthouse और PageSpeed Insights अभी भी viewport, फॉन्ट साइज और टैप टार्गेट जैसी मोबाइल समस्याओं की रिपोर्ट करते हैं, और यह चेकर एक तेज पहली नज़र के लिए HTML-लेवल की बेसिक्स को कवर करता है।
टैप टार्गेट कितने बड़े होने चाहिए?
कम से कम 48 बाय 48 CSS पिक्सल, उनके बीच लगभग 8 पिक्सल की जगह के साथ, ताकि एक फिंगरटिप एक लिंक को हिट करे और उसके पड़ोसी को नहीं। नेविगेशन लिस्ट्स जो कसकर पैक किए गए लिंक्स और icon-only लिंक्स के साथ हों, आमतौर पर अपराधी होते हैं। लिंक पर padding, सिर्फ टेक्स्ट पर नहीं, टार्गेट को बड़ा करता है बिना लुक को बदले।
चेकर पेज को फोन पर कैसा दिखता है यह क्यों नहीं दिखाता?
क्योंकि यह HTML को रेंडर किए बिना और स्टाइलशीट्स डाउनलोड किए बिना पढ़ता है, जो चेक को तेज और सुरक्षित रखता है लेकिन इसका मतलब है कि यह फाइनल लेआउट नहीं देख सकता। विजुअल चेक के लिए, Chrome में पेज खोलें, F12 दबाएं, डिवाइस टूलबार को टॉगल करें और एक फोन चुनें, या बस इसे अपने फोन पर खोलें।