इमेज SEO: Alt टेक्स्ट, फ़ाइल साइज़, फ़ॉर्मैट और लेज़ी लोडिंग

इमेज पेजों को समझने में आसान और ज़्यादा दिलचस्प बनाती हैं। ये Google Images और विज़ुअल सर्च फ़ीचर से विज़िटर भी ला सकती हैं। लेकिन ये आमतौर पर पेज का सबसे भारी हिस्सा होती हैं, और बिना ऑप्टिमाइज़ की गई इमेज साइटों के धीमा होने की सबसे आम वजहों में से एक हैं।

इमेज SEO का मतलब है दोनों पहलू सही करना: इमेज को सर्च इंजन के लिए समझने योग्य और सबके लिए सुलभ बनाना, और साथ ही उन्हें तेज़ रखना।

उपयोगी alt टेक्स्ट लिखें

alt एट्रिब्यूट किसी इमेज का शब्दों में वर्णन करता है:

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

alt टेक्स्ट के तीन काम हैं:

1. एक्सेसिबिलिटी – स्क्रीन रीडर इसे उन लोगों को पढ़कर सुनाते हैं जो इमेज नहीं देख सकते
2. विकल्प – अगर इमेज लोड न हो, तो ब्राउज़र इसे दिखाते हैं
3. समझ – सर्च इंजन इसे आसपास के टेक्स्ट के साथ मिलाकर समझते हैं कि इमेज में क्या है

अच्छा alt टेक्स्ट कैसे लिखें

• बताएँ कि इमेज में क्या है और वह पेज पर क्यों है
• खास रहें: “डेस्क के पास मोड़कर रखी लाल Brompton फ़ोल्डिंग साइकिल” “साइकिल” से बेहतर है
• संक्षिप्त रखें – आमतौर पर 125 कैरेक्टर से कम
• “की इमेज” या “की फ़ोटो” से शुरू न करें; स्क्रीन रीडर पहले से बताते हैं कि यह इमेज है
• प्रासंगिक कीवर्ड सिर्फ़ वहीं इस्तेमाल करें जहाँ वे इमेज का स्वाभाविक वर्णन करें

सजावटी इमेज

पूरी तरह सजावटी इमेज – डिवाइडर, बैकग्राउंड की सजावट – का alt एट्रिब्यूट खाली होना चाहिए: alt=""। यह स्क्रीन रीडर को उन्हें छोड़ने के लिए कहता है। एट्रिब्यूट को पूरी तरह छोड़ देना गलती है; तब कुछ स्क्रीन रीडर फ़ाइल का नाम पढ़ देंगे।

वर्णनात्मक फ़ाइल नाम इस्तेमाल करें

IMG_4821.jpg किसी को कुछ नहीं बताता। brompton-folding-bike-folded.jpg सर्च इंजन को एक और सुराग देता है। हाइफ़न से अलग किए गए छोटे अक्षरों वाले शब्द इस्तेमाल करें।

सही फ़ॉर्मैट चुनें

ज़्यादातर साइटों के लिए <picture> एलिमेंट के साथ WebP या AVIF देना (और ज़रूरत हो तो JPEG विकल्प के रूप में) सबसे बड़ा एकल सुधार है:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

ज़्यादातर CMS, इमेज प्लगइन और CDN इमेज को अपने-आप आधुनिक फ़ॉर्मैट में बदल सकते हैं।

रीसाइज़ और कम्प्रेस करें

एक आम गलती है कैमरे से सीधे 4,000 पिक्सेल चौड़ी फ़ोटो अपलोड करना और उसे 800 पिक्सेल चौड़ाई पर दिखाना। ब्राउज़र फिर भी पूरी फ़ाइल डाउनलोड करता है।

• इमेज को उस सबसे बड़े साइज़ तक रीसाइज़ करें जिस पर वे असल में दिखती हैं (ज़रूरत हो तो हाई-डेंसिटी स्क्रीन के लिए दोगुना)
• उन्हें कम्प्रेस करें – लगभग 75–85% की क्वालिटी सेटिंग आमतौर पर ओरिजिनल से अलग नहीं दिखती
• ज़्यादातर कंटेंट इमेज 150–200 KB से कम और हीरो इमेज आदर्श रूप से 300 KB से कम रखने का लक्ष्य रखें

रिस्पॉन्सिव इमेज दें

फ़ोन को डेस्कटॉप साइज़ की इमेज की ज़रूरत नहीं। srcset और sizes एट्रिब्यूट ब्राउज़र को सही फ़ाइल चुनने देते हैं:

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

WordPress और ज़्यादातर आधुनिक फ़्रेमवर्क इन्हें अपने-आप बनाते हैं।

लेआउट शिफ़्ट रोकने के लिए width और height सेट करें

