Open Graph चेकर
देखें कि Facebook, Twitter/X, LinkedIn और Slack पर साझा होने पर आपके लिंक कैसे दिखते हैं
चाहते हैं कि आपके साझा किए गए लिंक हमेशा बेहतरीन दिखें?
Smmall Cloud स्वचालित रूप से आपके द्वारा साझा की गई हर फ़ाइल के लिए सुंदर लिंक पूर्वावलोकन उत्पन्न करता है — PDF, वीडियो, इमेज और बहुत कुछ। कॉन्फ़िगर करने के लिए कोई OG टैग नहीं।
Smmall Cloud मुफ्त में आज़माएंOpen Graph टैग क्या हैं?
Open Graph (OG) Facebook द्वारा 2010 में बनाया गया एक प्रोटोकॉल है जो किसी भी वेब पेज को सोशल ग्राफ में एक समृद्ध ऑब्जेक्ट बनने देता है। जब आप अपने HTML में Open Graph मेटा टैग जोड़ते हैं, तो आप नियंत्रित करते हैं कि कोई व्यक्ति इसे Facebook, LinkedIn, Slack, Discord और कई अन्य प्लेटफॉर्म पर साझा करने पर आपका पेज कैसे दिखाई देता है।
Open Graph टैग के बिना, प्लेटफॉर्म आपके पेज के शीर्षक, विवरण और इमेज का अनुमान लगाने की कोशिश करते हैं — और वे अक्सर गलत होते हैं। एक गायब या गलत पूर्वावलोकन इमेज, एक कटा हुआ शीर्षक, या एक सामान्य विवरण आपके लिंक को अव्यावसायिक बना सकता है और क्लिक को काफी कम कर सकता है।
Open Graph प्रोटोकॉल सोशल मीडिया तक सीमित नहीं है। Slack, iMessage, WhatsApp और Discord जैसे मैसेजिंग ऐप सभी लिंक पूर्वावलोकन उत्पन्न करने के लिए OG टैग पढ़ते हैं। खोज इंजन भी आपकी सामग्री को बेहतर ढंग से समझने के लिए उनका उपयोग करते हैं, भले ही वे सीधे रैंकिंग को प्रभावित न करें।
आवश्यक Open Graph टैग
ये सबसे महत्वपूर्ण Open Graph मेटा टैग हैं जो प्रत्येक पेज में शामिल होने चाहिए:
| Tag | Description |
|---|---|
| og:title | आपके पेज का शीर्षक जैसा कि लिंक पूर्वावलोकन में दिखना चाहिए। इसे 60 वर्णों से कम रखें। |
| og:description | आपके पेज सामग्री का संक्षिप्त सारांश। 155 वर्णों या उससे कम का लक्ष्य रखें। |
| og:image | पूर्वावलोकन इमेज URL। सभी प्लेटफॉर्मों पर सर्वोत्तम परिणामों के लिए 1200×630px का उपयोग करें। पूर्ण URL होना चाहिए। |
| og:url | आपके पेज का कैनोनिकल URL। प्लेटफॉर्मों को लाइक्स और शेयर्स को समेकित करने में मदद करता है। |
| og:type | सामग्री का प्रकार — आमतौर पर होमपेज के लिए "website" या ब्लॉग पोस्ट के लिए "article"। |
| og:site_name | आपकी संपूर्ण साइट का नाम (उदा., "Smmall Cloud")। कुछ प्लेटफॉर्मों पर शीर्षक के ऊपर दिखाया जाता है। |
सामान्य Open Graph गलतियाँ
- og:image गायब है — यह सबसे प्रभावशाली टैग है। इसके बिना, प्लेटफॉर्म एक सामान्य प्लेसहोल्डर दिखाते हैं या आपके पेज से एक यादृच्छिक इमेज लेते हैं।
- सापेक्ष URL का उपयोग करना — सभी OG टैग मूल्यों को https:// से शुरू होने वाले पूर्ण URL का उपयोग करना चाहिए। /images/preview.jpg जैसे सापेक्ष पथ काम नहीं करेंगे।
- गलत इमेज आयाम — 200×200px से छोटी इमेज को अनदेखा किया जा सकता है। इष्टतम प्रदर्शन के लिए 1200×630px का लक्ष्य रखें।
- twitter:card टैग गायब है — इस टैग के बिना, Twitter/X एक समृद्ध पूर्वावलोकन प्रदर्शित नहीं करेगा, भले ही आपके OG टैग पूर्ण हों। "summary" या "summary_large_image" मूल्य के साथ twitter:card जोड़ें।
- डुप्लिकेट या विरोधाभासी टैग — कई og:title या og:image टैग होने से क्रॉलर को भ्रमित करता है। प्रत्येक OG प्रॉपर्टी को ठीक एक बार दिखना चाहिए।
- कैश्ड पूर्वावलोकन अपडेट नहीं करना — Facebook और LinkedIn लिंक पूर्वावलोकन को आक्रामक रूप से कैश करते हैं। अपने OG टैग को अपडेट करने के बाद, कैश को रीफ्रेश करने के लिए उनके संबंधित डिबगर टूल का उपयोग करें।
Open Graph टैग कैसे जोड़ें
अपने HTML के ‹head› सेक्शन में Open Graph मेटा टैग जोड़ें। यहाँ आवश्यक टैग के साथ एक उदाहरण है:
<head>
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />
<meta name="twitter:card" content="summary_large_image" />
</head>प्लेटफॉर्म-विशिष्ट व्यवहार
विभिन्न प्लेटफॉर्म Open Graph टैग को थोड़े अलग तरीकों से पढ़ते और प्रदर्शित करते हैं:
प्राथमिक स्रोत के रूप में og:tags का उपयोग करता है। पूर्वावलोकनों को आक्रामक रूप से कैश करता है; रीफ्रेश करने के लिए Facebook Sharing Debugger का उपयोग करें। इमेज कम से कम 200×200px की आवश्यकता है, 1200×630px की सिफारिश करता है।
Twitter/X
twitter:card, twitter:title, twitter:image और twitter:description टैग को प्राथमिकता देता है लेकिन यदि वे गायब हैं तो OG टैग पर वापस आ जाता है। समृद्ध पूर्वावलोकन सक्षम करने के लिए twitter:card टैग की आवश्यकता है।
सीधे OG टैग पढ़ता है। बहुत आक्रामक कैशिंग; रीफ्रेश करने के लिए LinkedIn Post Inspector का उपयोग करें। og:title को लगभग 70 वर्णों पर काटता है।
Slack
साइट नाम, शीर्षक, विवरण और इमेज के साथ एक इंडेंटेड ब्लॉक के रूप में OG पूर्वावलोकन प्रदर्शित करता है। पूर्वावलोकन की शीर्ष पंक्ति के लिए og:site_name का सम्मान करता है।
Discord
रंगीन बाएँ बॉर्डर के साथ एक एम्बेड कार्ड के रूप में OG पूर्वावलोकन प्रदान करता है। इनलाइन वीडियो एम्बेड के लिए og:video का समर्थन करता है। og:color थीम मेटा टैग के लिए बहुत उत्तरदायी।
अक्सर पूछे जाने वाले प्रश्न
Open Graph टैग क्या हैं?
Open Graph (OG) टैग आपके HTML में मेटा टैग हैं जो नियंत्रित करते हैं कि Facebook, LinkedIn, Slack और Discord जैसे सोशल मीडिया प्लेटफॉर्म पर साझा होने पर आपकी सामग्री कैसे दिखाई देती है। वे आपको प्रत्येक पेज के लिए शीर्षक, विवरण और पूर्वावलोकन इमेज निर्दिष्ट करने देते हैं।
सोशल मीडिया पर मेरे साझा किए गए लिंक गलत क्यों दिखते हैं?
यदि आपके लिंक साझा होने पर गलत इमेज, शीर्षक या विवरण दिखाते हैं, तो इसका मतलब आमतौर पर है कि आपके Open Graph टैग गायब हैं या गलत हैं। इस चेकर का उपयोग करके देखें कि आपके पेज में कौन से टैग हैं और प्लेटफॉर्म क्या प्रदर्शित करेंगे।
OG टैग और Twitter Cards में क्या अंतर है?
Open Graph टैग (og:title, og:description, og:image) Facebook, LinkedIn और अधिकांश प्लेटफॉर्म द्वारा उपयोग किए जाते हैं। Twitter/X अपने twitter:card, twitter:title और twitter:image टैग का उपयोग करता है — लेकिन Twitter-विशिष्ट टैग गायब होने पर OG टैग पर वापस आ जाएगा।
og:image के लिए अनुशंसित आकार क्या है?
og:image के लिए अनुशंसित आकार 1200×630 पिक्सेल है। यह Facebook, LinkedIn, Twitter और Slack में अच्छी तरह से काम करता है। इमेज 8MB से कम होनी चाहिए और JPG या PNG फॉर्मेट में होनी चाहिए।
"Missing og:image" चेतावनी को कैसे ठीक करें?
अपने HTML के ‹head› में ‹meta property="og:image" content="https://yoursite.com/image.jpg" /› टैग जोड़ें। इमेज URL पूर्ण होना चाहिए (https:// से शुरू)। सापेक्ष पथ काम नहीं करेंगे।
क्या Open Graph टैग SEO को प्रभावित करते हैं?
OG टैग सीधे खोज रैंकिंग को प्रभावित नहीं करते हैं, लेकिन वे सोशल मीडिया से क्लिक-थ्रू दरों पर महत्वपूर्ण प्रभाव डालते हैं। एक आकर्षक पूर्वावलोकन इमेज और शीर्षक आपकी सामग्री साझा होने पर जुड़ाव को नाटकीय रूप से बढ़ा सकते हैं।