वेबसाइट के मोबाइल उपयोगिता की समस्याओं को कैसे ठीक करे

Google सर्च कंसोल द्वारा रिपोर्ट की गई आपकी साइट में पाई गई मोबाइल प्रयोज्य समस्या (mobile usability issue) को ठीक करने का तरीका हिंदी में जानें।

अगर आपकी वेबसाइट या ब्लॉग मोबाइल फ्रेंडली नहीं है तो Google इसे गंभीरता से लेता है। Google के अनुसार, आपकी वेबसाइट को सबसे पहले मोबाइल के लिए अनुकूलित किया जाना चाहिए।

Google स्पष्ट रूप से घोषित करता है कि किसी साइट की मोबाइल मित्रता एक महत्वपूर्ण रैंकिंग कारक है और इसके मूल खोज एल्गोरिदम का एक हिस्सा है।

जबकि पूरे वेब उपयोगकर्ताओं के 67% से अधिक लोग इंटरनेट पर कुछ भी खोजने के लिए अपने मोबाइल फोन का उपयोग करते हैं, यह स्वाभाविक है कि Google उन खोज इंजन परिणामों से वेबपृष्ठों को बाहर कर देगा जो मोबाइल के अनुकूल नहीं हैं।

जब भी आपको गूगल सर्च कंसोल से ईमेल मिलता है कि आपकी साइट में ‘मोबाइल उपयोगिता समस्या’ का पता चला है (mobile usability issue detected on your site), तो आपको तत्काल कार्रवाई करनी चाहिए।

इस तरह की समस्या को ठीक करना और अपनी वेबसाइट को त्रुटि मुक्त बनाना वास्तव में कोई कठिन समस्या नहीं है। आप इसे केवल चार चरणों का पालन करके कर सकते हैं।

मैं आपको बताता हूं कि आप Google सर्च कंसोल द्वारा रिपोर्ट किए गए मोबाइल उपयोगिता समस्या को कैसे ठीक कर सकते हैं।

त्रुटियों की विस्तार से जाँच करें

समस्या के विवरण को खोजने के लिए, या तो ईमेल में ‘मोबाइल उपयोगिता अक्षम करें’ बटन पर क्लिक करें या सीधे अपने Google सर्च कंसोल खाते पर जाएं। स्क्रीन के बाईं ओर टैब पट्टी पर, ‘एन्हांसमेंट्स’ समूह के तहत, मोबाइल उपयोगिता (Mobile Usability) टैब पर क्लिक करें।

आप मध्य स्क्रीन के ऊपर बाईं ओर निम्नानुसार त्रुटि जानकारी और त्रुटि प्रकार और गणना का विवरण पा सकते हैं:

अधिकतम छह प्रकार की मोबाइल उपयोगिता (Mobile Usability) त्रुटि हो सकती है:

1. कंटेंट स्क्रीन की तुलना में व्यापक है (content is wider than the screen)
2. क्लिक करने योग्य तत्व बहुत पास पास है (clickable elements too closure together)
3. टेक्स्ट पढ़ने के लिए बहुत छोटा है (text is too small to read)
4. असंगत प्लगइन का उपयोग हुआ है (incompatible plugin is used)
5. व्यूपोर्ट सेट नहीं है (viewport is not set)
6. व्यूपोर्ट की चौड़ाई डिवाइस की चौड़ाई पर सेट नहीं है (viewport is wider than the device)

हालांकि, पहले तीन प्रकार की त्रुटियां अधिक सामान्य हैं।

कोई भी त्रुटि पर क्लिक करके आप यह पता लगा सकते है कौन सा निर्दिष्ट पृष्ठ प्रभावित हैं। जब आप ‘त्रुटि रिपोर्ट’ पर क्लिक करते हैं, तो आप त्रुटि प्रकार के साथ प्रभावित पृष्ठ देखेंगे। जैसे की, निन्म स्क्रीनशॉट में दिखाया गया है।

प्रभावित पृष्ठों को जानने के लिए त्रुटि प्रकार पर क्लिक करें। त्रुटि के विवरण को जानने के लिए किसी भी पृष्ठ पर क्लिक करें। दायीं ओर एक पैनल खुलेगा। आपको नीचे स्क्रीनशॉट में दिखाए अनुसार लाइव पेज को टेस्ट करने का विकल्प मिलेगा।

‘टेस्ट लाइव पेज’ पर क्लिक करने के बाद, आप देख सकते हैं कि मोबाइल उपकरणों पर प्रभावित पृष्ठ कैसा दिखता है। आप HTML कोड भी ढूँढ सकते हैं, जहाँ त्रुटि मौजूद है।

त्रुटियों को ठीक करें