अगर किसी इमेज में width और height एट्रिब्यूट नहीं हैं, तो ब्राउज़र नहीं जानता कि कितनी जगह छोड़नी है, इसलिए इमेज लोड होने पर कंटेंट उछलता है। इससे Core Web Vitals में से एक, Cumulative Layout Shift (CLS) को नुकसान होता है। हमेशा इमेज के डाइमेंशन शामिल करें (या CSS की aspect-ratio प्रॉपर्टी इस्तेमाल करें); रिस्पॉन्सिव CSS फिर भी उसे छोटा-बड़ा कर सकता है।

फ़ोल्ड के नीचे की इमेज लेज़ी-लोड करें

loading="lazy" ब्राउज़र को बताता है कि इमेज तभी लोड करे जब वह स्क्रॉल होकर नज़र में आने वाली हो:

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

इसे पेज में नीचे की इमेज के लिए इस्तेमाल करें, लेकिन मुख्य हीरो इमेज के लिए नहीं। पहली स्क्रीन की सबसे बड़ी इमेज को लेज़ी-लोड करने से Largest Contentful Paint में देरी होती है। उस इमेज के लिए इसकी जगह fetchpriority="high" पर विचार करें।

इमेज को खोजे जाने में मदद करें

• इमेज को प्रासंगिक टेक्स्ट के पास रखें, और जहाँ उपयोगी हो कैप्शन जोड़ें – Google इमेज समझने के लिए आसपास के कंटेंट का इस्तेमाल करता है
• अर्थपूर्ण इमेज के लिए CSS बैकग्राउंड की बजाय सामान्य <img> एलिमेंट इस्तेमाल करें, ताकि सर्च इंजन उन्हें ढूँढ सकें
• बड़ी इमेज लाइब्रेरी के लिए इमेज को अपने XML साइटमैप या इमेज साइटमैप में जोड़ें
• जहाँ प्रासंगिक हो, स्ट्रक्चर्ड डेटा में इमेज शामिल करें (Product, Article, Recipe)
• एक og:image सेट करें ताकि सोशल नेटवर्क पर शेयर करने पर अच्छा प्रीव्यू दिखे

इमेज SEO चेकलिस्ट

• हर अर्थपूर्ण इमेज पर वर्णनात्मक alt टेक्स्ट; सजावटी पर खाली alt
• वर्णनात्मक, हाइफ़न वाले फ़ाइल नाम
• WebP या AVIF फ़ॉर्मैट
• डिस्प्ले साइज़ पर रीसाइज़ और कम्प्रेस
• रिस्पॉन्सिव डिलीवरी के लिए srcset
• width और height एट्रिब्यूट सेट
• फ़ोल्ड के नीचे की इमेज के लिए लेज़ी लोडिंग, हीरो के लिए नहीं
• सर्वर या CDN पर लंबा कैश लाइफ़टाइम सेट

ई-कॉमर्स के लिए इमेज SEO

प्रोडक्ट इमेज बिक्री का बड़ा काम करती हैं। स्टोर के लिए:

• कई एंगल और इस्तेमाल में प्रोडक्ट दिखाएँ. Google Images और शॉपिंग नतीजे साफ़, हाई-क्वालिटी प्रोडक्ट फ़ोटो को तरजीह देते हैं।
• हर प्रोडक्ट के लिए एक जैसी, साफ़ मुख्य इमेज इस्तेमाल करें – यह अक्सर शॉपिंग नतीजों में इस्तेमाल होती है।
• ऐसा alt टेक्स्ट लिखें जो प्रोडक्ट और वेरिएंट पहचाने: “Trail Runner X महिलाओं का रनिंग शू, टील रंग में, साइड व्यू।”
• पूर्ण URL इस्तेमाल करके Product स्ट्रक्चर्ड डेटा में इमेज शामिल करें।
• ज़ूम होने वाली इमेज का बड़ा वर्ज़न सिर्फ़ ज़रूरत पड़ने पर लोड हो, पेज लोड पर नहीं।

ब्लॉग और पब्लिशर के लिए इमेज SEO

• जहाँ संभव हो ओरिजिनल इमेज इस्तेमाल करें। ओरिजिनल फ़ोटो, डायग्राम और चार्ट लिंक कमा सकते हैं और इमेज सर्च में अलग दिखते हैं; स्टॉक फ़ोटो हज़ारों साइटों पर इस्तेमाल होती हैं।
• जब इमेज कोई जानकारी देती हो, तो कैप्शन जोड़ें। कैप्शन पेज पर सबसे ज़्यादा पढ़े जाने वाले टेक्स्ट में से हैं।
• जटिल विषयों के लिए शेयर करने लायक डायग्राम और इन्फ़ोग्राफ़िक बनाएँ, और मुख्य जानकारी टेक्स्ट में भी लिखें।
• कम से कम 1200 पिक्सेल चौड़ी एक दमदार फ़ीचर्ड इमेज चुनें। Google Discover बड़ी, हाई-क्वालिटी इमेज को तरजीह देता है और आप max-image-preview:large robots सेटिंग से बड़े प्रीव्यू की अनुमति दे सकते हैं।

