Open Graph पूर्वावलोकन

Open Graph वास्तव में क्या है

Open Graph प्रोटोकॉल को Facebook ने 2010 में बनाया था, ताकि किसी भी वेब पृष्ठ को सोशल ग्राफ़ में एक «समृद्ध ऑब्जेक्ट» में बदला जा सके, संरचित मेटाडेटा का एक सेट जिसे अन्य एप्लिकेशन (मूल रूप से Facebook, अब LinkedIn, Slack, Discord, Microsoft Teams, iMessage, WhatsApp और दर्ज़नों और) पढ़कर एक प्रिव्यू कार्ड रेंडर कर सकते हैं जब कोई आपकी URL पेस्ट करे। आधिकारिक स्पेक ogp.me पर है और यह प्रोटोकॉल वेब पर लिंक साझा करने की वास्तविक lingua franca बन गया है।

बिना OG टैग के, सोशल प्लेटफ़ॉर्म आपके पृष्ठ को scrape करते हैं और अनुमान लगाते हैं: वे एक हेडिंग चुनते हैं, पहली छवि पकड़ लेते हैं जो उन्हें मिलती है, और उसे कार्ड कह देते हैं। परिणाम शायद ही कभी वही होता है जो आप चाहते हैं। OG टैगों के साथ आप शीर्षक, विवरण और छवि को नियंत्रित करते हैं, जो एक सुसज्जित लिंक और एक टूटे-दिखने वाले लिंक के बीच का अंतर है।

चार आवश्यक टैग (ogp.me के अनुसार)

आधिकारिक Open Graph स्पेक चार आवश्यक गुण परिभाषित करता है। एक Open Graph ऑब्जेक्ट के रूप में अर्हता प्राप्त करने के लिए, एक पृष्ठ को सभी चारों घोषित करने होंगे:

अनुशंसित वैकल्पिक टैगों में शामिल हैं og:description (एक या दो वाक्यों का सारांश), og:site_name (लेबल के रूप में आपकी साइट का नाम), og:locale (भाषा और क्षेत्र), और छवि आयाम संकेत og:image:width / og:image:height / og:image:alt। आयाम संकेत शामिल करना सोशल क्लाइंट्स को सही मात्रा में स्थान पूर्व-आवंटित करने देता है और छवि लोड होते समय layout shift से बचाता है।

Twitter / X Cards: वही विचार, थोड़े अलग टैग

X (पहले Twitter) का अपना मेटाडेटा namespace है, twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator, पर महत्वपूर्ण है, Twitter-विशिष्ट टैग गुम होने पर X OG टैगों पर वापस गिरता है। तो एक पृष्ठ जो केवल OG टैग शिप करता है, वह भी X पर एक कार्ड पाता है। दोनों जहाँ अलग होते हैं वह कार्ड प्रकार में है:

• twitter:card = summary, छोटा वर्गाकार thumbnail, शीर्षक, विवरण।
• twitter:card = summary_large_image, कार्ड के शीर्ष पर पूर्ण-चौड़ाई वाली छवि। सामग्री साझाकरण के लिए आधुनिक डिफ़ॉल्ट क्योंकि यह फ़ीड में अधिक दृश्य ध्यान आकर्षित करती है।
• app और player, क्रमशः ऐप इंस्टॉल और इनलाइन वीडियो के लिए।

नोट: cards-dev.twitter.com/validator पर स्टैंडअलोन Twitter Card Validator पूर्वावलोकन को X ने 2 अगस्त 2022 को हटा दिया। कार्ड सत्यापित करने का वर्तमान तरीका यह है कि Tweet Composer में एक नया ट्वीट शुरू करें, URL पेस्ट करें, और पूर्वावलोकन को रेंडर होने दें, आपको वास्तव में ट्वीट पोस्ट करने की ज़रूरत नहीं है। कुछ तृतीय-पक्ष उपकरण (यह वाला सहित) रेंडर हुए कार्ड का अनुमान लगाते हैं ताकि आप लाइव होने से पहले इटरेट कर सकें।

वास्तव में काम करने वाले छवि आयाम

कोई एक परफ़ेक्ट साइज़ नहीं है, पर 1200×630 छवि (1.91:1 आस्पेक्ट रेशियो) सबसे विश्वसनीय एकल दांव है, यह बड़े क्रॉपिंग के बिना हर जगह काम करती है। प्रति-प्लेटफ़ॉर्म सिफ़ारिशें:

