Open Graph इमेज: साइज, टिप्स और कोड उदाहरण
जब कोई आपकी पेज को Facebook, Twitter, या LinkedIn पर साझा करता है, तो Open Graph इमेजेज़ तय करती हैं कि क्या दिखेगा। गलत या कोई इमेज न होने से क्लिक-थ्रू रेट प्रभावित होता है।
यह गाइड आदर्श आकार, डिज़ाइन सिद्धांत, HTML कार्यान्वयन, और परीक्षण उपकरणों को कवर करता है — हर प्लेटफ़ॉर्म पर सही सोशल पूर्वावलोकन के लिए आवश्यक सब कुछ।
सामग्री सूची
Open Graph इमेज क्या हैं और क्यों महत्वपूर्ण हैं
Open Graph Facebook द्वारा पेश किया गया एक प्रोटोकॉल है जो आपको सोशल नेटवर्क पर साझा होने पर वेब पेज कैसे दिखेंगे, इसे नियंत्रित करने देता है। og:image मेटा टैग प्लेटफ़ॉर्म को पूर्वावलोकन थंबनेल के लिए इमेज बताता है।
जब कोई Facebook, Twitter, या LinkedIn पर लिंक साझा करता है, तो प्लेटफ़ॉर्म Open Graph मेटाडेटा प्राप्त करता है और एक पूर्वावलोकन कार्ड बनाता है। यह कार्ड — अपनी इमेज, शीर्षक, और विवरण के साथ — अक्सर क्लिक करने से पहले दिखने वाली एकमात्र चीज़ होती है।
अच्छी तरह से बनाई गई Open Graph इमेज क्लिक-थ्रू रेट को महत्वपूर्ण रूप से बढ़ा सकती है। गलत या अनुपयुक्त आकार की इमेज टूटे हुए पूर्वावलोकन, कटे हुए थंबनेल, या सामान्य प्लेसहोल्डर का कारण बनती है जो पेशेवर नहीं दिखता।
क्लिक-थ्रू रेट
सही आकार और उच्च कंट्रास्ट वाली OG इमेज वाली पेज बिना इमेज या कम गुणवत्ता वाले विकल्प से बेहतर प्रदर्शन करती हैं।
हर शेयर से अधिक क्लिक
ब्रांड पहचान
हर साझा लिंक पर एक समान दृश्य पहचान आपके दर्शकों के बीच परिचितता और विश्वास बनाती है, इससे पहले कि वे पेज पर आएं।
नेटवर्क में सुसंगत
SEO संकेत
प्रभावशाली पूर्वावलोकन से प्रेरित सामाजिक सहभागिता बैकलिंक्स और ट्रैफ़िक संकेत उत्पन्न करती है जो समय के साथ ऑर्गेनिक सर्च रैंकिंग को मजबूत करती है।
अप्रत्यक्ष रैंकिंग लाभ
प्लेटफ़ॉर्म-विशिष्ट इमेज आवश्यकताएँ
हर सोशल प्लेटफ़ॉर्म के अपने अनुशंसित आयाम, पहलू अनुपात, और फ़ाइल आकार सीमाएँ होती हैं। इन्हें सही रखना क्रॉपिंग, विकृति, और प्लेसहोल्डर से बचाता है।
| प्लेटफ़ॉर्म | अनुशंसित आकार | पहलू अनुपात | अधिकतम फ़ाइल आकार | फॉर्मैट |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
सार्वभौमिक सुरक्षित आकार: 1200 × 630 पिक्सेल
1.91:1 अनुपात में 1200 × 630 पिक्सेल की इमेज Facebook, LinkedIn, WhatsApp, Slack और अधिकांश अन्य प्लेटफ़ॉर्म पर काम करती है। Twitter के लिए, 16:9 क्रॉप का उपयोग होता है, इसलिए महत्वपूर्ण सामग्री को केंद्र में रखें ताकि कटाव न हो।
प्रभावी Open Graph इमेज के लिए डिज़ाइन सिद्धांत
इमेज सोशल फीड में छोटे आकार में दिखती है। पहले थंबनेल के लिए डिज़ाइन करें, पूर्ण आकार के लिए नहीं।
सबसे महत्वपूर्ण दृश्य तत्व — आपका लोगो, प्रमुख शीर्षक, या मुख्य चित्रण — इमेज के केंद्रीय 80% के भीतर रखें। प्लेटफ़ॉर्म अक्सर किनारों को क्रॉप करते हैं। किनारे के पास कुछ भी कट सकता है।
उच्च कंट्रास्ट
टेक्स्ट, अग्रभूमि तत्व, और पृष्ठभूमि के बीच मजबूत कंट्रास्ट का उपयोग करें। कम कंट्रास्ट वाली इमेजें व्यस्त सोशल फीड में प्रतिस्पर्धी पोस्ट के बीच गायब हो जाती हैं।
किसी भी आकार में पठनीय
टाइपोग्राफी स्पष्टता
यदि आपकी इमेज में टेक्स्ट है, तो बड़े, बोल्ड फॉन्ट्स का उपयोग करें — कम से कम 36px के बराबर — और दो से अधिक पंक्तियाँ न रखें। छोटे टेक्स्ट थंबनेल पर पढ़ने योग्य नहीं रहते।
छोटे में भी पठनीय रखें
ब्रांड सुसंगतता
हर OG इमेज में अपना लोगो या ब्रांड रंग पैलेट शामिल करें। हर साझा पोस्ट एक ब्रांड छाप होती है, भले ही कोई क्लिक न करे।
हर शेयर = ब्रांड टचपॉइंट
सही इमेज फ़ॉर्मेट चुनना
फोटोग्राफिक OG इमेज के लिए JPEG और टेक्स्ट, लोगो, या पारदर्शिता वाले ग्राफिक्स के लिए PNG का उपयोग करें। WebP का समर्थन बढ़ रहा है लेकिन सभी सोशल क्रॉलर में सार्वभौमिक नहीं है।
| फॉर्मैट | उपयुक्त | सोशल समर्थन | सामान्य फ़ाइल आकार | सिफ़ारिश |
|---|---|---|---|---|
| JPEG | फोटो, ग्रेडिएंट | सार्वभौमिक | 60 – 150 KB | फोटो के लिए डिफ़ॉल्ट |
| PNG | टेक्स्ट, लोगो, पारदर्शिता | सार्वभौमिक | 100 – 300 KB | ग्राफिक्स के लिए डिफ़ॉल्ट |
| WebP | दोनों, छोटे फ़ाइलें | Twitter, Slack (सभी नहीं) | 40 – 120 KB | केवल पूरक |
अपने OG इमेज के लिए 100–200 KB लक्ष्य रखें। छोटा बेहतर है, लेकिन इतना अधिक संपीड़ित न करें कि इमेज सोशल फीड में पिक्सेलेटेड दिखे। WhatsApp 300 KB की सख्त सीमा लागू करता है — यदि WhatsApp शेयरिंग महत्वपूर्ण है, तो सभी OG इमेज इस सीमा के भीतर रखें।
इमेज फ़ॉर्मेट के फायदे-नुकसान के बारे में अधिक जानने के लिए देखें: वेबसाइट इमेज ऑप्टिमाइज़ेशन गाइड । मौजूदा इमेज को कन्वर्ट करने के लिए, JPG से WebP गाइड रोज़ाना के वर्कफ़्लो को कवर करता है।
HTML कार्यान्वयन और मेटा टैग्स
अपने HTML के <head> तत्व के अंदर Open Graph मेटा टैग्स रखें। og:image टैग में पूर्ण URL होना चाहिए — सापेक्ष पथ सोशल क्रॉलर द्वारा समर्थित नहीं हैं।
न्यूनतम आवश्यक टैग्स हैं og:title, og:description, og:image, और og:url। twitter:card टैग Twitter के बड़े इमेज कार्ड फॉर्मेट को सक्षम करता है।
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">हमेशा og:image:width और og:image:height निर्दिष्ट करें। इनके बिना, प्लेटफ़ॉर्म पूर्वावलोकन बनाने से पहले इमेज डाउनलोड और जांचते हैं, जिससे प्रदर्शन धीमा होता है और प्लेसहोल्डर दिखने की संभावना बढ़ती है।
यदि आप Blazor का उपयोग करते हैं, तो Blazor SEO मेटाडेटा कंपोनेंट सभी Open Graph टैग्स को स्वचालित रूप से सांस्कृतिक-संवेदनशील URL के साथ संभालता है।
Open Graph इमेज का परीक्षण और डिबगिंग
सोशल प्लेटफ़ॉर्म Open Graph मेटाडेटा को तेजी से कैश करते हैं। टैग या इमेज अपडेट करने के बाद, आधिकारिक डिबगर टूल्स का उपयोग करके ताज़ा क्रॉल करवाएं और साझा करने से पहले पूर्वावलोकन सही दिखता है या नहीं जांचें।
Facebook शेयरिंग डिबगर
developers.facebook.com/tools/debug पर अपनी URL दर्ज करें ताज़ा मेटाडेटा प्राप्त करने, Facebook द्वारा चुनी गई इमेज देखने, और किसी भी सत्यापन चेतावनी या त्रुटि को डिबग करने के लिए।
कैश रीफ्रेश करें
Twitter कार्ड वैलिडेटर
cards-dev.twitter.com/validator का उपयोग करें यह देखने के लिए कि आपका Twitter कार्ड कैसा दिखेगा। 'Preview card' पर क्लिक करें थंबनेल, शीर्षक, और विवरण वास्तविक कार्ड फॉर्मेट में देखने के लिए।
पोस्ट करने से पहले पूर्वावलोकन करें
LinkedIn पोस्ट इंस्पेक्टर
linkedin.com/post-inspector पर LinkedIn का पोस्ट इंस्पेक्टर आपकी URL के लिए LinkedIn कैश को रीफ्रेश करता है और वर्तमान मेटाडेटा के साथ आपका पोस्ट पूर्वावलोकन कैसा दिखेगा, दिखाता है।
LinkedIn कैश रीफ्रेश करें
सामान्य गलतियाँ और उन्हें कैसे ठीक करें
अधिकांश Open Graph इमेज समस्याएँ कुछ सामान्य गलतियों में आती हैं। पता होना कि क्या देखना है, डिबगिंग का समय बचाता है।
- सापेक्ष URL। सोशल क्रॉलर सापेक्ष पथों को हल नहीं करते। og:image मान पूर्ण पूर्ण URL होना चाहिए जिसमें प्रोटोकॉल और डोमेन शामिल हो (https://yourdomain.com/path/image.jpg)।
- चौड़ाई और ऊँचाई टैग गायब। og:image:width और og:image:height के बिना, प्लेटफ़ॉर्म पूर्वावलोकन बनाने से पहले इमेज डाउनलोड और जांचते हैं। इसे रोकने के लिए दोनों जोड़ें।
- प्रमाणीकरण के पीछे की इमेज। क्रॉलर उन इमेज तक पहुँच नहीं सकते जिन्हें लॉगिन की आवश्यकता होती है या जिन्हें robots.txt द्वारा ब्लॉक किया गया है। OG इमेज को बिना किसी प्रमाणीकरण हेडर के सार्वजनिक रूप से उपलब्ध होना चाहिए।
- गलत पहलू अनुपात। 1.91:1 से बहुत भिन्न इमेज को क्रॉप किया जाएगा या ध्यान भटकाने वाले लेटरबॉक्स के साथ दिखाया जाएगा। प्रकाशित करने से पहले हमेशा इच्छित अनुपात पर परीक्षण करें।
- पुराना प्लेटफ़ॉर्म कैश। फ़ाइल नाम बदले बिना या क्वेरी स्ट्रिंग जोड़े बिना इमेज फ़ाइल अपडेट करने का मतलब है कि प्लेटफ़ॉर्म पुराना कैश्ड संस्करण दिखाएगा। फ़ाइल नाम अपडेट करें या प्लेटफ़ॉर्म डिबगर से रीफ्रेश करें।
Open Graph इमेज जनरेशन का स्वचालन
छोटी वेबसाइटों और ब्लॉग के लिए, प्रति पेज एक स्थिर OG इमेज सबसे सरल और विश्वसनीय तरीका है। बड़ी प्रकाशनों या ऐप्स में जहां हर पेज को अलग सोशल पूर्वावलोकन चाहिए, वहां डायनामिक जनरेशन व्यावहारिक होता है।
डायनामिक OG इमेज जनरेशन अनुरोध के समय या निर्माण के समय पेज के शीर्षक, विवरण, या अन्य सामग्री के आधार पर एक अनूठी इमेज बनाता है। परिणामस्वरूप हर पेज के लिए मैनुअल इमेज निर्माण के बिना एक अनूठा, ब्रांडेड पूर्वावलोकन मिलता है।
स्वचालन कब करें
जब आपके पास कई पेज हों जिन्हें अलग इमेज चाहिए, सामग्री अक्सर बदलती हो, या मैनुअल इमेज निर्माण आपके प्रकाशन के लिए पर्याप्त न हो, तब स्वचालन करें।
उच्च मात्रा या डायनामिक सामग्री
स्थिर इमेज कब उपयोग करें
अधिकांश पेजों — लैंडिंग पेज, गाइड, और सदाबहार लेख — के लिए, सावधानी से बनाई गई स्थिर इमेज गुणवत्ता और ब्रांड सुसंगतता में जनरेटेड से बेहतर होती है।
गुणवत्ता-प्रथम दृष्टिकोण
डायनामिक जनरेशन के लिए लोकप्रिय टूल्स में Cloudinary (URL पैरामीटर के जरिए ट्रांसफॉर्म), Vercel OG (एज पर React/HTML को इमेज में रेंडर करता है), और Puppeteer या Playwright आधारित स्क्रीनशॉट पाइपलाइन शामिल हैं।