सामान्य गलतियां

इस पेज में कुछ सबसे सामान्य गलतियों के बारे में बताया गया है, जो वेबमास्टर मोबाइल के लिए डिज़ाइन करते समय करते हैं.

ब्लॉक की गई JavaScript, CSS और इमेज फ़ाइलें

सबसे अच्छी रेंडरिंग और इंडेक्सिंग के लिए, Googlebot को हमेशा आपकी वेबसाइट की ओर से इस्तेमाल की जाने वाली JavaScript, CSS और इमेज फ़ाइलें एक्सेस करने दें ताकि Googlebot आपकी साइट को औसत उपयोगकर्ता की तरह देख सके. अगर आपकी साइट की robots.txt फ़ाइल इन एसेट को क्रॉल करने की मंज़ूरी नहीं देती है, तो इससे सीधे हमारे एल्गोरिदम के आपकी सामग्री को अच्छी तरह से रेंडर और इंडेक्स करने के तरीके को नुकसान पहुंचता है. इसकी वजह से अच्छी रैंकिंग में गिरावट आ सकती है.

  1. Google Search Console में "Google के रूप में लाएं" सुविधा का इस्तेमाल करके पक्का करें कि Googlebot आपकी JavaScript, CSS और इमेज फ़ाइलों को क्रॉल कर सकता है. इससे आप यह देख पाएंगे कि असल में Googlebot आपकी सामग्री को किस तरह देखता और रेंडर करता है और इससे आपको अपनी साइट पर इंडेक्स करने की कई समस्याओं को पहचानने और उन्हें ठीक करने में सहायता मिलेगी.

  2. Google Search Console में अपनी robots.txt को देखें और उसकी जाँच करें.

  3. मोबाइल फ़्रेंडली होने की जाँच की मदद से अपने मोबाइल पेज की जाँच करके पता लगाएं कि क्या हमारे सिस्टम आपकी वेबसाइट को मोबाइल उपयोगकर्ताओं के सही पाते हैं या नहीं.

  4. अगर आप अपने मोबाइल पेज के लिए अलग-अलग यूआरएल का इस्तेमाल करते हैं, तो मोबाइल और डेस्कटॉप यूआरएल दोनों की जाँच करें, ताकि यह पुष्टि हो सके कि रीडायरेक्ट की पहचान हो गई है और उसे क्रॉल किया जा सकता है.

ऐसी सामग्री जो चलाई नहीं जा सकती

कुछ तरह के वीडियो या सामग्री मोबाइल डिवाइस पर चलाने लायक नहीं होती है, जैसे लाइसेंस वाला मीडिया या ऐसी सुविधाएं जिनके लिए Flash या ऐसे दूसरे प्लेयर की ज़रूरत होती है, जो आम तौर पर मोबाइल डिवाइस पर काम नहीं करते हैं. जब किसी वेबसाइट के पेज पर ऐसी सामग्री दिखाई देती है जो चल नहीं सकती, तो उसे देख कर उपयोगकर्ता बहुत परेशान होते हैं.

जब उपयोगकर्ता किसी ऐसे पेज पर जाते हैं जिसकी सामग्री मोबाइल डिवाइस पर काम नहीं करती है, तो उन्हें नीचे दिखाए गए गड़बड़ी संदेश जैसा संदेश दिखाई देता है:

वीडियो चलाने योग्य नहीं है

इससे उपयोगकर्ताओं को मोबाइल पर खराब अनुभव मिलता है!

मालिकाना हक वाले वीडियो प्लेयर का इस्तेमाल करने या मोबाइल पर काम न करने वाले फ़ॉर्मैट में सामग्री डालने के बजाय, हम वीडियो या ऐनिमेशन को शामिल करने के लिए HTML5 मानक टैग का इस्तेमाल करने की सलाह देते हैं.

