Open Graph प्रीव्यू

Open Graph टैग क्या होते हैं?

Open Graph टैग पेज के head में og:title, og:description और og:image जैसे meta एलिमेंट हैं, जो सोशल नेटवर्क और चैट ऐप को बताते हैं कि पेज का लिंक शेयर होने पर क्या दिखाना है। प्रोटोकॉल (ogp.me) og:title, og:type, og:image और og:url को ज़रूरी बताता है; X अपने twitter:card टैग जोड़ता है और बाक़ी के लिए Open Graph पर लौटता है। शेयर scraper स्क्रिप्ट चलाए बिना सर्वर का भेजा HTML पढ़ते हैं और जो मिलता है उसे cache कर लेते हैं।

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

1. पेज URL डालें, या पेज का HTML पेस्ट करें (head काफ़ी है) — HTML पेस्ट करने पर कुछ फ़ेच नहीं होता और URL सिर्फ़ relative लिंक resolve करता है।
2. जो साइटें Googlebot या मोबाइल ब्राउज़र को अलग HTML देती हैं, उनके लिए चाहें तो उस रूप में फ़ेच चुनें।
3. «टैग प्रीव्यू करें» दबाएँ।
4. शेयर प्रीव्यू पढ़ें, फिर «छूटी प्रॉपर्टी» और «चेतावनियाँ» में दी बातें ठीक करें और दोबारा जाँचें।

Open Graph प्रीव्यू की खूबियाँ

• पेज को Mutqan सर्वर के ज़रिए (Mutqan चेकर, Googlebot या मोबाइल ब्राउज़र के रूप में) पढ़ता है, या पेस्ट किया HTML लेता है
• हर og:*, article:*, product:* और twitter:* टैग एक टेबल में दिखाता है जिसे CSV में डाउनलोड किया जा सकता है
• शेयर कार्ड जो टाइटल, विवरण, इमेज URL, इमेज alt टेक्स्ट, साइट नाम, लिंक और कार्ड टाइप लेगा, उसे टेक्स्ट के रूप में दिखाता है
• छूटी सुझाई गई प्रॉपर्टी बताता है: og:title, og:type, og:image, og:url, og:description और twitter:card
• इमेज जाँचता है: relative, http:// या data: URL, छूटी या छोटी चौड़ाई-ऊँचाई, SVG और असामान्य टाइप, कई og:image टैग
• प्लेटफ़ॉर्म जिन्हें काट देंगे वे टाइटल और विवरण, कहीं और इशारा करता og:url, अनजान og:type, गलत og:locale और @ के बिना twitter:site पर चेतावनी देता है
• इमेज कभी लोड नहीं करता और पेज रेंडर नहीं करता: सब कुछ टेक्स्ट और URL के रूप में दिखता है

इनपुट और आउटपुट

इनपुट

• पेज URL — Mutqan सर्वर के ज़रिए फ़ेच होता है, पाँच तक रीडायरेक्ट फ़ॉलो होते हैं; पेस्ट किए HTML में relative URL का आधार भी यही है।
• या पेस्ट किया पेज HTML — आपके ब्राउज़र में पढ़ा जाता है, कुछ फ़ेच नहीं होता।
• इस रूप में फ़ेच — Mutqan चेकर, Googlebot User-Agent या मोबाइल ब्राउज़र User-Agent।

आउटपुट

• शेयर प्रीव्यू (सिर्फ़ टेक्स्ट) — टाइटल, विवरण, घोषित साइज़ के साथ इमेज URL, इमेज alt टेक्स्ट, साइट नाम, लिंक URL और कार्ड टाइप, अक्षरों की गिनती के साथ।
• सारांश — Open Graph टैग, Twitter/X टैग, इमेज, छूटी प्रॉपर्टी और चेतावनियों की गिनती।
• छूटी प्रॉपर्टी और चेतावनियाँ — क्या जोड़ना है और प्लेटफ़ॉर्म क्या गलत दिखाएँगे।
• Open Graph टैग, Twitter/X कार्ड टैग और इमेज — हर टैग जैसा लिखा है, और हर घोषित इमेज उसके आयाम, टाइप और alt टेक्स्ट के साथ।

Open Graph प्रीव्यू का उदाहरण

पेस्ट किया head जिसमें og:type product, og:title, og:description, og:url https://shop.example.com/sale/running-shoes, og:image /img/sale-running-shoes.jpg (1200×630), twitter:card summary_large_image, twitter:site exampleshop

Title: Spring sale: 30% off running shoes (34 characters)
Image URL: /img/sale-running-shoes.jpg (1200×630 declared) · Site name: shop.example.com (from the host name) · Card type: summary_large_image
Open Graph tags 8 · Twitter/X tags 2 · Images 1 · Missing 0 · Warnings 3
og:image "/img/sale-running-shoes.jpg" is a relative URL; the Open Graph protocol requires an absolute URL and some scrapers do not resolve it.
No og:site_name; cards show the host name instead.
twitter:site "exampleshop" should be the @username.

Open Graph प्रीव्यू के नतीजे कैसे पढ़ें

«छूटी» 0 हो और इमेज की कोई चेतावनी न हो, तो टैग बड़े कार्ड के लिए ज़रूरी सब कुछ घोषित करते हैं; इमेज ख़ुद नहीं जाँची जाती, इसलिए उसका URL खोलकर देख लें कि वह लोड होती है। हर छूटी प्रॉपर्टी का अंदाज़ा प्लेटफ़ॉर्म लगाएँगे, और वह आमतौर पर बदतर होता है।

