Open Graph प्रीव्यू — शेयर करने से पहले अपने लिंक कार्ड देखें

Open Graph प्रीव्यू क्या है?

Open Graph प्रीव्यू (Open Graph प्रीव्यू) दिखाता है कि किसी वेब पेज का लिंक सोशल मीडिया और मैसेजिंग ऐप पर शेयर होने पर कैसा दिखेगा। जब आप WhatsApp, Facebook, LinkedIn, X या Telegram में लिंक पेस्ट करते हैं, तो ऐप पेज लाता है और उसके Open Graph और Twitter card मेटा टैग से एक कार्ड बनाता है: हेडलाइन, छोटा description, इमेज और वेबसाइट का नाम। अच्छा कार्ड क्लिक दिलाता है; खराब कार्ड — इमेज नहीं, कटा हुआ title या गलत टेक्स्ट — अनदेखा हो जाता है।

यह मुफ़्त टूल आपको शेयर करने से पहले कार्ड जाँचने देता है। अपने पेज का head HTML, या सिर्फ़ मेटा टैग, पेस्ट करें और यह Facebook, X, LinkedIn और WhatsApp के अनुमानित प्रीव्यू बनाता है। टैग छूटने पर प्लेटफ़ॉर्म जो फ़ॉलबैक इस्तेमाल करते हैं वही यह भी लगाता है, आपकी og:image लोड करके उसका असली पिक्सेल साइज़ और अनुपात जाँचता है, और ठीक-ठीक बताता है कि क्या ठीक करना है। कुछ भी अपलोड नहीं होता और पेस्ट किए HTML की कोई स्क्रिप्ट नहीं चलती।

मुख्य सुविधाएँ

• चार प्रीव्यू — Facebook, X (Twitter), LinkedIn और WhatsApp।
• असली जैसे फ़ॉलबैक — og: टैग न होने पर title टैग, meta description और canonical इस्तेमाल होते हैं।
• इमेज की जाँच — इमेज लोड करता है, साइज़, अनुपात और https का इस्तेमाल बताता है।
• टैग की सूची — कौन से Open Graph और Twitter टैग मिले।
• लंबाई की चेतावनी लंबे title और description के लिए।
• इमेज ओवरराइड — अपना HTML बदले बिना दूसरा इमेज URL आज़माएँ।
• सुरक्षित पार्सिंग DOMParser से।
• अप्रकाशित पेजों के लिए भी चलता है — अपने एडिटर या स्टेजिंग साइट से HTML पेस्ट करें।

अपने लिंक कार्ड का प्रीव्यू कैसे करें — स्टेप बाय स्टेप

1. अपना पेज खोलें और उसका सोर्स देखें (Ctrl + U, या राइट-क्लिक → View Page Source)।
2. head सेक्शन कॉपी करें — या सिर्फ़ वे लाइनें जो <meta property="og: और <meta name="twitter: से शुरू होती हैं।
3. बॉक्स में पेस्ट करें। प्रीव्यू और जाँचें तुरंत अपडेट होती हैं।
4. चेतावनियाँ ठीक करें अपने HTML या CMS में — जैसे og:image जोड़ें या title छोटा करें।
5. दोबारा टेस्ट करें अपडेट किए टैग पेस्ट करके।
6. प्लेटफ़ॉर्म के कैश रीफ़्रेश करें पब्लिश करने के बाद, Facebook Sharing Debugger, LinkedIn Post Inspector या दोबारा शेयर करके।

ज़रूरी टैग

शेयर इमेज सही कैसे रखें

• साइज़: 1200 × 630 पिक्सेल (1.91:1)। टूल आपकी इमेज नापता है और दूसरे अनुपात पर चेतावनी देता है।
• न्यूनतम: करीब 600 px चौड़ाई से कम होने पर कई प्लेटफ़ॉर्म सिर्फ़ छोटा थंबनेल दिखाते हैं।
• फ़ॉर्मेट और वज़न: JPG या PNG, बेहतर हो कुछ सौ KB — बहुत भारी इमेज मैसेजिंग ऐप में लोड नहीं हो सकतीं।
• सुरक्षित क्षेत्र: टेक्स्ट और लोगो को किनारों से दूर रखें; कुछ ऐप चौकोर या संकरे अनुपात में क्रॉप करते हैं।
• पूरा https URL: og:image पूरा पता होना चाहिए, जैसे https://example.com/og.jpg, जो बिना लॉगिन के सार्वजनिक रूप से खुले।
• छोटे साइज़ में भी पढ़ने लायक: फ़ोन पर बड़ा, मोटा टेक्स्ट सबसे अच्छा रहता है।