Flash या दूसरे मल्टीमीडिया प्लेयर का इस्तेमाल रेंडर की गई ऐनिमेशन वाली सामग्री दिखाने के लिए, सभी वेब ब्राउज़र पर काम करने वाले HTML5 ऐनिमेशन का इस्तेमाल करें. Google Web Designer HTML5 में इन ऐनिमेशन को बनाना आसान करता है.

  • अपने सभी उपयोगकर्ताओं को अच्छा अनुभव देने के लिए ऐनिमेशन के लिए HTML5 मानकों का इस्तेमाल करें.
  • वीडियो एम्बेड करने की ऐसी सुविधा का इस्तेमाल करें जो सभी डिवाइस पर चलाने लायक हो.
  • वीडियो की ट्रांसक्रिप्ट उपलब्ध कराएं. इससे वे लोग आपकी साइट का इस्तेमाल कर पाएंगे जो सहायक ब्राउज़िंग तकनीकों का इस्तेमाल करते हैं या जिनके पास ऐसे ब्राउज़र हैं जो मालिकाना हक वाले वीडियो फ़ॉर्मैट नहीं चला सकते हैं.

ज़्यादा जानकारी के लिए, Google की वेब की बुनियादी बातें साइट पर वीडियो के इस्तेमाल से जुड़े सबसे अच्छे तरीकों के बारे में पढ़ें.

गड़बड़ी वाले रीडायरेक्ट

अगर आपके पास अलग-अलग मोबाइल यूआरएल हैं, तो आपको हर एक डेस्कटॉप यूआरएल पर मौजूद मोबाइल उपयोगकर्ता को सही मोबाइल यूआरएल पर रीडायरेक्ट करना होगा. दूसरे पेज पर (जैसे कि हमेशा होम पेज पर) रीडायरेक्ट करना गलत होगा.

उदाहरण:

  • आपकी डेस्कटॉप साइट के सर्वर को मोबाइल साइट के होम पेज पर रीडायरेक्ट करने के लिए कॉन्फ़िगर किया गया है. इस बात का कोई फ़र्क नहीं पड़ता कि असल में किस यूआरएल का अनुरोध किया गया है, भले ही मोबाइल साइट में डेस्कटॉप पेज को रीडायरेक्ट करने के लिए उसके जैसा ही पेज हो.
  • डेस्कटॉप साइट के आपके यूआरएल, ऐसे यूआरएल पैरामीटर के साथ डायनमिक रूप से जनरेट होते हैं जो उस जैसे मोबाइल यूआरएल के साथ अच्छी तरह मैप नहीं करते हैं. उदाहरण के लिए, अगर डेस्कटॉप साइट पर किसी खास तारीख की रेल समय-सारिणी (टाइम-टेबल) खोज रहे उपयोगकर्ता को मोबाइल साइट पर सामान्य समय-सारिणी की खोज वाले पेज पर रीडायरेक्ट कर किया जाएगा, तो वह बहुत परेशान हो जाएंगे. हमारा सुझाव है कि अगर आपके पास एक समान मोबाइल यूआरएल है, तो आप रीडायरेक्शन को सही तरीके से कॉन्फ़िगर करें ताकि उपयोगकर्ता उसी पेज पर पहुंचें जिसकी वे तलाश कर रहे हैं.

  • आपकी डेस्कटॉप साइट कुछ मोबाइल डिवाइस को रीडायरेक्ट करती है लेकिन बाकी डिवाइस को नहीं. उदाहरण के लिए, हो सकता है कि कोई साइट सिर्फ़ Android उपयोगकर्ताओं को मोबाइल साइट पर रीडायरेक्ट करे और iPhone या Windows Phone उपयोगकर्ताओं को रीडायरेक्ट न करे.

  • Google Search Console का इस्तेमाल करें. अगर हमें पता चलता है कि आपकी साइट का कोई भी पेज स्मार्टफ़ोन उपयोगकर्ताओं को होम पेज पर रीडायरेक्ट कर रहा है, तो हम आपको एक मैसेज भेजेंगे. यह मैसेज को पाने के लिए ज़रूरी है कि आप पुष्टि किए गए उपयोगकर्ता हों. हम Search Console के स्मार्टफ़ोन क्रॉल गड़बड़ियां सेक्शन में गड़बड़ियों वाले रीडायरेक्ट भी आपको दिखाएंगे. Search Console में हमने उदाहरण के लिए जो यूआरएल दिए हैं उनका इस्तेमाल करके, आपके सर्वर कॉन्फ़िगरेशन की समस्याओं को ठीक करना शुरू करें.

  • अपना सर्वर इस तरह सेट अप करें कि वह स्मार्टफ़ोन उपयोगकर्ताओं को आपकी स्मार्टफ़ोन साइट के समान यूआरएल पर रीडायरेक्ट करे.

  • अगर आपकी साइट पर मौजूद पेज का कोई समान स्मार्टफ़ोन वर्शन नहीं है, तो उपयोगकर्ताओं को स्मार्टफ़ोन साइट के होम पेज पर रीडायरेक्ट करने के बजाय उन्हें डेस्कटॉप पेज पर रखें. इस मामले में कुछ नहीं करना, कुछ गलत करने से बेहतर है.

  • प्रतिक्रियाशील वेब डिज़ाइन का इस्तेमाल करके देखें, जो डेस्कटॉप और स्मार्टफ़ोन के उपयोगकर्ताओं एक जैसी सामग्री देता है.

