सामग्री पर जाएं
Mera News

प्रकाशक गाइड, अध्याय 2

मोबाइल और डेस्कटॉप पर पेज की बनावट

पिछली समीक्षा नवंबर 2026

पाठक जल्दी तय कर लेता है कि किसी न्यूज़ पेज पर रुकना सार्थक है या नहीं। हेडलाइन जल्दी दिखनी चाहिए, पेज स्थिर रहना चाहिए, और हर टैप का जवाब मिलना चाहिए। Google आपके पेजों का मोबाइल संस्करण ही इंडेक्स करता है, इसलिए Search के लिए भी फ़ोन का लेआउट ही गिना जाता है।

लक्ष्य के लिए आंकड़े

Google के Core Web Vitals आपको तीन माप और हर एक के लिए एक स्पष्ट लक्ष्य देते हैं।

मीट्रिकक्या मापता हैअच्छा
Largest Contentful Paint (LCP)लोडिंग2.5 सेकंड या कम
Interaction to Next Paint (INP)इनपुट पर प्रतिक्रिया200 मिलीसेकंड या कम
Cumulative Layout Shift (CLS)दृश्य स्थिरता0.1 या कम

पेज लोड का 75वां पर्सेंटाइल मापें, मोबाइल और डेस्कटॉप को अलग-अलग गिनते हुए। पेज तब पास होता है जब तीनों मीट्रिक उस पर्सेंटाइल पर लक्ष्य को पूरा करें।

असली विज़िट का फ़ील्ड डेटा इस्तेमाल करें: Search Console की Core Web Vitals रिपोर्ट, PageSpeed Insights या Chrome User Experience Report। Lighthouse प्रयोगशाला में उपयोगी है, लेकिन वह INP नहीं माप सकता और उसकी जगह Total Blocking Time बताता है।

Google कहता है कि कोई एक अकेला पेज एक्सपीरियंस सिग्नल नहीं है। वह यह ज़रूर कहता है कि उसके रैंकिंग सिस्टम Core Web Vitals का उपयोग करते हैं, और पेज एक्सपीरियंस के बाक़ी पहलू किसी साइट की रैंकिंग में सीधे मदद नहीं करते, हालांकि वे उसे इस्तेमाल में बेहतर बना सकते हैं।

दोनों स्क्रीन के लिए एक पेज

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

  • मुख्य कंटेंट
  • हेडिंग
  • स्ट्रक्चर्ड डेटा
  • Robots मेटा टैग (एक भटका हुआ noindex मोबाइल पेज को इंडेक्स से बाहर रख सकता है)

व्यूपोर्ट टैग से शुरू करें, फिर जांचें कि पेज 320 CSS पिक्सेल चौड़ाई पर बिना बगल में स्क्रॉल किए दोबारा सज जाता है।

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

मोबाइल पर

  • हेडलाइन, बायलाइन और दिखने वाली तारीख़ पहले रखें, फिर मुख्य इमेज या शुरुआती पैराग्राफ़।
  • लेख का टेक्स्ट HTML में रखें। टैप करने पर बाक़ी हिस्सा लाने वाला "आगे पढ़ें" बटन उस टेक्स्ट को Google से छिपा सकता है, जो क्लिक, स्वाइप या टाइप नहीं करता।
  • टच टार्गेट कम से कम 24 गुणा 24 CSS पिक्सेल के रखें, जो WCAG 2.2 AA का न्यूनतम है। मेन्यू और बंद करने के बटन के लिए 44 गुणा 44 रखें, जो AAA स्तर है।
  • स्टिकी हेडर छोटा रखें, और scroll-padding-top को उसकी ऊंचाई पर सेट करें ताकि फ़ोकस किया गया लिंक कभी उसके पीछे न छिपे।

डेस्कटॉप पर

  • बॉडी टेक्स्ट को प्रति पंक्ति 80 अक्षर या उससे कम रखें, या चीनी, जापानी और कोरियाई के लिए 40। यह WCAG AAA का दिशानिर्देश है, और हर पाठक की मदद करता है।
  • पैराग्राफ़ के भीतर कम से कम 1.5 की पंक्ति-दूरी रखें।
  • सहायक कंटेंट को साइडबार में रखें जो लोड होते समय लेख को हिलाए नहीं।

तेज़ लोडिंग

