write

आज इस लेख में हम आपको Google Search Console में आने वाले Mobile Usability Error के बारे में जानकारी देने वाले हैं। जिसमें आपको पता चलेगा ब्लॉग में Mobile Usability क्या है, Mobile Usability Test कैसे करें, और यह एरर क्यों आते हैं।

बिना कोई प्लगिन और कोड का इस्तेमाल किए इन एरर को ठीक करने का परमानेंट सॉल्यूशन क्या हो सकता है। तो चलिए आर्टिकल को शुरू करते हैं बिना समय गंवाए – 

Mobile Usability क्या होती है

सबसे पहले यह जान लेना जरूरी है की Mobile Usability क्या होती है। सरल भाषा में कहें तो आपकी ब्लॉग वेबसाइट के कंटेंट को यूजर्स अपने मोबाइल डिवाइस में कितनी आसानी से नेविगेट कर पा रहे हैं। इसे Mobile Usability कहा जाता है। अगर कोई वेबसाइट मोबाइल यूजर फ्रेंडली है तो ब्लॉग वेबसाइट का कंटेंट ऑटोमैटिकली, मोबाइल स्क्रीन साइज के अनुसार अपना साइज बदल लेता है।

Mobile Usability का इस्तेमाल क्यों जरूरी है 

2016 में मोबाइल वेबसाइट यूजर्स से लगभग 43.3% की ट्रैफिक आई थी ओर ये संख्या लगातार बढ़ती जा रही थी। क्योंकि 2019 में 52.6% होने के बाद 2020 में 54.8% हो गई।

इसलिए वेबसाइट की Mobile Usability और स्पीड को Optimize करके मोबाइल यूजर्स को आकर्षित करने के लिए वेबसाइट का सरल और रिस्पॉन्सिव होना बहुत जरुरी हैं। इसके कुछ मुख्य बिंदु इस प्रकार हैं –

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

Mobile Usability Issues क्या हैं 

अगर ब्लॉग मोबाइल फ्रेंडली नहीं है, तो गूगल सर्च कंसोल में बार-बार Mobile Usability Issues देखने को मिलते हैं। यह सभी इश्यूज वेबसाइट के डिज़ाइन और Layout के मोबाइल फ्रेंडली नहीं होने के कारण क्रिएट होते हैं। इससे यूजर्स को वेबसाइट को नेविगेट करने में दिक्कत होती है और यूजर्स एक्सपीरियंस खराब हो जाता है। जिनमें से कुछ Issues यह हैं –

1. Text Too Small To Read 

यह Error तब देखने को मिलता है, जब रीडर्स को वेबसाइट पर कंटेंट के Text को पढ़ने में परेशानी होती है, क्योंकि रीडर्स को आपकी वेबसाइट पर Text काफी छोटा दिखाई देता है। इसीलिए कंटेंट को पढ़ने के लिए रीडर्स Zoom In करके देखते हैं।

2. Content Wider Than Screen

जब आपके ब्लॉग का कंटेंट मोबाइल स्क्रीन पर फिट नहीं होता, रीडर्स को कंटेंट को पढ़ते समय राइट या लेफ्ट में स्क्रीन को स्क्रॉल करना पढ़ता है। ऐसा बार बार होने से ब्लॉग पर यूजर्स एक्सपीरियंस खराब होने लगता है।

3. Clickable Elements Too Close Together

ज्यादातर यह Error तब दिखाईं देते हैं जब आपके ब्लॉग पर क्लिकेबल एलिमेंट एक दूसरे के बोहोत ज्यादा क्लोज होते हैं। जो मोबाइल की स्क्रीन पर एक दूसरे के आस पास नजर आते हैं, जिससे रीडर्स को एलिमेंट पर सिलेक्ट करने में दिक्कत आती है और वह गलत लिंक्स या एलिमेंट्स पर सिलेक्ट कर बैठते हैं।

4. Viewport Not Set

यह Issue किसी भी वेबसाइट में तब देखने को मिलता है जब वेबसाइट के Html कोड में Viewport मेटा टैग नहीं होता है। क्योंकि यह मेटा Tag वेबसाइट में मौजूद कंटेंट को यूजर डिवाइस स्क्रीन साइज़ के According फिट करने में मदद करता है।

जब Viewport कोड वेबसाइट में मौजूद नहीं होता है तब कंटेंट यूजर डिवाइस स्क्रीन साइज़ के According फिट नहीं हो पाता है, और यूजर्स को कंटेंट Zoom In और Zoom आउट करके देखना पड़ता है। जिसकी वजह से यूजर Experience पर बुरा असर होता है।

इन Errors की वजह से गूगल सर्च में वेबसाइट की रैंकिंग और ट्रैफिक पर बुरा असर पड़ सकता है। इसलिए ब्लॉग या वेबसाइट का मोबाइल रिस्पॉन्सिव होना बोहोत ज्यादा जरूरी होता है। इन सभी Errors को गूगल सर्च कंसोल में देखा जा सकता है, और इनको URL Inspection टूल या Mobile Friendly Test की मदद से चेक भी किया जा सकता है। 