सिर्फ़-मोबाइल के लिए 404

कुछ साइटें, यूआरएल एक्सेस करने वाले डेस्कटॉप उपयोगकर्ताओं को सामग्री दिखाती हैं लेकिन मोबाइल उपयोगकर्ताओं के लिए गड़बड़ी वाला पेज दिखाती हैं.

सिर्फ़-मोबाइल 404

अगर आप देखते हैं कि कोई उपयोगकर्ता मोबाइल डिवाइस से डेस्कटॉप पेज पर जा रहे हैं और आपके पास अलग यूआरएल पर समान मोबाइल पेज है, तो उन्हें 404 या सॉफ़्ट 404 पेज देने के बजाय उस यूआरएल पर रीडायरेक्ट करें. इससे उनको बेहतरीन उपयोगकर्ता अनुभव मिलेगा. इसके साथ ही यह भी पक्का करें कि मोबाइल फ़्रेंडली पेज खुद ही कोई गड़बड़ी वाला पेज न हो.

अच्छा रीडायरेक्ट
  • Google Search Console का इस्तेमाल करें. अगर आप साइट के लिए पुष्टि किए गए उपयोगकर्ता हैं, तो हम आपको 'मैसेज केंद्र' में एक सूचना भेजेंगे.

  • अगर आपके पास किसी अलग यूआरएल पर स्मार्टफ़ोन साइट है, तो अपना सर्वर सेट अप करें ताकि वह स्मार्टफ़ोन उपयोगकर्ताओं को आपकी स्मार्टफ़ोन साइट पर समान यूआरएल पर रीडायरेक्ट करे.

  • अगर आप डायनमिक सेवा का इस्तेमाल करते हैं, तो पक्का करें कि आपके उपयोगकर्ता-एजेंट की पहचान सही ढंग से कॉन्फ़िगर की गई है.

  • अगर आपकी साइट पर ऐसा कोई पेज नहीं है जो स्मार्टफ़ोन पर भी काम करता है, तो उपयोगकर्ताओं को डेस्कटॉप पेज पर रखें. उपयोगकर्ता को गड़बड़ी पेज दिखाने के बजाय वह सामग्री दिखाना बेहतर है, जिसे वह खोज रहे हैं.

  • जब संभव हो प्रतिक्रियाशील वेब डिज़ाइन का इस्तेमाल करें. इस कॉन्फ़िगरेशन की मदद से आप उपयोगकर्ताओं को एक जैसी सामग्री दिखा सकते हैं, चाहे वे किसी भी डिवाइस का इस्तेमाल कर रहे हों.

  • Google Search Console में क्रॉल गड़बड़ियों की रिपोर्ट देखें; स्मार्टफ़ोन टैब उन पहचाने गए यूआरएल की एक सूची दिखाएगा जो 'सिर्फ़-स्मार्टफ़ोन 404' वाली गड़बड़ियां दिखाते हैं.

पेज पर अचानक दिखने वाले विज्ञापनों से बचें