महत्वपूर्ण पाठ और चेहरों को छवि के केंद्र के पास रखें, हर प्लेटफ़ॉर्म अलग ढंग से क्रॉप करता है और कोने में लोगो प्लेटफ़ॉर्म के UI overlays के पीछे ग़ायब हो सकता है।

आपका कार्ड कभी-कभी क्यों नहीं दिखता

यदि आपने OG टैग जोड़ दिए हैं पर पूर्वावलोकन अब भी टूटा या ख़ाली है, तो सामान्य संदिग्ध:

• HTTPS आवश्यक। Facebook और अधिकांश आधुनिक प्लेटफ़ॉर्म http:// छवि URL को अस्वीकार करते हैं। og:image को HTTPS पर परोसें।
• छवि सार्वजनिक रूप से उपलब्ध नहीं। प्रमाणीकरण के पीछे, IP allowlist द्वारा अवरुद्ध, या प्लेटफ़ॉर्म के क्रॉलर को 403 लौटा रही है। निजी ब्राउज़र विंडो में छवि URL खोलकर परीक्षण करें।
• छवि बहुत छोटी। प्लेटफ़ॉर्म के न्यूनतम (Facebook 200×200, LinkedIn 1200×627) से नीचे, कार्ड एक छोटे thumbnail या बिल्कुल बिना छवि पर वापस गिरता है।
• ग़लत आस्पेक्ट रेशियो। X पर summary_large_image के रूप में सबमिट की गई 1:1 वर्गाकार छवि केन्द्रित-क्रॉप होती है, अक्सर ख़राब तरह से।
• कैश। सोशल प्लेटफ़ॉर्म आपके OG मेटाडेटा को आक्रामक रूप से कैश करते हैं। टैग ठीक करने के बाद, Facebook के Sharing Debugger पर जाएँ और रीफ़्रेश करने के लिए «Scrape Again» पर क्लिक करें; LinkedIn का Post Inspector ऐसा ही करता है; X परिवर्तनों को अगली बार जब कोई URL पेस्ट करता है तब लेता है।
• Robots.txt सोशल क्रॉलर को अवरुद्ध करता है। सुनिश्चित करें कि facebookexternalhit, Twitterbot, LinkedInBot, Slackbot जैसे user agent आपके पृष्ठ और छवि को प्राप्त कर सकते हैं।
• सर्वर क्रॉलर को non-2xx लौटाता है। सोशल-बॉट user agents के लिए अपने सर्वर लॉग की जाँच करें।
• सापेक्ष छवि URL। og:image एक absolute URL होनी चाहिए (https://yoursite.com/og.jpg), कभी भी /og.jpg नहीं।

कैश की समस्या

एक बार जब सोशल प्लेटफ़ॉर्म आपके पृष्ठ को scrape करता है, तो मेटाडेटा कुछ अवधि के लिए कैश हो जाता है, सामुदायिक लोककथा इसे Facebook और LinkedIn के लिए लगभग 7 दिन बताती है, हालाँकि कोई भी प्लेटफ़ॉर्म सटीक TTL दस्तावेज़ नहीं करता। अपने OG टैगों को अपडेट करना कैश को स्वचालित रूप से रीफ़्रेश नहीं करता। दोबारा scrape करवाने के लिए, आधिकारिक उपकरणों का उपयोग करें: Facebook Sharing Debugger, LinkedIn Post Inspector। X अगली बार जब URL साझा होता है तब नए मेटाडेटा को लेता है। Slack और Discord fetch के समय OG टैगों के आधार पर अपने पूर्वावलोकनों को रीफ़्रेश करते हैं, इसलिए वे Facebook से तेज़ी से अपडेट होते हैं।

सामान्य og:type मान

og:type टैग सोशल प्लेटफ़ॉर्म को बताता है कि पृष्ठ किस प्रकार की ऑब्जेक्ट का प्रतिनिधित्व करता है। अधिकांश पृष्ठ website (डिफ़ॉल्ट) या article हैं; vertical-विशिष्ट मान प्लेटफ़ॉर्म को समृद्धतर कार्ड रेंडर करने देते हैं। स्पेक से:

• website, सामान्य पृष्ठों के लिए डिफ़ॉल्ट।
• article, ब्लॉग पोस्ट, समाचार। article:published_time, article:author, article:section, article:tag के साथ जोड़ी बनती है।
• book, book:author, book:isbn के साथ जोड़ी बनती है।
• profile, उपयोगकर्ता प्रोफ़ाइल पृष्ठों के लिए।
• video.movie / video.episode / video.tv_show / video.other, वीडियो सामग्री के लिए।
• music.song / music.album / music.playlist / music.radio_station, संगीत के लिए।

व्यवहार में लंबाई सीमाएँ

कोई भी प्लेटफ़ॉर्म शीर्षक या विवरण की लंबाई पर सख़्त सीमा लागू नहीं करता, पर हर एक एक बिंदु के बाद ट्रंकेट करता है:

• शीर्षक, सभी प्लेटफ़ॉर्म पर सुरक्षित रहने के लिए ~60 अक्षर के नीचे रखें; ~70 अधिकांश पर ट्रंकेट करता है। पहले 50 में महत्वपूर्ण संदेश।
• विवरण, ट्रंकेशन से पहले ~155–200 अक्षर के नीचे। मोबाइल पर कम (लगभग 100)। मुख्य जानकारी आगे रखें।
• छवि alt टेक्स्ट, स्क्रीन रीडर्स और अभिगम्यता-जागरूक क्लाइंट्स के लिए मौजूद होना चाहिए (og:image:alt); 100 अक्षर के नीचे।

JSON-LD vs Open Graph (वे अलग चीज़ें हैं)

एक सामान्य भ्रम: JSON-LD संरचित डेटा (schema.org शब्दावलियों के साथ) और Open Graph मेटा टैग अलग काम करते हैं। OG / Twitter Cards सोशल-शेयर पूर्वावलोकनों को नियंत्रित करते हैं, जो तब दिखता है जब कोई आपकी URL को Slack या Facebook में पेस्ट करता है। schema.org के साथ JSON-LD Google को आपके पृष्ठ को रिच सर्च परिणामों के लिए पार्स करने में मदद करता है, रेसिपी कार्ड, उत्पाद जानकारी, Google खोज में FAQ स्निपेट। दोनों अनुशंसित हैं और एक दूसरे को प्रतिस्थापित नहीं करते।

सामान्य ग़लतियाँ

1. एक सापेक्ष og:image URL का उपयोग। स्पेक एक absolute URL की माँग करती है। सापेक्ष पथ चुपचाप गिरा दिए जाते हैं।
2. हर पृष्ठ के लिए सामान्य साइट लोगो का उपयोग। OG छवि आपके कार्ड का नायक है, हर पृष्ठ एक अनूठी छवि का हक़दार है, आदर्श रूप से पृष्ठ की सामग्री से जुड़ी।
3. og:image:width और og:image:height भूलना। कुछ क्लाइंट स्थान पूर्व-आवंटित करते हैं और इन संकेतों के बिना छवि चूक जाते हैं।
4. summary_large_image twitter:card प्रकार गुम। इसके बिना, X वर्गाकार thumbnail वाले छोटे summary कार्ड पर डिफ़ॉल्ट होता है, अक्सर कम आकर्षक।
5. छवि के कोनों में मुख्य पाठ रखना। विभिन्न प्लेटफ़ॉर्म अलग ढंग से क्रॉप करते हैं। विषय और महत्वपूर्ण पाठ केंद्र के 80% में होने चाहिए।
6. टैग अपडेट करना पर कैश रीफ़्रेश न करना। हर बदलाव के बाद आधिकारिक Sharing Debugger / Post Inspector पर जाएँ।
7. HTTP छवि URL सबमिट करना। अधिकांश प्लेटफ़ॉर्म ग़ैर-HTTPS छवियों को अस्वीकार करते हैं; कार्ड बिना छवि के दिखेगा।
8. केवल og:title और og:description का उपयोग। og:image के बिना कार्ड अधिकांश प्लेटफ़ॉर्म पर एक खाली पाठ-केवल stub के रूप में रेंडर होता है।

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

<meta property="og:title"       content="Your Page Title" />
<meta property="og:type"        content="website" />
<meta property="og:url"         content="https://yoursite.com/page" />
<meta property="og:image"       content="https://yoursite.com/og.jpg" />
<meta property="og:description" content="A short summary of the page." />

संबंधित टूल