Mobile Usability Test, कैसे करें

दो तरीकों का इस्तेमाल करके आप Mobile Usability Issue के बारे में जानकारी ले सकते हैं। वेबसाइट का इस्तेमाल कर सकते हैं-

• इसके लिए आपकों गूगल में Mobile Friendly Test लिखकर सर्च करना है।
• पहली वेबसाइट को ओपन करना है।
• उसमें अपनी ब्लॉग पोस्ट का URL पेस्ट करना है।
• इसके बाद Test Url पर सिलेक्ट करना है।
• अब जो भी Issue आपके ब्लॉग पोस्ट में होंगे वो यहां पर दिखाईं देंगे।

Google Search Console के इस्तेमाल कर सकते हैं –

इसके लिए अपनी वेबसाइट या ब्लॉग को गूगल सर्च कंसोल में सबमिट करके वेरिफाई करना जरूरी है। सर्च कंसोल के डैशबोड में Mobile Usability रिपोर्ट के ऑप्शन में आना है। इसमें ब्लॉग पर आने वाले Mobile Usability Issues के बारे में जानकारी मिलती है। इन Errors को फिक्स करने के बाद Google Search Console में आकर Validation Request को सिलेक्ट करना होता है। कुछ समय बाद गूगल सर्च कंसोल में Mobile Usability Issues का स्टेट्स अपडेट हो सकता है। 

WordPress में Mobile Usability Issues कैसे ठीक करें 

Mobile Usability Issues को ठीक करने के लिए आप ये कुछ तरीकों को अपना सकते हैं। 

1. Text Too Small To Read 

इस Error को ठीक करने के लिए आपको अपने वर्डप्रेस लॉगिन पैनल के डैशबोर्ड को खोल लेना है। अब आपको Appearance में जाकर कस्टमाइज में Typography सैटिंग्स को ठीक करना है। जिसमें बॉडी फॉन्ट साइज़, टाइटल, लोगो, हैडिंग, पैराग्राफ, हैडर, फूटर, आदि को ऑप्टिमाइज करना है।

आपकी वेबसाइट पर जितना भी Text मौजूद है। गूगल के अनुसार उसका फॉन्ट साइज़ 16px से कम नहीं रखना है। इससे रीडर्स को आपका कंटेंट पढने में और देखने में परेशानी नहीं होगी इसके अलावा अपनी थीम के कलर और इमेज को भी ऑप्टिमाइज करना है।  

2. Content Wider Than Screen

इस Error को फिक्स करने के लिए आपको थीम की Layout सेटिंग्स में जाकर Width को ठीक करना होगा। आप इसे फुल पर भी सेट कर सकते हैं आपको साइडबार और Widget की Width को 300px से कम रखना है।Width को ठीक करने के बाद आपकी वेबसाइट को डेस्कटॉप और मोबाइल में खोल कर देखें कि वेबसाइट पर मौजूद कंटेंट बिना लेफ्ट राईट स्क्रॉल किए पूरा नजर आ रहा है या नही। वेबसाइट का Content यूजर devices के अनुसार आटोमेटिक फिट हो जाना चाहिए।

3. Clickable Elements Too Close Together

इस Error को फिक्स करने के लिए अपने वर्डप्रेस लॉगिन पैनल के डैशबोर्ड में आकर Appearance पर सिलेक्ट करना है। Customize के ऑप्शन में जाकर Layout में जाना है इसके बाद प्राइमरी मेनू, सेकेंडरी मेनू में Menu Item Width, Menu Item Height और Sub Menu Item Height को सेट करना है। जैसे – 

प्राइमरी मेनू –

• Menu Item Width – 20px रख सकते हैं। 
• Menu Item Height – 50 से 55px या अपने अनुसार रखें। 
• Sub Menu Item Height -10px रख सकते हैं।

सेकेंडरी मेनू –

• Menu Item Width – 20px रख सकते हैं। 
• Menu Item Height – 20px या अपने अनुसार रखें।
• Sub Menu Item Height -10px रख सकते हैं।
• इसके अलावा Typography सेटिंग करते हुए बॉडी Line Height को 1.4 या 1.5 पर रख सकते हैं।

4. Viewport Not Set

इसके कारण भी Mobile Usability Issues देखने को मिलता है। इस Issue को फिक्स करने के लिए अपनी वर्डप्रेस वेबसाइट के डैशबोर्ड को खोल लेना है, और Appearance में कस्टमाइज में आना है। अब एडिशनल css में एक Syntax का इस्तेमाल करके कंटेंट, Font साइज़, इमेज़ साइज़ को Define करना होगा।

इस Viewport Code Syntax को आप आसानी से गूगल सर्च करके ले सकते हैं। आपको गूगल में “Viewport code” लिखकर सर्च करना है और आपको यह कोड मिल जायेगा।