इमेज को 1200 × 630 में रीसाइज़ या क्रॉप करनी है? हमारे इमेज रीसाइज़र या इमेज क्रॉप टूल इस्तेमाल करें।

प्लेटफ़ॉर्म के बीच फ़र्क

Facebook बड़ी इमेज के साथ कैपिटल अक्षरों में डोमेन, title और अक्सर description दिखाता है। X बड़ी इमेज तभी दिखाता है जब twitter:card summary_large_image हो; वरना छोटा चौकोर थंबनेल, और नए डिज़ाइन में अक्सर इमेज पर सिर्फ़ डोमेन दिखता है। LinkedIn इमेज और title पर ज़ोर देता है, आमतौर पर description के बिना। WhatsApp चैट बबल के अंदर इमेज, title, description और डोमेन के साथ एक छोटा कार्ड दिखाता है। ये लेआउट समय-समय पर बदलते हैं, इसलिए प्रीव्यू को करीबी मार्गदर्शक मानें और ज़रूरी कैंपेन के लिए अंत में असली शेयर करके देखें।

पुराने प्रीव्यू क्यों टिके रहते हैं

प्लेटफ़ॉर्म एक ही पेज बार-बार न लाने के लिए लिंक प्रीव्यू कैश करते हैं — कभी-कभी कई दिन तक। अगर आपने og:image बदली और फिर भी पुरानी दिखती है, तो यह कैश है, आपके टैग नहीं। Facebook का Sharing Debugger और LinkedIn का Post Inspector आपको “दोबारा स्क्रेप” करने देते हैं। WhatsApp के लिए शेयर किए URL में कोई बेनुकसान क्वेरी स्ट्रिंग (जैसे ?v=2) जोड़ने से नया फ़ेच होता है। X समय-समय पर कार्ड रीफ़्रेश करता है। इमेज अपडेट करते समय उसका फ़ाइल नाम बदलना भी मदद करता है।

लिंक कार्ड क्यों मायने रखते हैं

ज़्यादातर लोग एक सेकंड में तय कर लेते हैं कि शेयर किए गए लिंक पर टैप करना है या नहीं। साफ़ इमेज, खास हेडलाइन और पहचाना हुआ ब्रांड नाम यह फ़ैसला आसान बनाते हैं; कटे हुए title वाला धूसर डिब्बा आगे स्क्रॉल कर देना आसान बनाता है। जो कारोबार WhatsApp ग्रुप, LinkedIn पोस्ट या Facebook पेज पर निर्भर हैं, उनके लिए अच्छे बने कार्ड कंटेंट में और कुछ बदले बिना क्लिक साफ़ बढ़ा सकते हैं। ये भरोसा भी बनाते हैं — एक जैसा ब्रांडेड कार्ड सादे URL से ज़्यादा असली लगता है।

URL की जगह HTML पेस्ट क्यों करें?

वेब ब्राउज़र पेजों को दूसरी वेबसाइटों का HTML पढ़ने से रोकते हैं (same-origin policy), इसलिए ब्राउज़र के अंदर चलने वाला टूल आपका पेज URL से तब तक नहीं ला सकता जब तक उसे किसी सर्वर से न गुज़ारा जाए। सोर्स पेस्ट करने से सब कुछ निजी रहता है, उन पेजों के लिए भी चलता है जो अभी लाइव नहीं हैं — localhost, स्टेजिंग या आपके CMS एडिटर में — और पब्लिश करने से पहले टैग के साथ प्रयोग करने देता है।

हल किया गया उदाहरण

इस पेज के नमूना टैग में og:title, og:description, og:image, og:url, og:site_name और twitter:card शामिल हैं। टूल मिले हुए og: टैग गिनता है (title, description, image, url और site_name) और एक Twitter टैग, हर प्लेटफ़ॉर्म पर og:title को कार्ड की हेडलाइन के रूप में दिखाता है, और शेयर इमेज लोड करके उसके आयाम बताता है। og:image की लाइन हटाएँ तो कार्ड चेतावनी के साथ “No image” पर चले जाते हैं; og:title हटाएँ तो हेडलाइन पेज के title “Free Online PDF Tools | Prompt Minds” पर लौट आती है। इस तरह प्रयोग करना यह समझने का सबसे तेज़ तरीका है कि प्लेटफ़ॉर्म क्या दिखाना चुनते हैं।