न्यूज़ पेज का सबसे बड़ा एलिमेंट अक्सर मुख्य इमेज होती है। उसे पेज का सबसे ज़रूरी अनुरोध मानें।

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • LCP इमेज को कभी लेज़ी-लोड न करें।
  • उसे शुरुआती HTML में रखें, ताकि ब्राउज़र उसे किसी भी स्क्रिप्ट के चलने से पहले ढूंढ ले।
  • fetchpriority="high" का उपयोग ज़्यादा से ज़्यादा एक या दो इमेज पर करें। इससे ज़्यादा पर यह मदद करना बंद कर देता है।
  • loading="lazy" का उपयोग केवल पहले व्यूपोर्ट के बाहर की इमेज और iframe के लिए करें।
  • रीडायरेक्ट कम करें, और पेज को कैश करने योग्य रखें। यूनिक URL पैरामीटर अनुरोधों को CDN के बजाय आपके ओरिजिन सर्वर पर वापस भेज सकते हैं।

स्थिर रहने वाला पेज

  • हर इमेज और वीडियो पर width और height सेट करें, और CSS में height: auto रखें।
  • srcset की हर इमेज के लिए एक ही आस्पेक्ट रेशियो रखें।
  • विज्ञापन, एम्बेड और iframe के लोड होने से पहले उनके लिए जगह आरक्षित करें। स्लॉट के आकार विज्ञापन वाला अध्याय में हैं।
  • कुकी नोटिस और साइन-अप प्रॉम्प्ट को ओवरले करें, या उनके लिए जगह आरक्षित करें, ताकि वे लेख को नीचे न धकेलें।
  • font-display: optional का उपयोग करें, या ऐसा फ़ॉलबैक फ़ॉन्ट जो आपके वेब फ़ॉन्ट के मेट्रिक्स से मेल खाने के लिए समायोजित हो।
  • transform से एनिमेट करें। top या left को एनिमेट करने से लेआउट शिफ़्ट होते हैं।

तुरंत प्रतिक्रिया

कुल इंटरैक्शन समय के तीन हिस्से होते हैं: आपके कोड के चलने से पहले का इंतज़ार, आपका कोड, और उसके बाद की पेंटिंग। 50 मिलीसेकंड से लंबा कोई भी टास्क लॉन्ग टास्क है।

  • इवेंट कॉलबैक में जितना हो सके उतना कम करें। पहले स्क्रीन अपडेट करें, फिर बाक़ी को टाल दें।
  • लंबे काम को scheduler.yield() से तोड़ें, और जो ब्राउज़र इसे सपोर्ट नहीं करते उनमें setTimeout पर लौटें।
  • DOM छोटा रखें। लेखों की लंबी सूचियां स्क्रीन के बाहर के आइटम को बाद में रेंडर करने के लिए content-visibility का उपयोग कर सकती हैं।
  • याद रखें कि हर iframe का अपना मुख्य थ्रेड होता है, इसलिए जांचें कि धीमा इंटरैक्शन किस फ़्रेम से आया।

लंबे पेज और इन्फ़िनिट स्क्रॉल

अगर कोई सेक्शन पेज बिना अंत के स्क्रॉल होता है, तो हर हिस्से को ?page=12 जैसे निरपेक्ष पेज नंबर के साथ अपना स्थायी URL दें, और उन पेजों को क्रम में लिंक करें। पाठक के आगे बढ़ने पर History API से पता अपडेट करें। Google स्क्रॉल या क्लिक नहीं करता, इसलिए लेज़ी-लोड होने वाला कंटेंट तब लोड होना चाहिए जब वह व्यूपोर्ट में आए, बिना किसी क्रिया की ज़रूरत के।

चेकलिस्ट

  • Search Console में LCP, INP और CLS जांचें, मोबाइल और डेस्कटॉप अलग-अलग।
  • अपना सबसे व्यस्त लेख टेम्पलेट फ़ोन पर खोलें और पक्का करें कि हेडलाइन और तारीख़ पहली स्क्रीन पर हैं।
  • पक्का करें कि लेख का पूरा टेक्स्ट सर्वर के भेजे HTML में है।
  • मोबाइल और डेस्कटॉप की तुलना करें: कंटेंट, हेडिंग, स्ट्रक्चर्ड डेटा और robots टैग मेल खाते हों।
  • मुख्य इमेज से loading="lazy" हटाएं और fetchpriority="high" जोड़ें।
  • हर इमेज और वीडियो में width और height जोड़ें।
  • हर विज्ञापन, एम्बेड और बैनर के लिए जगह आरक्षित करें।
  • scroll-padding-top को अपने स्टिकी हेडर के अनुसार सेट करें।
  • पेज को 320 CSS पिक्सेल चौड़ाई पर टेस्ट करें।
  • इन्फ़िनिट स्क्रॉल पेज के हर हिस्से को अपना URL दें।

स्रोत