इस्तेमाल करने का तरीका
- पेज पर इस्तेमाल किया गया या करने की योजना वाला og:title और og:description दर्ज करें।
- og:image का पूरा URL पेस्ट करें। टूल इमेज लोड करके उसका वास्तविक पिक्सेल आकार बताता है।
- पेज का URL या डोमेन जोड़ें, फिर बड़े और छोटे कार्ड के पूर्वावलोकन की तुलना करें और चेतावनियों को ठीक करें।
यह कैसे काम करता है
जब कोई लिंक साझा करता है, तो ज़्यादातर सोशल नेटवर्क और चैट ऐप पेज से Open Graph टैग पढ़ते हैं: og:title, og:description, og:image और og:url। फिर वे एक कार्ड बनाते हैं। लगभग 1.91:1 अनुपात वाली चौड़ी इमेज आमतौर पर ऊपर इमेज वाले बड़े कार्ड में दिखती है; छोटी या चौकोर इमेज अक्सर टेक्स्ट के पास थंबनेल वाले छोटे कार्ड में दिखती है।
यह टूल लंबाई और इमेज की फ़्रेमिंग का अंदाज़ा लगाने में मदद के लिए कार्ड की दो सामान्य शैलियाँ दिखाता है। ब्राउज़र में इमेज लोड होने के बाद यह उसका मूल आकार जाँचता है: 200 × 200 px से छोटी इमेज कई ऐप में दिखाई नहीं जाती; 600 × 315 px से छोटी इमेज पर वे अक्सर छोटा लेआउट दिखाते हैं; और 1.91:1 से काफ़ी अलग अनुपात होने पर इमेज काटी जा सकती है। 1200 × 630 px आम तौर पर सुझाया जाने वाला आकार है, क्योंकि यह हाई-डेंसिटी स्क्रीन पर भी साफ़ दिखता है।
इस पूर्वावलोकन से यह ठीक-ठीक नहीं पता चलता कि कोई खास ऐप क्या दिखाएगा। ऐप के अनुसार शीर्षक और विवरण की दिखाई जाने वाली पंक्तियों की संख्या अलग होती है, कुछ ऐप विवरण नहीं दिखाते, और ज़्यादातर ऐप पहली बार लिंक साझा होने के बाद कुछ समय तक पूर्वावलोकन कैश में रखते हैं। इसलिए आपके टैग में किए गए बदलाव तुरंत दिखाई न दें। कई प्लेटफ़ॉर्म इस कैश को रीफ़्रेश करने के लिए अपना डिबगिंग टूल देते हैं।
उदाहरण
og:image के रूप में इस्तेमाल किया गया स्क्रीनशॉट
1440 × 900 के स्क्रीनशॉट का अनुपात 1.6:1 है। टूल अनुपात के बारे में चेतावनी देता है: बड़े कार्ड में ऊपर और नीचे का हिस्सा काटा जाएगा। 1200 × 630 का वर्शन एक्सपोर्ट करने से यह समस्या नहीं होगी।
इकलौती इमेज के रूप में लोगो
180 × 180 का लोगो 200 × 200 px से छोटा है, इसलिए कई ऐप कोई इमेज नहीं दिखाएँगे। इसके बजाय लोगो वाला बड़ा, चौड़ा बैनर इस्तेमाल करें।
शीर्षक की लंबाई जाँचें
90 अक्षरों वाला og:title बड़े कार्ड के पूर्वावलोकन में तीन पंक्तियों में दिखता है। इसे लगभग 60 अक्षरों तक छोटा करने से ज़्यादातर ऐप में कार्ड साफ़-सुथरा दिखता है।
अक्सर पूछे जाने वाले सवाल
Facebook, LinkedIn और X पर मेरा लिंक अलग-अलग क्यों दिखता है?
हर प्लेटफ़ॉर्म कार्ड को अपने लेआउट, क्रॉप और टेक्स्ट सीमाओं के अनुसार दिखाता है। कुछ विवरण दिखाते हैं, जबकि कुछ नहीं। यह पूर्वावलोकन किसी प्लेटफ़ॉर्म के डिज़ाइन की हूबहू नकल नहीं, बल्कि एक सामान्य अनुमान है।
मैंने og:image बदल दिया, लेकिन पुरानी इमेज अब भी दिख रही है। क्यों?
प्लेटफ़ॉर्म लिंक के पूर्वावलोकन कैश में रखते हैं। पेज को दोबारा लोड करने के लिए उस प्लेटफ़ॉर्म का शेयरिंग डिबगर इस्तेमाल करें या कैश की अवधि खत्म होने तक इंतज़ार करें। इमेज फ़ाइल का नाम बदलने से भी मदद मिलती है।
क्या मैं SVG या WebP इमेज इस्तेमाल कर सकता हूँ?
ज़्यादातर प्लेटफ़ॉर्म SVG का समर्थन नहीं करते। कई ऐप में WebP काम करता है, लेकिन सभी में नहीं; JPG या PNG सबसे सुरक्षित विकल्प हैं।
टूल मेरी इमेज लोड क्यों नहीं कर पा रहा है?
URL खोलने के लिए लॉगिन की ज़रूरत हो सकती है, वह इमेज के बजाय HTML पेज पर ले जा सकता है, या सर्वर दूसरी साइटों से आने वाले अनुरोधों को रोक सकता है। अगर ब्राउज़र यहाँ इमेज लोड नहीं कर पा रहा है, तो सोशल प्लेटफ़ॉर्म का क्रॉलर भी शायद उसे लोड न कर पाए।
गोपनीयता
आपका दर्ज किया गया टेक्स्ट आपके ब्राउज़र में ही रहता है। इमेज जाँचने के लिए आपका ब्राउज़र आपके दिए URL से सीधे इमेज का अनुरोध करता है (referrer भेजे बिना), इसलिए उस सर्वर को एक सामान्य इमेज अनुरोध दिखाई देता है। TIG Tools को कुछ नहीं भेजा जाता।