कई वेबसाइट 'पेज पर अचानक दिखने वाले विज्ञापन' या ऐसे ओवरले दिखाती हैं जो उपयोगकर्ता के देखे जा रहे पेज की सामग्री को कुछ हद तक या पूरी तरह छिपा देते हैं. पेज पर अचानक दिखने वाले ये विज्ञापन, आम तौर पर मोबाइल डिवाइस पर वेबसाइट के बुनियादी ऐप्लिकेशन, मेल की सूची के लिए साइन-अप करवाने वाले फ़ॉर्म या विज्ञापनों का प्रचार करते हुए नज़र आते हैं, जिनसे उपयोगकर्ता का अनुभव खराब हो सकता है. कुछ मामलों में तो पेज पर अचानक दिखने वाले विज्ञापन को इस तरह डिज़ाइन किया जाता है कि उपयोगकर्ता के लिए उसे खारिज करना और पेज की असली सामग्री देख पाना मुश्किल हो जाता है. मोबाइल डिवाइस पर स्क्रीन की जगह सीमित होती है, जिसकी वजह से पेज पर अचानक दिखने वाला कोई भी विज्ञापन उपयोगकर्ता के अनुभव पर गलत ढंग से असर डालता है.

ऐप्लिकेशन डाउनलोड के लिए पेज पर अचानक दिखने वाले विज्ञापन

कई वेबमास्टर अपनी मोबाइल वेबसाइट पर आने वाले दर्शकों के सामने अपने कारोबार के बनाए ऐप्लिकेशन का प्रचार करते हैं. अगर इसमें सावधानी न बरती जाए, तो इसकी वजह से इंडेक्सिंग की समस्याएं खड़ी हो सकती हैं और वेबसाइट पर आने वाले लोगों को साइट का इस्तेमाल करने में परेशानी हो सकती है.

पेज पर अचानक दिखने वाले विज्ञापनों से बचें
पेज पर अचानक दिखने वाला यह विज्ञापन उपयोगकर्ता को काम पूरे करने से रोक रहा है.
ऐप्लिकेशन बैनर
एक बैनर जिसके ज़रिए उपयोगकर्ता, ऐप्लिकेशन को देखने के साथ-साथ अपना काम पूरा कर सकते हैं.
  • अपने ऐप्लिकेशन का पेज की सामग्री के मुताबिक प्रचार करने के लिए एक बैनर का इस्तेमाल करें. इस बैनर का इस्तेमाल नीचे बताए गए तरीकों से किया जा सकता है:

    • ब्राउज़र के साथ काम करने वाला बैनर जैसे कि Safari के लिए स्मार्ट ऐप्लिकेशन बैनर या Chrome के लिए खास ऐप्लिकेशन बैनर.
    • किसी सामान्य छोटे विज्ञापन से मिलता-जुलता एक HTML बैनर या इमेज, जिसे डाउनलोड के लिए सही ऐप्लिकेशन स्टोर से लिंक किया जाता है.
  • अगर आपके पास Android ऐप्लिकेशन है, तो ऐप्लिकेशन सूची इस्तेमाल करें: जब आपके ऐप्लिकेशन से इंडेक्स की गई सामग्री किसी खास क्वेरी के लिए प्रासंगिक हो, तो हम खोज नतीजों में एक इंस्टॉल बटन दिखाएंगे, ताकि उपयोगकर्ता वह सामग्री डाउनलोड कर सकें और सीधे आपके ऐप्लिकेशन के उस खास पेज पर जा सकें.

जब कोई वेबसाइट उपयोगकर्ताओं को अलग-अलग मोबाइल यूआरएल पर दिखाई जाती है तो एक आम चलन है कि डेस्कटॉप के लिए ऑप्टिमाइज़ किए गए वर्शन के लिंक दिए जाएं और इसी तरह डेस्कटॉप पेज का लिंक मोबाइल पेज पर दिया जाए. इसमें आम गड़बड़ी यह होती है कि लिंक ऐसे पेज पर ले जाते हैं जो प्रासंगिक नहीं हैं जैसे कि डेस्कटॉप साइट के होम पेज से मोबाइल पेज को लिंक करना.

  • अपने लिंक की जाँच करके यह पक्का करें कि वे सही अलग वर्शन के सही पेज पर ले जा रहे हैं.

