ओपन ग्राफ प्रीव्यूअर
EXAMPLE WEBSITE
पेज शीर्षक उदाहरण
यह पेज सामग्री का एक उदाहरण विवरण है जो सोशल मीडिया पर शेयर करने पर दिखाई देगा।
https://example.com/page
पेज शीर्षक उदाहरण
यह पेज सामग्री का एक उदाहरण विवरण है जो सोशल मीडिया पर शेयर करने पर दिखाई देगा।
example.com
websiteOpen Graph Previewer का उपयोग कैसे करें
- 1
एक पेज URL दर्ज करें
जिस पेज को आप जाँचना चाहते हैं उसका पूरा URL website URL फ़ील्ड में पेस्ट करें।
- 2
OG डेटा फ़ेच करें
पेज का मौजूदा Open Graph टाइटल, विवरण, इमेज, और साइट नाम खींचने के लिए "Fetch OG Data" पर क्लिक करें।
- 3
ज़रूरत हो तो मैन्युअल संपादन करें
टाइटल, विवरण, इमेज URL, टाइप, और अन्य फ़ील्ड समायोजित करने और प्रीव्यू को अपडेट होते देखने के लिए Edit Manually पर स्विच करें।
- 4
प्रीव्यू देखें और टैग कॉपी करें
Facebook और Twitter कार्ड प्रीव्यू की समीक्षा करें, फिर जनरेट किए मेटा टैग कॉपी करके अपने पेज में जोड़ें।
Open Graph और लिंक प्रीव्यू की निश्चित मार्गदर्शिका
Open Graph प्रोटोकॉल क्या है
Open Graph प्रोटोकॉल मेटा टैगों का एक छोटा-सा समूह है, जिसे मूल रूप से Facebook ने पेश किया था, जो किसी भी वेब पेज को शेयर होने पर ख़ुद को एक समृद्ध वस्तु के रूप में वर्णित करने देता है। एक खाली नीले लिंक के बजाय, Open Graph टैग वाला पेज एक हेडलाइन, एक सारांश, और एक बड़ी छवि वाले कार्ड में बदल जाता है। ये टैग पेज के head में रहते हैं और एक og उपसर्ग के साथ property विशेषता का उपयोग करते हैं, उदाहरण के लिए og:title और og:image, जो मान रखने वाली एक content विशेषता के साथ जोड़े जाते हैं। चूँकि यह मानक व्यापक रूप से अपनाया गया, वही og टैग अब केवल Facebook से कहीं अधिक जगहों पर प्रीव्यू चलाते हैं।
Open Graph पूरी तरह सोशल और मैसेजिंग संदर्भों में प्रस्तुति के बारे में है। इसका सर्च रैंकिंग पर कोई सीधा असर नहीं होता, पर क्लिक-थ्रू और शेयरिंग पर इसका बड़ा असर होता है, क्योंकि एक आकर्षक कार्ड क्लिक और फिर से शेयर किया जाता है जबकि एक सादा या टूटा हुआ कार्ड स्क्रॉल करके छोड़ दिया जाता है।
मुख्य Open Graph टैग
पाँच properties अधिकांश काम करती हैं। og:title कार्ड की हेडलाइन है और यह आपके HTML title टैग से भिन्न हो सकती है, जिससे आप शेयर-के-लिए-अनुकूलित वाक्यांश लिख सकते हैं। og:description उसके नीचे की सहायक पंक्ति है। og:image थंबनेल है, और यह अब तक सबसे अधिक दृश्य वज़न उठाता है। og:url वह कैनोनिकल URL है जिसकी ओर कार्ड को इशारा करना चाहिए, जो शेयरों को एक ही पते पर समेकित रखता है तब भी जब वही सामग्री कई URL से पहुँचने योग्य हो। og:type वस्तु का वर्णन करता है, किसी सामान्य पेज के लिए आमतौर पर website और किसी ब्लॉग पोस्ट या समाचार कहानी के लिए article।
अतिरिक्त properties नतीजे को निखारती हैं: og:site_name स्रोत को लेबल करता है, og:locale भाषा घोषित करता है, और छवियों के लिए, og:image:width और og:image:height प्लेटफ़ॉर्म को छवि का डाउनलोड पूरा होने से पहले कार्ड का लेआउट तय करने में मदद करते हैं। इन्हें भरना एक अधिक भरोसेमंद, तेज़ी से रेंडर होने वाला प्रीव्यू तैयार करता है।
Twitter Cards और X आपके टैग कैसे पढ़ता है
X अपने ख़ुद के twitter card टैगों का उपयोग करता है, पर यह उदार है: अगर Twitter-विशिष्ट टैग मौजूद नहीं हैं, तो यह आपके Open Graph टैगों पर लौट आता है। मुख्य टैग है twitter:card, जहाँ summary_large_image वह बड़ी-छवि वाला लेआउट तैयार करता है जो अधिकांश ब्रांड चाहते हैं, जबकि summary टेक्स्ट के बगल में एक छोटा थंबनेल देता है। जब आप वहाँ अलग कॉपी चाहते हों तो आप X के लिए ख़ासतौर पर Open Graph मानों को बदलने हेतु twitter:title, twitter:description, twitter:image, और twitter:site भी सेट कर सकते हैं।
व्यवहार में, एक अच्छी रणनीति यह है कि व्यापक कवरेज के लिए पूरे Open Graph टैग सेट करें और बड़ी-छवि वाले लेआउट को चुनने के लिए केवल twitter:card जोड़ें, बाक़ी को X को Open Graph से विरासत में लेने दें। यह X पर समृद्ध कार्ड पाते हुए भी टैगों के दो लगभग एक जैसे समूह बनाए रखने से बचा देता है।
वे छवि आवश्यकताएँ जो कार्ड को बना या बिगाड़ देती हैं
og:image वही जगह है जहाँ अधिकांश प्रीव्यू सफल या विफल होते हैं। व्यापक रूप से अनुशंसित आकार 1200 गुणा 630 पिक्सेल है, लगभग 1.91 से 1 का अनुपात, जो Facebook, LinkedIn, और X पर बड़ी-छवि वाले कार्ड को बिना काटे साफ़-सुथरे ढंग से भर देता है। https से शुरू होने वाला एक निरपेक्ष, सार्वजनिक रूप से पहुँचने योग्य URL उपयोग करें; /images/card.png जैसे सापेक्ष पथ ही नंबर-एक कारण हैं कि कोई थंबनेल बस दिखता ही नहीं, क्योंकि स्क्रैपर के पास उन्हें हल करने के लिए कोई आधार URL नहीं होता। फ़ाइल को कुछ सौ किलोबाइट से नीचे रखें और किनारों के पास ज़रूरी टेक्स्ट रखने से बचें, क्योंकि अलग-अलग प्लेटफ़ॉर्म थोड़ा अलग तरीक़े से काटते हैं।
हर प्लेटफ़ॉर्म अपने ख़ुद के न्यूनतम और अधिकतम भी लागू करता है। बहुत छोटी छवियाँ एक नन्हे थंबनेल या बिल्कुल कोई छवि न होने पर लौट आती हैं, और बेहद बड़ी फ़ाइलें छोड़ दी जा सकती हैं। HTTPS पर परोसी गई एक अकेली 1200 गुणा 630 की JPEG या PNG पर टिके रहना हर जगह एकसमान रेंडरिंग के लिए सबसे सुरक्षित चुनाव है।
Facebook, LinkedIn, Discord, और Slack प्रीव्यू कैसे रेंडर करते हैं
जब कोई लिंक इनमें से किसी प्लेटफ़ॉर्म में पेस्ट किया जाता है, तो प्लेटफ़ॉर्म एक कार्ड रेंडर करने से पहले पेज लाने और head पढ़ने के लिए अपना ख़ुद का स्क्रैपर बॉट भेजता है। Facebook facebookexternalhit का उपयोग करता है, Slack और Discord के अपने बॉट हैं, और हर एक प्रीव्यू बनाने के लिए og टैगों को पार्स करता है। इसका अर्थ है कि प्रीव्यू वही दर्शाता है जो स्क्रैपर सर्वर-साइड पर देखता है, जो किसी लॉग-इन उपयोगकर्ता के देखे से भिन्न हो सकता है, ख़ासकर उन पेजों पर जो लॉगिन माँगते हैं या लोड होने के बाद JavaScript से अपने मेटा टैग रेंडर करते हैं।
चूँकि रेंडरिंग बॉट की ओर होती है, दो बातें मायने रखती हैं। पहली, आपके og टैग सर्वर द्वारा लौटाए गए आरंभिक HTML में मौजूद होने चाहिए, बाद में क्लाइंट-साइड स्क्रिप्टों द्वारा डाले हुए नहीं, जिन्हें स्क्रैपर शायद न चलाए। दूसरी, पेज बिना प्रमाणीकरण के बॉट तक पहुँचने योग्य होना चाहिए, वरना स्क्रैपर को आपकी सामग्री के बजाय एक लॉगिन दीवार मिलती है और प्रीव्यू ख़ाली लौट आता है।
कैशिंग, डीबगर, और दोबारा स्क्रैप करवाना
सोशल प्लेटफ़ॉर्म जिस प्रीव्यू को स्क्रैप करते हैं उसे आक्रामक रूप से कैश कर लेते हैं, कभी-कभी कई दिनों तक। यही उस क्लासिक शिकायत का स्रोत है कि अपडेट किए Open Graph टैग दिखाई नहीं देते: प्लेटफ़ॉर्म अब भी आपके बदलाव से पहले वाला कैश किया गया रूप परोस रहा है। इसका समाधान प्लेटफ़ॉर्म के अपने डीबगिंग टूल का उपयोग करके एक ताज़ा स्क्रैप करवाना है। Facebook का Sharing Debugger, LinkedIn का Post Inspector, और X का card validator सभी पेज को फिर से लाते हैं और आपको ठीक-ठीक दिखाते हैं कि उन्होंने कौन-से टैग पार्स किए, जो यह जाँचने का भी एक तरीक़ा है कि कोई कार्ड ग़लत क्यों दिखता है।
किसी पहले से शेयर किए गए URL पर title, विवरण, या छवि बदलते ही दोबारा स्क्रैप करवाना अपनी प्रकाशन-दिनचर्या का हिस्सा बना लें। इसके बिना, शुरुआती शेयर एक बासी या टूटे हुए कार्ड को बंद कर सकते हैं जो पेज के ख़ुद सही हो जाने के बाद भी लंबे समय तक बना रहता है। यह प्रीव्यूअर आपको प्रकाशित करने से पहले टैग जाँचने देता है, ताकि बाद में कम सुधारों की ज़रूरत पड़े।
सबसे आम Open Graph ग़लतियाँ
बार-बार होने वाली विफलताएँ अनुमानित हैं: एक ग़ायब og:image जिससे कार्ड का कोई थंबनेल नहीं होता, एक सापेक्ष छवि URL जिसे स्क्रैपर हल नहीं कर सकता, एक अन्यथा HTTPS पेज पर HTTP पर परोसी गई og:image (जिसे कुछ प्लेटफ़ॉर्म अस्वीकार करते हैं), और JavaScript द्वारा डाले गए टैग जिन्हें स्क्रैपर कभी नहीं चलाता। एक और आम ग़लती og:url को किसी ग़ैर-कैनोनिकल या स्टेजिंग URL की ओर इशारा करते छोड़ देना है, जो शेयर गिनती को बाँट देती है और उपयोगकर्ताओं को ग़लत जगह भेज सकती है।
एक सूक्ष्म ग़लती यह भूल जाना है कि Open Graph और आपका सर्च स्निपेट अलग-अलग हैं। og:title और og:description सोशल कार्ड को नियंत्रित करते हैं, जबकि HTML title टैग और मेटा विवरण Google नतीजे को नियंत्रित करते हैं, और इनका एक जैसा होना ज़रूरी नहीं। हर एक को उसके संदर्भ के लिए अनुकूलित करें: सोशल कार्ड के लिए चुटीला और जिज्ञासा-जगाने वाला, सर्च स्निपेट के लिए स्पष्ट और कीवर्ड-सचेत।
अक्सर पूछे जाने वाले प्रश्न
Open Graph टैग क्या हैं और ये क्यों मायने रखते हैं?
Facebook और Twitter प्रीव्यू कैसे काम करता है?
क्या मैं किसी मौजूदा पेज के बिना टैग जनरेट कर सकता हूँ?
किसी URL को फ़ेच करना विफल क्यों हो सकता है या कोई डेटा क्यों नहीं लौटा सकता?
क्या यह टूल मुफ़्त है, और मेरे दर्ज किए URL का क्या होता है?
संबंधित टूल्स
इन उपयोगी टूल्स के साथ आगे बढ़ें