60–70 अक्षरों से लंबा टाइटल और लगभग 200 से लंबा विवरण ज़्यादातर कार्ड पर कट जाता है; 50 अक्षरों से छोटा विवरण खाली-सा लगता है। प्रीव्यू के पास अक्षरों की गिनती बताती है कि आप कहाँ हैं।

«साइट नाम» के पास «होस्ट नाम से लिया गया» का मतलब है og:site_name नहीं है और प्लेटफ़ॉर्म ब्रांड की जगह सिर्फ़ होस्ट दिखाते हैं।

relative, http:// या data: वाला इमेज URL कुछ प्लेटफ़ॉर्म पर फ़ेल होगा, भले ब्राउज़र उसे दिखा दें; URL absolute https होना चाहिए।

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

• कैंपेन से पहले लैंडिंग पेज जाँचें ताकि चैट और सोशल पोस्ट में शेयर होने पर लिंक सही दिखे।
• शेयर किया लिंक बिना इमेज या गलत टाइटल के क्यों दिखता है, यह जानें, और ठीक करने के बाद प्लेटफ़ॉर्म के debugger में दोबारा scrape करवाएँ।
• CMS या ई-कॉमर्स थीम जो टैग लेख और प्रोडक्ट पेज के लिए बनाती है, उनकी समीक्षा करें।
• User-Agent के हिसाब से HTML बदलने वाली साइटों पर मोबाइल ब्राउज़र और क्रॉलर को दिए टैग की तुलना करें।

समस्या निवारण

• ब्राउज़र के inspector में टैग दिखने पर भी कोई टैग नहीं मिला: वे लोड के बाद JavaScript से जुड़ते हैं। शेयर scraper भी स्क्रिप्ट नहीं चलाते; टैग सर्वर पर रेंडर करें।
• "The URL returned image/jpeg, not an HTML page": आपने इमेज का URL डाला है। वह पेज डालें जिसे शेयर करना है।
• पेज 403 या challenge पेज देता है: साइट ऑटोमेटेड क्लाइंट को रोकती है। इसकी जगह ब्राउज़र के "view source" से HTML पेस्ट करें।
• यहाँ इमेज सही है पर प्लेटफ़ॉर्म पर गलत: प्लेटफ़ॉर्म ने पुराना scrape cache किया है। उसके debugger से पेज दोबारा फ़ेच करवाएँ।

Open Graph प्रीव्यू के बारे में अक्सर पूछे जाने वाले सवाल

तकनीकी नोट्स

टैग meta एलिमेंट से property या name के हिसाब से पढ़े जाते हैं, और हर प्रॉपर्टी की पहली वैल्यू मानी जाती है, जैसा Open Graph प्रोटोकॉल (ogp.me) scraper के लिए बताता है। og:image:width, height, type, alt और secure_url अपने से पहले वाले og:image से जुड़ते हैं, इसलिए पेज कई इमेज उनके अपने आयामों के साथ घोषित कर सकता है।

प्रीव्यू वैसे ही fallback करता है जैसे ज़्यादातर शेयर scraper: og:title, फिर twitter:title, फिर title एलिमेंट; og:description, फिर twitter:description, फिर meta description; og:image, फिर twitter:image। relative URL पेज URL और किसी base एलिमेंट के सापेक्ष resolve होते हैं।

HTML एक tokenizer से पढ़ा जाता है जो न DOM बनाता है न स्क्रिप्ट चलाता है, 2 MB और 5,000 टैग की सीमा के साथ; फ़ेच किया पेज 512 KiB तक पढ़ा जाता है, जिसमें सामान्य पेज का head हमेशा आ जाता है।

सीमाएँ और कार्यप्रणाली

प्रीव्यू टेक्स्ट से बनाया गया अनुमान है, किसी प्लेटफ़ॉर्म के कार्ड की हूबहू कॉपी नहीं: हर प्लेटफ़ॉर्म कार्ड को अपने तरीक़े से crop, छोटा और व्यवस्थित करता है और बिना बताए बदलता है।

इमेज डाउनलोड नहीं होती, इसलिए उसका असली साइज़, फ़ॉर्मेट और उपलब्धता जाँची नहीं जाती — सिर्फ़ वही जो टैग घोषित करते हैं।

पेज Mutqan सर्वर से तीन तय User-Agent में से एक के साथ एक बार फ़ेच होता है। जो साइटें शेयर scraper (facebookexternalhit, Twitterbot, LinkedInBot) को अलग HTML देती हैं, वे उन्हें दूसरे टैग दिखा सकती हैं।

सुरक्षा और गोपनीयता

टैग आपके ब्राउज़र में पढ़े जाते हैं — आपके पेस्ट किए HTML से, या उस पेज से जिसे Mutqan सर्वर ने तीन तय User-Agent में से एक के साथ फ़ेच किया। सर्वर तक सिर्फ़ पेज URL पहुँचता है, और वह न URL रखता है न HTML।

पेज कभी रेंडर नहीं होता और उसकी इमेज कभी लोड नहीं होतीं, इसलिए पेज जाँचने भर से आपका ब्राउज़र उसके सर्वर या ट्रैकर से संपर्क नहीं करता।

संदर्भ

• The Open Graph protocologp.meog: meta प्रॉपर्टी जिनसे पेज शेयर होने पर अपना परिचय देता है: चार ज़रूरी (og:title, og:type, og:image, og:url), वैकल्पिक प्रॉपर्टी, इमेज की संरचित प्रॉपर्टी, ऑब्जेक्ट टाइप और दोहराई गई प्रॉपर्टी कैसे पढ़ी जाती हैं।
• HTML Living StandardWHATWGHTML भाषा, नामित कैरेक्टर रेफ़रेंस (एंटिटी) और ब्राउज़रों के पार्सिंग नियमों सहित।