धीमे मोबाइल पेज

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

Google PageSpeed Insights का इस्तेमाल करके यह पता लगाएं क्या आपके पेज पर ऐसी कोई समस्या है जिससे आपके पेज धीमे हो सकते हैं. इसके लिए “साइट लोड होने की रफ़्तार” सब-सेक्शन ध्यान से देखें. उन समस्याओं पर ध्यान देने की कोशिश करें जिनके साथ “ठीक किया जाना चाहिए” लिखा है

ज़्यादा जानकारी के लिए, देखें:

अपने व्यूपोर्ट को सही ढंग से सेट करें

क्योंकि आपकी साइट पर आने वाले लोग अलग-अलग स्क्रीन आकारों वाले कई तरह के डिवाइस का इस्तेमाल करते हैं, इसलिए व्यूपोर्ट मेटा टैग का इस्तेमाल करके आपके पेज को एक व्यूपोर्ट तय करना चाहिए. यह टैग ब्राउज़रों को बताता है कि पेज के आयाम और स्केलिंग को डिवाइस के मुताबिक किस तरह एडजस्ट किया जाना चाहिए. ये रही दो सामान्य समस्याएं:

  • तय चौड़ाई वाले व्यूपोर्ट का इस्तेमाल करना. इससे पेज सभी डिवाइस आकारों के लिए अच्छी तरह से फ़िट नहीं बैठता (और ऐसे बहुत से डिवाइस आकार हैं). ज़्यादा पढ़ें.
  • किसी अवास्तविक रूप से चौड़े कम से कम व्यूपोर्ट को मानना, जो छोटे डिवाइस का इस्तेमाल करने वाले उपयोगकर्ताओं को सामग्री पढ़ने के लिए क्षैतिज रूप से स्क्रोल करने के लिए मजबूर कर सकता है. ऐसा तब होता है जब पेज CSS घोषणाओं में सटीक आंकड़ों का इस्तेमाल करता है या ऐसी इमेज का इस्तेमाल करता है जिन्हें एक खास चौड़ाई (जैसे कि 980px) पर सबसे अच्छा दिखने के लिए डिज़ाइन किया गया है. इस गड़बड़ी को ठीक करने के लिए, पक्का करें कि CSS तत्वों के लिए मिलती-जुलती चौड़ाई और स्थिति मानों का इस्तेमाल करें और पक्का करें कि इमेज भी उसमें फ़िट बैठ सकें. ज़्यादा जानें.

छोटा फ़ॉन्ट आकार

किसी मोबाइल डिवाइस पर फ़ॉन्ट आकार को बहुत छोटा करने से बचें, क्योंकि इससे वेबसाइट पर आने वालों को पढ़ने के लिए “पिंच करके ज़ूम” करना होगा. अपने वेब पेज का व्यूपोर्ट तय करने के बाद, अपने फ़ॉन्ट आकारों को व्यूपोर्ट में सही तरीके से बड़ा-छोटा होने लायक सेट करें. पढ़ने लायक फ़ॉन्ट आकारों का इस्तेमाल करें में फ़ॉन्ट आकार के सबसे अच्छे तरीकों के बारे में ज़्यादा पढ़ें.

छूकर इस्तेमाल होने वाले एलिमेंट बहुत पास-पास होना

बटन और लिंक जैसे छूकर इस्तेमाल होने वाले एलिमेंट को एक-दूसरे के बहुत पास-पास इस तरह सेट करने से बचें कि मोबाइल उपयोगकर्ता किसी बगल वाली चीज़ पर टैप किए बिना अपनी पसंद की चीज़ पर आसानी से टैप न कर पाए. इन गड़बड़ियों को ठीक करने के लिए आपके बटनों और नेविगेशन लिंक का आकार और जगह ऐसी रखें जो आपके मोबाइल दर्शकों के लिए सही हों. टैप की जाने वाली जगहों को सही आकार दें में ज़्यादा पढ़ें.

निम्न के बारे में फ़ीडबैक भेजें...