शेयर करने से पहले की चेकलिस्ट

• og:title करीब 60–70 अक्षरों से कम और पेज के लिए खास हो।
• og:description एक साफ़ वाक्य, करीब 200 अक्षरों से कम।
• og:image 1200 × 630, पूरा https URL, प्राइवेट विंडो में लोड हो।
• og:url को canonical पेज पते पर सेट करें।
• twitter:card को summary_large_image पर सेट करें।
• कैंपेन से पहले WhatsApp या LinkedIn में एक असली टेस्ट शेयर करें।

आम उपयोग

• ब्लॉग पोस्ट को WhatsApp ग्रुप में शेयर करने से पहले जाँचना।
• ई-कॉमर्स शेयरिंग के लिए प्रोडक्ट पेज देखना।
• विज्ञापन और सोशल कैंपेन के लैंडिंग पेज टेस्ट करना।
• “no image” या गलत title की समस्या पकड़ना।
• override फ़ील्ड से कई शेयर इमेज जल्दी तुलना करना।
• क्लाइंट को समझाना कि शेयर इमेज और title क्यों मायने रखते हैं।
• जाँचना कि CMS या SEO प्लगइन हर तरह के पेज पर वही टैग बनाता है जिनकी आप उम्मीद करते हैं।

इन आम गलतियों से बचें

• सापेक्ष og:image पाथ जैसे /assets/og.png — हमेशा पूरा https URL इस्तेमाल करें।
• लॉगिन या हॉटलिंक प्रोटेक्शन के पीछे की इमेज जिन्हें क्रॉलर डाउनलोड नहीं कर सकते।
• हर पेज के लिए एक ही इमेज — पेज-विशेष इमेज पर ज़्यादा क्लिक मिलते हैं।
• बहुत लंबे title जो फ़ोन पर कट जाते हैं।
• twitter:card भूल जाना — X एक छोटे कार्ड पर लौट जाता है।

समस्या-समाधान

• “Image could not be loaded” — देखें कि URL प्राइवेट ब्राउज़र विंडो में खुलता है; कुछ सर्वर दूसरी साइटों को इमेज लोड करने से रोकते हैं।
• कोई टैग नहीं मिला — पक्का करें कि आपने head सेक्शन पेस्ट किया है, पेज पर दिखने वाला टेक्स्ट नहीं।
• Title उम्मीद से अलग है — देखें कि कौन सा टैग इस्तेमाल हो रहा है: og:title, title टैग पर भारी पड़ता है।

संक्षिप्त शब्दावली

• Open Graph: लिंक प्रीव्यू के लिए og: मेटा टैग का प्रोटोकॉल।
• Twitter card: twitter: टैग से सेट होने वाला X का प्रीव्यू फ़ॉर्मेट।
• og:image: कार्ड पर दिखने वाली तस्वीर।
• स्क्रेपर / क्रॉलर: वह बॉट जिससे प्लेटफ़ॉर्म आपका पेज पढ़ता है।
• कैश: प्रीव्यू की सहेजी हुई कॉपी जो बाद के शेयर में दोबारा इस्तेमाल होती है।
• एस्पेक्ट रेशियो: चौड़ाई को ऊँचाई से भाग; सामान्य कार्ड के लिए 1.91:1।
• Sharing Debugger: लिंक प्रीव्यू जाँचने और रीफ़्रेश करने का Facebook का टूल।
• Post Inspector: प्रीव्यू जाँचने और रीफ़्रेश करने का LinkedIn का वैसा ही टूल।
• Canonical URL: पेज का पसंदीदा पता, जो अक्सर og:url में दोहराया जाता है।

यह Open Graph प्रीव्यू क्यों इस्तेमाल करें?

यह एक साथ चार बड़े प्लेटफ़ॉर्म का प्रीव्यू देता है, असली फ़ॉलबैक लगाता है, आपकी शेयर इमेज नापता है, हर चेतावनी समझाता है और अप्रकाशित पेजों को निजी रखता है — मुफ़्त और तुरंत।

Open Graph प्रीव्यू — मुख्य तथ्य

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

Prompt Minds के और टूल्स देखें

Open Graph प्रीव्यू हमारे दूसरे मुफ़्त टूल्स के साथ भी बढ़िया काम करता है। Prompt Minds का हर टूल पूरी तरह आपके ब्राउज़र में चलता है — साइन-अप की ज़रूरत नहीं, कोई अपलोड नहीं, कोई वॉटरमार्क नहीं। सभी मुफ़्त टूल्स देखें।