अब एक-एक करके त्रुटियों को ठीक करना शुरू करें। मैं आपको बताता हूँ कि आप अपनी वेबसाइट या ब्लॉग पर मोबाइल उपयोगिता (mobile usability) त्रुटियों को कैसे ठीक कर सकते हैं। यह कदम दो अलग-अलग प्रकार के वेबमास्टर्स के लिए अलग-अलग होगा। पहला, जो वर्डप्रेस का उपयोग कर रहे हैं और दूसरा, जिनके पास स्क्रैच से बनी वेबसाइटें हैं।

वर्डप्रेस साइट या ब्लॉग पर मोबाइल उपयोगिता त्रुटियों को कैसे ठीक करे?

चरण 1: अपने मोबाइल फोन के माध्यम से जांचें करें कि क्या Google द्वारा रिपोर्ट की गई समस्या वास्तव में मौजूद है। कभी-कभी Google स्मार्टफ़ोन बूट गलत रिपोर्ट करता है। यह कुछ नवीनतम अपडेट के कारण होता है। यदि आपको त्रुटि रिपोर्ट झूठी लगती है, तो कुछ भी न करें। समस्या कुछ दिनों में स्वतः हल हो जाएगी।

चरण 2: किसी भी त्रुटि को ठीक करने से पहले, अपनी वेबसाइट का बैकअप लें ताकि आप चरम स्थिति में पुनर्स्थापित कर सकें। इसे चेतावनी के रूप में लें।

चरण 3: अपनी साइट के लिए एक डिफ़ॉल्ट वर्डप्रेस थीम जैसे कि ट्वेंटी-नाइनटीन या ट्वेंटी-ट्वेंटी स्थापित करें, हालांकि आपको इसे सक्रिय करने की आवश्यकता नहीं है। यह आपकी वेबसाइट को बचाने के लिए चरम स्थितियों में स्वचालित रूप से सक्रिय हो सकता है। इसे भी चेतावनी के रूप में लें।

चरण 4: अपने थीम और सभी प्लगइन्स को नवीनतम संस्करण में अपडेट करें। ज्यादातर वर्डप्रेस त्रुटियां गैर-संगत थीम और प्लगइन के कारण उत्पन्न होती हैं।

चरण 5: अपने सर्च कंसोल अकाउंट में उपलब्ध मोबाइल उपयोगिता परीक्षण (mobile usability test) के माध्यम से किसी भी रिपोर्ट किए गए पृष्ठ का परीक्षण करें। त्रुटि का समाधान हो गया होगा। यदि समस्याएँ अभी तक हल नहीं हुई हैं तो अगले चरण का पालन करें।

चरण 6: ऐसे प्लगइन या थीम को निष्क्रिय कर दें जो महीनों से डेवलपर्स द्वारा अपडेट नहीं किया गया है। ऑउटडेटेड थीम और प्लगइन्स त्रुटियों का भंडार हैं। अब मोबाइल उपयोगिता परीक्षण के माध्यम से जांचें करे की क्या त्रुटि हल हो गई है। यदि अभी तक नहीं, तो अगले चरण का पालन करें।

चरण 7: सभी प्लगइन् को निष्क्रिय करें (आवश्यक को छोड़कर) और फिर से जांचें। संभावनाएं 95% हैं कि त्रुटि हल हो गई है। यदि समस्या अभी तक हल नहीं हुई है, तो इस लेख के उस खंड पर जाएँ, जहाँ मैंने बताया है कि सीएसएस और अन्य त्रुटियों को कैसे ठीक किया जाए। हालांकि वर्डप्रेस का नया उपयोगकर्ता के लिए यह थोड़ा मुश्किल है।

चरण 8: यदि त्रुटि हल हो गई है, तो एक के बाद एक प्लगइन को सक्रिय करें। हर बार जब आप एक प्लगइन सक्रिय करते हैं, तो त्रुटि की जांच करें। आपको एक प्लगइन मिलेगा जो समस्या का वास्तविक कारण है। इस प्लगइन को निष्क्रिय रखें, जब तक कि इसके लिए एक नया अपडेट उपलब्ध नहीं होगा।

किसी भी वेबसाइट की मोबाइल उपयोगिता त्रुटियों को कैसे ठीक करे?

यदि आपकी वेबसाइट स्क्रैच से बनी है, तो आपको Google खोज कंसोल द्वारा रिपोर्ट की गई मोबाइल उपयोगिता त्रुटियों को ठीक करने के लिए इन चरणों का पालन करने की आवश्यकता है। यह चरण उन वर्डप्रेस उपयोगकर्ताओं के लिए भी उपयोगी है, जिनकी समस्याओं को उपरोक्त चरणों के माध्यम से हल नहीं किया जा सकता है।

‘स्क्रीन की तुलना में कंटेंट व्यापक है – Content is wider than the screen’ त्रुटि ठीक करना