इन चार Steps के अलावा आपको ध्यान रखना है कि हमेशा एक Responsive थीम का इस्तेमाल करें। क्योंकि Responsive थीम हमेशा यूजर डिवाइस के हिसाब से कंटेंट पेश करती है, और यह कंटेंट को यूजर डिवाइस के हिसाब से Resize कर देती है।

Blogger में Mobile Usability Issues कैसे ठीक करें 

Mobile Usability Issues को ठीक करने के लिए आप ये कुछ तरीकों को अपना सकते हैं, जो इस प्रकार हैं।

1. Text Too Small To Read 

Blogger.com Hindi में Mobile Usability Issues से रिलेटेड इस Error को ठीक करने के लिए आपको ब्लॉगर के डैशबोर्ड को खोल लेना है। इसमें आपको थीम में चेक करना है कि कस्टमाइज ऑप्शन में एडवांस सेटिंग में Font सेटिंग है या नहीं। अगर Font सैटिंग मिल जाती है तो पोस्ट टाइटल साइज़, पेज टेक्स्ट साइज़, गैजेट टाइटल साइज़ को 16px के Font साइज़ से कम नहीं रखना है।   

लेकिन अगर कस्टमाइज में Font के लिए एडवांस सेटिंग नहीं मिलती है तो आपको दूसरी Responsive थीम को इस्तेमाल करना होगा या तो Html कोड को Edit करना होगा। इसके अलावा अपनी थीम के कलर और इमेज को भी ऑप्टिमाइज करना है।  

2. Content Wider Than Screen

Blogger.com Hindi में Content Wider Than Screen fix करने के लिए, Layout सेटिंग्स में जाकर Width को ठीक करना होगा। 

जैसे – पेज Width, साइडबार Width, गैजेट Width आदि। आप इसे फुल पर भी सेट कर सकते हैं। आपको साइडबार और Widget की Width को 300px से कम रखना है। 

Width को ठीक करने के बाद आपकी वेबसाइट को डेस्कटॉप और मोबाइल में खोल कर देखें कि वेबसाइट पर मौजूद कंटेंट बिना लेफ्ट राईट स्क्रॉल किए पूरा नजर आ रहा है या नही। वेबसाइट का Content यूजर Devices के अनुसार आटोमेटिक फिट हो जाना चाहिए।

3. Clickable Elements Too Close Together

Blogger.com Hindi में इस Issue को ठीक करने के लिए, आपको Theme Customizer में जाकर एडवांस सेटिंग में Spacing को ठीक करना होगा।  

जैसे – Menu Item Width – 20px रख सकते हैं, Menu Item Height – 50 से 55px रख सकते हैं और Sub Menu Item Height -10px रख सकते हैं। 

इसके अलावा आपको Link List Spacing, Blog List Spacing, Label List Spacing, को ठीक करने के साथ इनके Font साइज़ को भी ठीक करना है।

नोट: किसी भी Text का Font साइज़ 16px से कम नहीं रखना है। इसके अलावा अगर आपकी थीम में एडवांस सेटिंग नहीं है तो आप दूसरी थीम का इस्तेमाल करें या तो अपनी थीम के Html कोड को Edit कर सकते हैं।

4. Viewport Not Set

Blogger.com Hindi में इस Issue को ठीक करने के लिए, आपको थीम के Edit Html ऑप्शन में जाना है और Viewport के कोड को थीम के Head के नीचे पेस्ट कर देना है।

Viewport Code को आप आसानी से गूगल सर्च करके ले सकते हैं आपको गूगल में “Viewport code” लिखकर सर्च करना है और आपको यह कोड मिल जायेगा।

Mobile Usability Issues के लिए बेस्ट प्रैक्टिस क्या है

Mobile Usability के लिए कुछ बेस्ट प्रैक्टिस के उदाहरण हैं –

• Responsive Design Use करें
• Page loading Speed Optimize करें
• Content Readability Improve करें
• Navigation Simplicity Ensure करें
• Touch-Friendliness Enhance करें

निष्कर्ष – Mobile Usability Issues

इस लेख में हमनें आपको बताया है कि – Mobile Usability Issues क्या हैं, Mobile Usability Issues को कैसे ठीक किया जा सकता है। ब्लॉग के लिए इसका इस्तेमाल क्यों जरूरी है, Mobile Usability Test कैसे करें। बिना किसी प्लगिन और कोड का इस्तेमाल किए Blogger और वर्डप्रेस में Mobile Usability Issues कैसे ठीक कर सकते हैं। 

अगर आपको भी ये समस्या देखने को मिल रही है तो आप इस तरीके से गूगल सर्च कंसोल में आए Mobile Usability के Error को परमानेंट ठीक कर सकते हैं। अंत तक पढ़ने के लिए आपका धन्यवाद राधे राधे।

FAQs

ये Google का एक Tool है, इस Tool से हम अपनी वेबसाइट की Mobile Usability के बारे में पता कर सकते हैं। अपने ब्लॉग पोस्ट का Mobile Usability Test कर सकते हैं। जिससे पता चलता है की हमारा ब्लॉग पोस्ट Mobile Friendly है या नहीं।