जब भी आप किसी वेब लिंक को फेसबुक पोस्ट में साझा करते हैं, किसी लेख को टेलीग्राम समूह में पेस्ट करते हैं, या किसी उत्पाद पेज को ट्विटर पर एक दोस्त को डीएम करते हैं, आप उम्मीद करते हैं कि एक सजीव विज़ुअल प्रीव्यू कार्ड दिखाई देगा। वह कार्ड—जिसमें एक साफ बैनर इमेज, आकर्षक हेडलाइन, और संक्षिप्त सारांश होता है—संयोग से नहीं बनता। इसे एक मानकीकृत वेब विनिर्देशन के माध्यम से बनाया जाता है जिसे ओपन ग्राफ प्रोटोकॉल कहा जाता है। लेकिन यदि आपकी वेबसाइट कोड में ये मेटा टैग नहीं हैं, तो सोशल प्लेटफ़ॉर्म एक बदसूरत, टूटी हुई ग्रे बॉक्स दिखाएगा या आपके पेज से कोई रैंडम थंबनेल चुन लेगा। ओपन ग्राफ टैग्स की कार्यप्रणाली सीखना वेब डेवलपर्स और तकनीकी मार्केटर्स के लिए आवश्यक है।
मूल रूप से फेसबुक द्वारा 2010 में पेश किया गया, ओपन ग्राफ प्रोटोकॉल को बाहरी वेब पेजों को सोशल ग्राफ नेटवर्क में एकीकृत करने के लिए डिज़ाइन किया गया था। ओपन ग्राफ से पहले, सोशल नेटवर्क को यह अनुमान लगाना पड़ता था कि किसी लेख के बारे में क्या है, कच्चे पैराग्राफ टेक्स्ट को स्क्रैप करके और HTML इमेज टैग्स को स्कैन करके, जिससे अक्सर शर्मनाक विज़ुअल प्रीव्यू उत्पन्न होते थे। आज, ओपन ग्राफ वैश्विक इंटरनेट मानक बन गया है जिसे लिंक्डइन, पिंटरेस्ट, ट्विटर, टेलीग्राम, डिस्कॉर्ड, स्लैक और व्हाट्सएप द्वारा समर्थित किया जाता है। इस तकनीकी गहरे विश्लेषण में, आप मुख्य OG टैग्स के लिए सटीक सूत्र सीखेंगे, इमेज आयाम आवश्यकताओं को समझेंगे, और अधिकतम सोशल एंगेजमेंट के लिए प्रीव्यू कार्ड्स को डिबग और ऑप्टिमाइज़ करने का तरीका खोजेंगे।
ओपन ग्राफ मेटाडेटा में महारत हासिल करके, आप सुनिश्चित करते हैं कि आपके डोमेन से साझा किया गया प्रत्येक लिंक आकर्षक, पेशेवर और सोशल शेयरिंग के लिए अनुकूलित दिखे।
सार्वजनिक सोशल मीडिया फ़ीड के बाहर, ओपन ग्राफ टैग यह भी नियंत्रित करते हैं कि लिंक निजी सहयोग सॉफ़्टवेयर और टीम संदेश उपकरणों जैसे स्लैक, माइक्रोसॉफ्ट टीम्स और डिस्कॉर्ड के अंदर कैसे प्रदर्शित होते हैं। जब एक टीम सदस्य आपका URL किसी कंपनी के स्लैक चैनल या डेवलपर डिस्कॉर्ड सर्वर में पेस्ट करता है, तो एप्लिकेशन का आंतरिक बोट वास्तविक समय में आपके ओपन ग्राफ मेटाडाटा को पार्स करता है, और आपके हेडलाइन, थंबनेल और सारांश स्निपेट को सीधे चैट स्ट्रीम में दिखाता है। उच्च गुणवत्ता वाला मेटाडाटा यह सुनिश्चित करता है कि आंतरिक हितधारक और सामुदायिक सदस्य तुरंत आपके लिंक के साथ जुड़ें।
ओपन ग्राफ प्रोटोकॉल क्या है?
ओपन ग्राफ प्रोटोकॉल एक संरचित मेटा टैग्स का सेट है जिसे वेब डेवलपर्स HTML डॉक्यूमेंट के <head> सेक्शन के अंदर रखते हैं। जब कोई स्वचालित क्रॉलर (जैसे facebookexternalhit या TelegramBot) आपकी पेज पर आता है, तो यह इन टैग्स को पार्स करके एक इंटरैक्टिव रिच प्रीव्यू ऑब्जेक्ट बनाता है।
ओपन ग्राफ टैग्स के बिना, साझा किया गया लिंक केवल सपाट टेक्स्ट होता है। ओपन ग्राफ टैग्स के साथ, आपका लिंक एक उच्च-दृश्यता वाला इंटरैक्टिव विज़ुअल कार्ड बन जाता है जो सोशल फीड्स में काफी अधिक क्लिक-थ्रू रेट बढ़ाता है।
मुख्य ओपन ग्राफ टैग जिन्हें आपको शामिल करना चाहिए
प्रत्येक सार्वजनिक वेब पृष्ठ में सभी प्रमुख प्लेटफार्मों पर सुसंगत रेंडरिंग सुनिश्चित करने के लिए चार मौलिक ओपन ग्राफ टैग शामिल होने चाहिए:
| मेटा प्रॉपर्टी टैग | सिन्टैक्स उदाहरण | तकनीकी उद्देश्य और दिशानिर्देश |
|---|---|---|
og:title |
<meta property="og:title" content="Page Title" /> |
आपकी सामग्री का शीर्षक; मोबाइल के लिए 60 अक्षरों के अंदर रखें |
og:description |
<meta property="og:description" content="Summary" /> |
दो-पंक्ति का सारांश स्निपेट; लक्ष्य 140–160 वर्ण |
og:image |
<meta property="og:image" content="https://..." /> |
आपके फीचर्ड प्रीव्यू थंबनेल के लिए पूर्ण HTTPS URL |
og:url |
<meta property="og:url" content="https://..." /> |
सामाजिक संकेतों को एकत्रित करने के लिए संसाधन का मानक URL |
og:type |
<meta property="og:type" content="article" /> |
सामग्री का प्रकार वर्गीकृत करता है (जैसे, वेबसाइट, लेख, वीडियो, प्रोफाइल) |
हमेशा सुनिश्चित करें कि og:url आपके कैनोनिकल लिंक टैग से मेल खाता हो, ताकि सोशल इंटरैक्शन काउंट और बैक लिंक सिग्नल URL वेरिएशन्स में विभाजित न हों।
आधुनिक डिस्प्ले के लिए ओपन ग्राफ इमेजेज़ का अनुकूलन करना
किसी भी प्रीव्यू कार्ड का चित्र अब तक का सबसे महत्वपूर्ण तत्व है। यह सुनिश्चित करने के लिए कि आपके ग्राफिक्स आधुनिक उच्च-रिज़ॉल्यूशन वाले स्मार्टफोन स्क्रीन पर स्पष्टता के साथ प्रदर्शित हों, इन तकनीकी विशिष्टताओं का पालन करें:
- मानक संकल्प (1.91:1): 1200x630 पिक्सल का उपयोग करें। यह फेसबुक, लिंक्डइन और ट्विटर सारांश कार्ड के लिए सार्वभौमिक मानक है।
- वाइडस्क्रीन विकल्प (16:9): 1200x675 पिक्सेल वीडियो सामग्री, यूट्यूब शेयर और आधुनिक उत्तरदायी ब्लॉग के लिए व्यापक रूप से इस्तेमाल किया जाता है।
- आयाम स्पष्ट रूप से घोषित करें: हमेशा
<meta property="og:image:width" content="1200" />और<meta property="og:image:height" content="630" />शामिल करें। यह सामाजिक क्रॉलर को कार्ड लेआउट को पहली बार स्क्रैप करते समय तुरंत रेंडर करने की अनुमति देता है बिना छवि के आयामों को असिंक्रोनस तरीके से डाउनलोड और गणना किए। - फ़ाइल आकार प्रतिबंध: फ़ाइल आकार 5MB से कम रखें। अधिकांश सोशल स्क्रैपर्स 5MB से अधिक होने वाली छवि डाउनलोड को नेटवर्क बैंडविड्थ को बचाने के लिए रोक देंगे।
- केंद्र महत्वपूर्ण पाठ: सोशल प्लेटफ़ॉर्म मोबाइल फीड्स पर और डेस्कटॉप साइडबार पर प्रिव्यू ग्राफिक्स को अलग तरीके से क्रॉप करते हैं। सभी महत्वपूर्ण लोगो, टेक्स्ट हेडिंग और चेहरे को छवि के बीच "सुरक्षित क्षेत्र" के मध्य में केंद्रित रखें।
ट्विटर कार्ड्स बनाम ओपन ग्राफ: वे कैसे इंटरैक्ट करते हैं
ट्विटर (X) का अपना स्वामित्व वाला मेटाडेटा मार्कअप है जिसे ट्विटर कार्ड्स कहा जाता है, लेकिन यह मूल रूप से ओपन ग्राफ फॉलबैक का भी समर्थन करता है।
यह सुनिश्चित करने के लिए कि आपके लिंक ट्विटर पर छोटे वर्गाकार थंबनेल के बजाय बड़े, आकर्षक विज़ुअल कार्ड के रूप में दिखाई दें, अपने Open Graph टैग के साथ इन समर्पित ट्विटर टैग्स को शामिल करें:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Catchy Headline" />
<meta name="twitter:description" content="Engaging summary snippet." />
<meta name="twitter:image" content="https://yourbrand.com/images/og-image.jpg" />यदि आप पूर्ण-चौड़ाई वाले दृश्य पूर्वावलोकन चाहते हैं तो twitter:card को summary_large_image पर सेट करना अनिवार्य है। यदि इसे छोड़ा गया, तो ट्विटर डिफ़ॉल्ट रूप से केवल संक्षिप्त टेक्स्ट-ओनली पूर्वावलोकन दिखाता है जो बहुत कम क्लिक आकर्षित करता है।
उन्नत प्रकाशकों को og:locale और article:published_time जैसी पूरक Open Graph संपत्तियों को भी लागू करना चाहिए। og:locale घोषित करने से क्रॉलर को सामग्री की मुख्य भाषा और क्षेत्रीय स्वरूपण की जानकारी मिलती है, जबकि प्रकाशन समय-टैम्प सामग्री खोज इंजनों जैसे Google Discover को ताजा सम्पादकीय रिपोर्टिंग पहचानने में मदद करता है।
एक संरचित इमेज फॉलबैक हायार्की बनाए रखना भी बुद्धिमानी है। यदि कोई लेखक किसी विशेष ब्लॉग पोस्ट के लिए समर्पित फीचर्ड इमेज अपलोड करना भूल जाता है, तो आपका कंटेंट मैनेजमेंट टेम्पलेट स्वचालित रूप से एक साफ, उच्च-रिज़ॉल्यूशन वाली डिफ़ॉल्ट ब्रांड ग्राफ़िक डालना चाहिए, बजाय इसके कि क्रॉलर को एक खाली प्रिव्यू कार्ड दिखाने की अनुमति दी जाए।
आप हमारे ब्रांडेड सबडोमेन पर मार्गदर्शिका में यह भी पता कर सकते हैं कि ओपन ग्राफ टैग्स ब्रांडेड सबडोमेन के साथ कैसे इंटरेक्ट करते हैं।
DSLink के साथ सहज स्मार्ट लिंक बनाएं
इन-ऐप ब्राउज़र बाधाओं को बायपास करें, मोबाइल उपयोगकर्ताओं को सीधे नेटिव ऐप्स में मार्गदर्शन करें, और इंटेलिजेंट डीप लिंकिंग के साथ अपने कन्वर्ज़न को optimize करें।
मुफ़्त शुरू करें — किसी क्रेडिट कार्ड की आवश्यकता नहींपूर्वावलोकन टैग का परीक्षण, सत्यापन और समस्या निवारण
मार्केटिंग अभियान शुरू करने या लिंक साझा करने से पहले, हमेशा आधिकारिक प्लेटफ़ॉर्म डिबगिंग सूट का उपयोग करके अपने ओपन ग्राफ टैग्स को सत्यापित करें:
- मेटा शेयरिक डिबगर: अपने URL को पेस्ट करें ताकि फेसबुक कार्ड्स का पूर्वावलोकन देखें, टैग चेतावनियों की जांच करें, और क्रॉलर कैश रीफ्रेश को मजबूर करें जैसा कि हमारे गाइड में गलत पूर्वावलोकन छवियों को ठीक करने पर चर्चा की गई है।
- Telegram @WebpageBot: मोबाइल प्रिव्यू रेंडरिंग को प्रमाणित करने और पुराने कैश किए गए ग्राफिक्स को साफ़ करने के लिए अपना लिंक इस सत्यापित बॉट को Telegram के अंदर भेजें।
- LinkedIn पोस्ट इंस्पेक्टर: LinkedIn के सात-दिन के लिंक प्रीव्यू कैश को साफ़ करता है और गायब मेटाडेटा फ़ील्ड की रिपोर्ट करता है।
- स्वचालित लिंक जांच: हमारे मुफ्त लिंक चेकर टूल का उपयोग करके रिडायरेक्ट चेन, SSL प्रमाणपत्र, और स्टेटस कोड्स की जांच करें।
पूरा ओपन ग्राफ मेटाडाटा लागू करके और प्रत्येक प्रमुख प्लेटफॉर्म पर प्रीव्यू रेंडरिंग को सत्यापित करके, आप सुनिश्चित करते हैं कि आपकी वेब लिंक भीड़-भाड़ वाले फीड में अलग दिखें और अधिकतम सहभागिता उत्पन्न करें।
अक्सर पूछे जाने वाले प्रश्न
ओपन ग्राफ क्या करता है?
ओपन ग्राफ मेटा टैग्स सोशल मीडिया प्लेटफॉर्म्स (जैसे फेसबुक, लिंक्डइन, ट्विटर, और टेलीग्राम) को बताते हैं कि जब कोई आपकी URL शेयर करता है तो कौन सा शीर्षक, विवरण, और छवि दिखानी है।
HTML में Open Graph टैग्स कहाँ जाते हैं?
ओपन ग्राफ टैग्स आपके पृष्ठ के HTML हेड सेक्शन के अंदर होते हैं, जिन्हें name और content एट्रिब्यूट्स वाले meta property टैग्स का उपयोग करके फॉर्मेट किया जाता है।
ओपन ग्राफ के लिए सबसे अच्छा इमेज साइज़ क्या है?
सर्वोत्तम रिज़ॉल्यूशन 1200x630 पिक्सेल है जिसमें 1.91:1 पहलू अनुपात है। 16:9 वाइडस्क्रीन प्रारूपों के लिए, 1200x675 पिक्सेल भी आधुनिक डिस्प्ले पर व्यापक रूप से समर्थित है।
मेरा ओपन ग्राफ इमेज सोशल मीडिया पर क्यों नहीं दिख रहा है?
सामान्य कारणों में रिलेटिव URL का उपयोग करना बजाय पूर्ण HTTPS लिंक के, इमेज फ़ाइल का आकार 5MB से अधिक होना, क्रॉलर कैश की स्थिरता, या सोशल स्क्रैपर्स पर फ़ायरवॉल ब्लॉक शामिल हैं।