बैकग्राउंड इमेज और CSS

CSS background-image से सेट की गई इमेज सर्च इंजन को कंटेंट के रूप में नहीं दिखतीं और उनका कोई alt टेक्स्ट नहीं होता। उन्हें सिर्फ़ सजावट के लिए इस्तेमाल करें। अगर कोई इमेज अर्थ रखती है – कोई प्रोडक्ट, चार्ट, टीम फ़ोटो – तो <img> एलिमेंट इस्तेमाल करें।

इमेज CDN और ऑटोमैटिक ऑप्टिमाइज़ेशन

कई साइज़ और फ़ॉर्मैट को हाथ से संभालना जल्दी ही अव्यावहारिक हो जाता है। इमेज CDN और सेवाएँ (Cloudflare Images, Cloudinary, imgix, Bunny Optimizer और अन्य) और कई WordPress प्लगइन ये कर सकते हैं:

• इमेज को अपने-आप WebP या AVIF में बदलना
• हर डिवाइस के लिए तुरंत रीसाइज़ करना
• समझदारी से कम्प्रेस करना
• विज़िटर के करीब इमेज कैश करना

अगर आप इनमें से कोई इस्तेमाल करते हैं, तो जाँचें कि इमेज URL स्थिर और क्रॉल होने योग्य रहें, और CDN Googlebot को ब्लॉक न करे।

असर मापना

Google Search Console की Performance रिपोर्ट खोलें और सर्च टाइप को Image पर बदलें, ताकि देख सकें कि आपकी इमेज को कितने क्लिक और इम्प्रेशन मिलते हैं और किन क्वेरी के लिए। उसी टूल में Core Web Vitals ट्रैक करें ताकि पुष्टि हो कि इमेज ऑप्टिमाइज़ेशन Largest Contentful Paint और Cumulative Layout Shift सुधार रहा है।

आम गलतियाँ

1. कैमरे के साइज़ की फ़ोटो अपलोड करना और ब्राउज़र को उन्हें छोटा करने देना
2. गायब alt एट्रिब्यूट, या कीवर्ड से भरा alt टेक्स्ट
3. हीरो इमेज को लेज़ी-लोड करना
4. width और height न होना, जिससे लेआउट शिफ़्ट होता है
5. HTML में लिखने की बजाय इमेज में टेक्स्ट डालना – यह सर्च इंजन और स्क्रीन रीडर को नहीं दिखता और इसका अनुवाद नहीं हो सकता
6. robots.txt में इमेज फ़ोल्डर ब्लॉक करना

मुख्य बातें

• ऐसा alt टेक्स्ट लिखें जो बताए कि इमेज में क्या है और वह वहाँ क्यों है; सजावटी इमेज के लिए खाली alt इस्तेमाल करें।
• WebP या AVIF दें, डिस्प्ले साइज़ पर रीसाइज़ और कम्प्रेस की हुई।
• लेआउट शिफ़्ट रोकने के लिए हमेशा width और height सेट करें।
• फ़ोल्ड के नीचे की इमेज लेज़ी-लोड करें लेकिन मुख्य हीरो इमेज कभी नहीं।
• अर्थपूर्ण इमेज के लिए असली img एलिमेंट इस्तेमाल करें, प्रासंगिक टेक्स्ट के पास, वर्णनात्मक फ़ाइल नामों के साथ।
• इमेज से आने वाला ट्रैफ़िक मापने के लिए Search Console का Image search डेटा जाँचें।

अक्सर पूछे जाने वाले सवाल

क्या alt टेक्स्ट रैंकिंग में मदद करता है?

यह इमेज को Google Images में रैंक करने में मदद करता है और पेज में संदर्भ जोड़ता है। इसका मुख्य मकसद एक्सेसिबिलिटी है, और लोगों के लिए लिखा गया alt टेक्स्ट आमतौर पर सर्च इंजन के लिए भी सबसे अच्छा काम करता है।

मुझे WebP इस्तेमाल करना चाहिए या AVIF?

दोनों अच्छी तरह समर्थित हैं। AVIF अक्सर छोटी फ़ाइलें बनाता है; WebP तेज़ी से एन्कोड होता है और पुराने टूल्स में ज़्यादा समर्थित है। कई साइटें AVIF देती हैं और WebP विकल्प के रूप में।

क्या इमेज के फ़ाइल नाम मायने रखते हैं?

थोड़ा। वर्णनात्मक फ़ाइल नाम एक छोटा अतिरिक्त संकेत हैं और आपकी मीडिया लाइब्रेरी को संभालना आसान बनाते हैं।

क्या लेज़ी लोडिंग SEO के लिए अच्छी है?

हाँ, जब सही ढंग से इस्तेमाल हो। Google नेटिव loading="lazy" को सपोर्ट करता है। बस उन इमेज को लेज़ी-लोड न करें जो पेज पहली बार लोड होने पर दिखती हैं।