जब पृष्ठ पर संपूर्ण पाठ और चित्र देखने के लिए क्षैतिज स्क्रॉलिंग हो, तो Google बूट आपकी साइट को क्रॉल करने के बाद, इस समस्या को ‘स्क्रीन से सामग्री व्यापक (content is wider than the screen’ के रूप में समझाते हैं। यह एक सीएसएस (CSS) त्रुटि है। जबकि छवियों और अन्य सामग्री के लिए सीएसएस घोषणा ‘निरपेक्ष मूल्य (absolute)’ पर सेट है या छवियों को एक विशिष्ट स्क्रीन रिज़ॉल्यूशन पर सबसे अच्छा देखने के लिए सेट किया गया है, ऐसी त्रुटि उत्पन्न होती है। समस्या को ठीक करने के लिए, सीएसएस तत्वों के लिए ‘सापेक्ष (relative)’ और धनात्मक संख्याओं (positive numbers) के मानों को रीसेट करें।

‘क्लिक करने योग्य तत्व बहुत करीब है – Clickable elements too closer together’ त्रुटि ठीक करना

यह एक स्थान प्रबंधन त्रुटि है। ऐसी त्रुटि रिपोर्ट इंगित करती है कि एक वेबसाइट में बटन, नेविगेशन लिंक और अन्य स्पर्श तत्वों (touchable elements) को इतने करीब रखा गया है कि एक मोबाइल उपयोगकर्ता को अन्य आस-पास के स्पर्श तत्वों को टैप किए बिना वांछित स्पर्श तत्व को टैप करना मुश्किल लगता है। ऐसी त्रुटियों को ठीक करने के लिए, यह सुनिश्चित करें कि व्यूपोर्ट (view-port) सभी प्रकार की डिवाइस के लिए उत्तरदायी रूप से परिभाषित किया गया है। समाधान के लिए व्यूपोर्ट आरंभिक पैमाना 1.0 पर सेट करें। निन्म कोडिंग पैटर्न को इस्तेमाल करें।

 <meta name="viewport" content="width=device-width, initial-scale=1" />

‘पाठ्य पढ़ने के लिए बहुत छोटा है – Text is too small to read’ समस्या का समाधान करना

यह और एक CSS त्रुटि है और साथ ही यह व्यूपोर्ट (view-port) में मौजूद हो सकती है। Google खोज कंसोल में इस तरह की त्रुटि रिपोर्ट इंगित करती है कि मोबाइल उपयोगकर्ताओं को छोटे फ़ॉन्ट आकार के कारण वेबपेज के पाठ (text) को पढ़ने में मुश्किल होती है या सामान्य आंखों के लिए पठनीय होने के लिए उन्हें पाठ को ज़ूम करने की आवश्यकता होती है। इस तरह के मुद्दों को ठीक करने के लिए, व्यूपोर्ट को ठीक से सेट करें और उचित स्केलिंग के लिए फ़ॉन्ट सेट करें। पहले के मामलों की तरह, फ़ॉन्ट मान को सापेक्ष में स्केल करें। फ़ॉन्ट ‘न्यूनतम-चौड़ाई: 575 px’ आदर्श स्केलिंग करें।

‘असंगत प्लगिन उपयोग – incompatible plugin usage’ समस्या दूर करना

यह त्रुटि रिपोर्ट इंगित करती है कि प्रभावित पृष्ठ में उपयोग किया गया प्लगइन मोबाइल दृश्य के लिए संगत नहीं है। उदाहरण के लिए, फ्लैश मोबाइल डिवाइस में काम नहीं करता है। सुनिश्चित करें कि आप अपने स्क्रेच या वर्डप्रेस साइट के लिए नवीनतम रेस्पॉन्सिव प्लगइन्स का उपयोग कर रहे हैं। अगर कोई भी प्लगइन मोबाइल फ्रेंडली नहीं या पुराना है तो अनइंस्टॉल करें। यदि आप HTML के किसी पुराने संस्करण का उपयोग कर रहे हैं, तो इसे HTML5 में अपग्रेड करें। वर्डप्रेस साइटों के वेबमास्टर्स, नियमित रूप से प्लगइन्स को अपडेट करें। PHP का नवीनतम संस्करण ही उपयोग करें।

‘व्यूपोर्ट नॉट सेट – view-port not set’ त्रुटि ठीक करना

व्यूपोर्ट एक वेबसाइट का दृश्यमान परिधि है। यह रेस्पॉन्सिव वेबसाइट डिज़ाइन में एक महत्वपूर्ण तत्व है जो वेबपेजों के देखने वाले उपकरणों के स्क्रीन रिज़ॉल्यूशन के अनुसार स्केलेबल बनाता है। व्यूपोर्ट डिवाइस के आकार के साथ बदलता रहता है – यह मोबाइल उपकरणों में छोटा और डेस्कटॉप कंप्यूटर में बड़ा हो जाता है।

किसी भी व्यूपोर्ट संबंधित समस्या को हल करने के लिए, आपको अपनी वेबसाइट के प्रत्येक पेज के हेडर सेक्शन में निन्मनुसार व्यूपोर्ट मेटा टैग को जोड़ना होगा।

 <meta name="viewport" content="width=device-width, initial-scale=1" />

त्रुटि निवारण – ‘व्यूपोर्ट डिवाइस चौड़ाई से सेट नहीं है – Viewport is not set to device width’

यह त्रुटि रिपोर्ट इंगित करती है कि हालांकि हेडर अनुभाग में व्यूपोर्ट मेटा टैग को जोड़ा गया है, लेकिन width=device -width और initial-scale=1.0 भागों को परिभाषित नहीं किया गया है। इस तरह की त्रुटि एक निश्चित चौड़ाई के व्यूपोर्ट गुण को निर्धारित करती है। संपत्ति का प्रारंभिक-पैमाने पर initial-scale=1.0 जोड़ना, ब्राउज़र को सीएसएस पिक्सल और डिवाइस स्वतंत्र पिक्सल के बीच 1: 1 संबंध स्थापित करने का निर्देश देता है। यह टैग उपकरणों को देखने के झुकाव से संबंधित मुद्दों को भी ठीक करता है।

त्रुटियों का निराकरण मान्य करें (Validate Fixing of Errors)

अपने Google खोज कंसोल खाते में प्रवेश करें। मोबाइल प्रयोज्यता टैब पर क्लिक करें। प्रत्येक त्रुटि प्रकार पर क्लिक करें। अगली स्क्रीन पर, ‘वैलिडेट फिक्स’ पर क्लिक करें।

Google एक प्रारंभिक सत्यापन आरंभ करेगा और स्थिति ‘STARTED’ में बदल जाएगी।

हालाँकि, त्रुटि सुधार की पूर्ण पुष्टि में कुछ दिन लगते हैं। अगले क्रॉलिंग के दौरान Google इसकी पुष्टि करेगा।

दुर्लभ मामलों में, मोबाइल प्रयोज्य त्रुटियों को ठीक करने के आपके सभी प्रयास विफल हो सकते हैं। ऐसी स्थिति में, अगले चरण का पालन करें।

किसी विशेषज्ञ की मदद लें

यदि आप उपरोक्त चरणों का पालन करके रिपोर्ट की गई त्रुटियों को हल कर लिया तो आपने बहुत अच्छा काम किया है। हालाँकि ऐसा हो सकता है कि आप अपनी वेबसाइट के डेवलपर / डिज़ाइनर नहीं हैं और आपके लिए HTML टैग बनाना और CSS तत्वों को संपादित करना आसान नहीं है या समस्या को ठीक करने के आपके सभी प्रयासों के बाद सत्यापन विफल हो गया है। यह वह परिस्थिति है जहां आपको बाहरी मदद की आवश्यकता होती है।

Google खोज कंसोल आपको त्रुटि रिपोर्ट साझा करने और दूसरों से मदद लेने का विकल्प प्रदान करता है।

त्रुटि रिपोर्ट साझा करने के लिए, अपने खोज कंसोल खाते का ‘सत्यापन निर्धारण’ पृष्ठ देखें। शीर्ष दाईं ओर, शेयर टैब खोजें:

‘शेयर’ टैब पर क्लिक करें। एक डायलॉग बॉक्स दिखाई देगा। बॉक्स में, सुनिश्चित करें कि लिंक साझा करना सक्षम है। ‘कॉपी लिंक’ पर क्लिक करें और फिर ‘डन’ पर क्लिक करें।

अब, आप उन लोगों के साथ लिंक साझा कर सकते हैं, जिनके बारे में आपको विश्वास है कि वे आपके मुद्दों को हल करने में काफी सक्षम हैं। वैकल्पिक रूप से, आप हमारे संपर्क फ़ॉर्म के माध्यम से लिंक साझा करके आपकी सहायता करने के लिए हमें चुन सकते हैं।

ध्यान दें कि लिंक साझा करने पर चर्चा करते समय, बताए गए मुद्दे के विवरण को साझा करने पर विचार करें। अन्य जानकारी आपके खोज कंसोल के साथ साझा नहीं की जाएगी। Google आपकी गोपनीयता और सभी खाता जानकारी की सुरक्षा के लिए बहुत सावधान है।

अगर किसी भी तरह से हमने इस पोस्ट के माध्यम से आपकी मदद की, तो कृपया इसे साझा करना न भूलें। अपने एसईओ मुद्दे को हल करने के लिए आप हमसे कोई और मदद भी मांग सकते हैं। किसी भी प्रकार की आवश्यकता के लिए, कृपया नीचे टिप्पणी करें।