Open Graph tags: og:image कैसे सेट करें और link preview साफ़ कैसे दिखाएँ

SEOgrinder की ओर से · प्रकाशित 4 नवंबर 2026 · 11 मिनट में पढ़ें

संक्षिप्त उत्तर: Open Graph tags पेज के head में लिखे गए meta tag हैं, जो सोशल नेटवर्क और मैसेंजर को बताते हैं कि कोई आपका लिंक साझा करे तो कौन-सा title, विवरण और छवि दिखानी है। प्रोटोकॉल चार tag माँगता है (og:title, og:type, og:image और og:url), और og:description जोड़ना अच्छा रहता है। कम से कम 1200 × 630 पिक्सल की और 8 MB से छोटी छवि लीजिए, उसका पूरा https पता दीजिए, और हर tag उस HTML में रखिए जो आपका सर्वर भेजता है, उस JavaScript में नहीं जो बाद में चलती है। रैंकिंग पर असर प्रमाणित नहीं है: ये tag तय करते हैं कि साझा किया गया लिंक कैसा दिखे।

Open Graph tags क्या हैं?

Open Graph एक प्रोटोकॉल है, जिससे कोई वेब पेज ख़ुद को एक वस्तु की तरह बयान करता है: title, प्रकार, तस्वीर और पता। ogp.me के अनुसार यह प्रोटोकॉल शुरू में Facebook में बना था। इसे लगाने का तरीक़ा है पेज के head में meta tag जोड़ना। जब कोई आपका लिंक किसी पोस्ट या चैट में चिपकाता है, तो प्लेटफ़ॉर्म पेज को माँगता है, ये tag पढ़ता है और उन्हीं से पूर्वावलोकन का कार्ड बनाता है। ये न हों, तो प्लेटफ़ॉर्म को अंदाज़ा लगाना पड़ता है कि कौन-सा title, विवरण और छवि लेनी है।

प्रोटोकॉल हर पेज के लिए चार अनिवार्य गुण बताता है, और एक और, जो वैकल्पिक है पर आम तौर पर सुझाया जाता है:

Tag	उसमें क्या होता है	स्थिति
og:title	वस्तु का title, जैसा वह पूर्वावलोकन में दिखना चाहिए	अनिवार्य
og:type	वस्तु का प्रकार, जैसे `website` या `article`	अनिवार्य
og:image	उस तस्वीर का पता जो पेज की नुमाइंदगी करती है	अनिवार्य
og:url	पेज का canonical पता, उसकी स्थायी पहचान के रूप में	अनिवार्य
og:description	एक से दो वाक्यों का विवरण	वैकल्पिक, आम तौर पर सुझाया गया

og:type का मान सिर्फ़ एक लेबल नहीं है। ogp.me के अनुसार, चुना हुआ प्रकार अपने साथ और गुण ला सकता है। article के लिए प्रोटोकॉल article:published_time और article:modified_time जैसे फ़ील्ड गिनाता है। दूसरे वैकल्पिक tag हैं og:site_name (पूरी साइट का नाम) और og:locale (tag की भाषा, डिफ़ॉल्ट en_US)।

Open Graph tags के लिए न्यूनतम HTML

यह एक पूरा सेट है जिसे आप अपने हिसाब से बदल सकते हैं। (ogp.me का उदाहरण html तत्व पर prefix एट्रिब्यूट भी लगाता है; बड़े प्लेटफ़ॉर्म tag उसके बिना भी पढ़ लेते हैं।) इसे head तत्व के भीतर, अपने सामान्य title tag के पास रखिए:

<head>
  <title>Open Graph tags: og:image कैसे सेट करें</title>
  <meta property="og:title" content="Open Graph tags: og:image कैसे सेट करें">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-tags">
  <meta property="og:image" content="https://example.com/images/open-graph-tags.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="छवि, title और विवरण वाला link preview कार्ड">
  <meta property="og:description" content="चार ज़रूरी Open Graph tags, छवि के आकार के नियम और link preview टेस्ट करने का तरीक़ा।">
  <meta property="og:site_name" content="Example">
</head>

ब्योरे के बारे में कुछ बातें:

og:url स्थायी पहचान है। ogp.me इसे वस्तु का canonical URL बताता है। वही पता रखिए जो आपके canonical लिंक में है, बिना ट्रैकिंग पैरामीटर के।
छवि का पता पूरा लिखिए। ogp.me के हर उदाहरण में पूरा पता है। /images/card.png जैसा सापेक्ष पाथ इस पर निर्भर है कि हर क्रॉलर उसे कैसे हल करता है, इसलिए उस पर भरोसा मत कीजिए।
चौड़ाई और ऊँचाई मदद करती हैं। Facebook के दस्तावेज़ के अनुसार इन दो tag की वजह से उसका क्रॉलर छवि को फ़ौरन दिखा सकता है, उसे पहले डाउनलोड करके प्रोसेस किए बिना।
og:image:alt जोड़िए। ogp.me कहता है कि जो पेज कोई छवि बताता है, उसे यह भी बताना चाहिए कि उसमें क्या है (विवरण, कैप्शन नहीं)।

og:image के नियम: आकार, फ़ाइल और पता

सबसे साफ़ संख्याएँ Facebook ने साझा किए गए लिंक की छवियों वाले पेज पर प्रकाशित की हैं। इस हिस्से के बाक़ी नियम इन्हीं पर टिके हैं:

सबसे छोटा मान्य आकार 200 × 200 पिक्सल है।
फ़ाइल 8 MB से बड़ी नहीं होनी चाहिए।
हाई-रिज़ॉल्यूशन उपकरणों पर सबसे अच्छे प्रदर्शन के लिए कम से कम 1200 × 630 पिक्सल लीजिए।
बड़ी छवि वाले लिंक पोस्ट पाने के लिए कम से कम 600 × 315 पिक्सल चाहिए। उससे छोटी छवियाँ भी दिखती हैं, पर काफ़ी छोटी।
अनुपात जितना हो सके 1.91 : 1 के क़रीब रखिए, ताकि पूरी छवि बिना कटे दिखे। 1200 × 630 लगभग 1.905 : 1 बैठता है, इसीलिए यही आकार आम चुनाव है।
क्रॉलर सिर्फ़ gzip और deflate एन्कोडिंग मानता है, इसलिए जाँच लीजिए कि आपका सर्वर या CDN इनमें से किसी एक में जवाब देता है।

ये Facebook के नियम हैं। दूसरे ऐप और मैसेंजर यही tag पढ़ते हैं, पर उनकी सीमाएँ यह लेख दर्ज नहीं करता, इसलिए उन जगहों पर ख़ुद टेस्ट कीजिए जो आपके लिए मायने रखती हैं। तुलना के लिए: SEOgrinder के ब्लॉग पेज 1200 × 630 पिक्सल की पूर्वावलोकन छवि इस्तेमाल करते हैं।

दो और शर्तें पहुँच से जुड़ी हैं, आकार से नहीं। छवि सार्वजनिक होनी चाहिए: उसके आगे कोई लॉगिन न हो, और कोई robots.txt नियम उस फ़ोल्डर को न रोके जिसमें वह रखी है। अगर क्रॉलर फ़ाइल नहीं ला सकता, तो पूर्वावलोकन बिना तस्वीर के रहता है, फ़ाइल चाहे जितनी अच्छी हो।

हर पेज को अपने Open Graph tags दीजिए

og:url किसी वस्तु की स्थायी पहचान है, इसलिए वह हर पेज पर अलग होना चाहिए। बाक़ी tag पर भी यही बात लागू होती है:

og:title बताए कि ठीक इसी पेज में क्या है, पूरी साइट का नाम नहीं।
og:description इस पेज का सार एक-दो वाक्यों में दे।
og:image कुछ ऐसा दिखाए जो पेज से मेल खाता हो। जिन पेजों की अपनी छवि नहीं, उनके लिए एक डिफ़ॉल्ट छवि रखिए।
og:type भी अलग हो सकता है: होम पेज के लिए website, ब्लॉग पोस्ट या समाचार के लिए article।

आपकी टेक्नोलॉजी जो भी हो, tag हाथ से टाइप करने की जगह हर पेज के डेटा से बनाइए। Node में एक छोटा उदाहरण:

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(page) {
  return [
    ['og:title', page.title],
    ['og:type', page.type || 'website'],
    ['og:url', `https://example.com${page.path}`],
    ['og:image', page.image || 'https://example.com/images/default-card.png'],
    ['og:description', page.description],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

esc फ़ंक्शन ज़रूरी है: उद्धरण-चिह्न वाला title एट्रिब्यूट को बीच में ही ख़त्म कर देगा और tag टूट जाएगा। अगर आप CMS इस्तेमाल करते हैं, तो वह फ़ील्ड ढूँढिए जो हर पेज की शेयर-छवि तय करता है। जो नतीजा आप आख़िर में जाँचते हैं, वह वही रहता है: भेजे गए HTML में मौजूद tag।

Open Graph tags भेजे गए HTML में होने चाहिए

कई आधुनिक वेबसाइटें लगभग ख़ाली HTML ढाँचा भेजती हैं और बाक़ी पेज ब्राउज़र में JavaScript से बनने देती हैं। Google इसे सँभाल सकता है: अपने JavaScript दस्तावेज़ के अनुसार Search पेजों को Chromium के evergreen संस्करण से रेंडर करता है। उसी पेज पर यह भी लिखा है कि server-side rendering या pre-rendering अब भी अच्छा विचार है, क्योंकि सभी बॉट JavaScript नहीं चला सकते।

AI क्रॉलर के बारे में एक माप मौजूद है: दिसंबर 2024 में Vercel और MERJ ने पाया कि जिन बड़े AI क्रॉलरों को उन्होंने देखा, उनमें से किसी ने JavaScript नहीं चलाई। यह 2024 की एक झलक है और तब से दोबारा पुष्ट नहीं हुई। link preview के लिए इसी तर्क से एक सुरक्षित नियम निकलता है: अगर आपके tag स्क्रिप्ट चलने के बाद ही आते हैं, तो जो क्रॉलर स्क्रिप्ट नहीं चलाता वह उन्हें कभी नहीं देखता। SEOgrinder ऐसे पेजों को “पेज केवल ब्राउज़र में बनता है” के रूप में दर्ज करता है, इस सूचना के साथ कि कई AI क्रॉलर JavaScript नहीं चलाते और उन्हें लगभग ख़ाली पेज दिखता है।

आप इसे दस सेकंड में टेस्ट कर सकते हैं:

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

अगर tag वापस आते हैं, तो वे भेजे गए HTML में हैं। अगर कुछ नहीं आता, पर ब्राउज़र के डेवलपर टूल में tag दिखते हैं, तो कोई स्क्रिप्ट उन्हें बहुत देर से जोड़ रही है। यही टेस्ट ब्राउज़र में “View page source” से भी हो सकता है; वह भेजा गया HTML दिखाता है, उस जीवित पेज को नहीं जो डेवलपर टूल दिखाते हैं। इलाज है सर्वर पर रेंडर करना या पेज पहले से तैयार रखना, ताकि title, टेक्स्ट और tag पहले ही जवाब में मौजूद हों।

link preview को कैसे टेस्ट करें

Facebook का Sharing Debugger दिखाता है कि क्रॉलर ने कौन-से tag पढ़े और कोई त्रुटि हो तो वह भी। उसके लिए Facebook लॉगिन चाहिए। Facebook के छवि-दस्तावेज़ के अनुसार, किसी URL को इसमें चलाने पर मेटाडेटा पहले से ला लिया जाता है, और cache की वजह से यह मायने रखता है:

Facebook हर छवि को उसके पते के हिसाब से cache करता है। अगर आप कोई छवि बदलते हैं, तो नई छवि के लिए नया URL इस्तेमाल कीजिए, वरना पुरानी तस्वीर टिकी रहेगी।
पुरानी छवि मत हटाइए, क्योंकि मौजूदा पोस्ट अब भी उसी की ओर इशारा कर सकते हैं।
किसी URL की छवि बदलने से पुराने शेयर का पूर्वावलोकन अपने आप नहीं बदलता। उन्हें ताज़ा करवाना पड़ता है।
क्रॉलर को छवि दिखाने से पहले उसे कम से कम एक बार देखना होता है। पहले से न मँगवाई हो, तो लिंक साझा करने वाले पहले व्यक्ति को शायद छवि न दिखे।

प्रकाशित करने से पहले यह सूची देख लीजिए:

पेज को curl से माँगिए और पक्का कीजिए कि पाँचों tag पहले जवाब में हैं।
छवि का पता अकेले खोलिए। वह बिना लॉगिन के, स्टेटस 200 के साथ लोड होना चाहिए।
आकार जाँचिए: कम से कम 1200 × 630 पिक्सल, 8 MB से कम।
पेज को Sharing Debugger में चलाइए और त्रुटियाँ और चेतावनियाँ पढ़िए।
हर तरह के एक-एक पेज के लिए यही दोहराइए: होम पेज, एक पोस्ट, एक प्रोडक्ट।

SEOgrinder आपके Open Graph tags कैसे जाँचता है

SEOgrinder में किसी सार्वजनिक पेज का पता डालिए, तो रिपोर्ट में एक “सोशल पूर्वावलोकन” आता है, जो दिखाता है कि साझा होने पर पेज कैसा दिखता है। टूल आपके tag पढ़ता है, छवि लोड करता है और जो मिले उसे दर्ज करता है। इसके लिए खाता नहीं चाहिए और कोई शुल्क नहीं। यहाँ जो नतीजे काम के हैं:

साझा करने का पूर्वावलोकन अधूरा है बताता है कि छवि, title और विवरण में से क्या छूटा है।
पूर्वावलोकन छवि लोड नहीं होती तब आता है जब छवि किसी त्रुटि वाले स्टेटस के साथ जवाब देती है। नतीजा वह स्टेटस बताता है और आम वजहें गिनाता है: ग़लत पता, फ़ाइल के आगे लॉगिन, या robots.txt की रोक। नतीजे के अनुसार, तब लिंक LinkedIn, WhatsApp और X पर बिना तस्वीर के दिखते हैं।
पूर्वावलोकन छवि बहुत छोटी है तब आता है जब छवि 600 × 315 पिक्सल से छोटी हो (तब Facebook उसे सिर्फ़ छोटे थंबनेल की तरह दिखाता है), और 200 × 200 के न्यूनतम आकार से छोटी छवियों को वह अलग से दर्ज करता है।
पेज केवल ब्राउज़र में बनता है उन पेजों का नतीजा है जो अपना इंटरफ़ेस ब्राउज़र में बनाते हैं।

SEOgrinder आपको नहीं दिखा सकता कि हर नेटवर्क कार्ड को कैसे बनाता है। वह tag और फ़ाइल जाँचता है, यानी वह हिस्सा जो आपके हाथ में है। आख़िरी रूप देखने के लिए debugger इस्तेमाल कीजिए।

आम ग़लतियाँ

छवि का सापेक्ष पाथ। https:// के साथ पूरा पता दीजिए।
ऐसी छवि जो माँगी न जा सके। लॉगिन, फ़ायरवॉल का नियम या छवि-फ़ोल्डर पर robots.txt की पंक्ति पूर्वावलोकन को बिना तस्वीर के छोड़ देती है।
बहुत छोटी छवि। 600 × 315 पिक्सल से छोटी हो तो वह छोटी दिखती है; 200 × 200 से छोटी हो तो शायद दिखे ही नहीं।
विवरण का न होना। प्रोटोकॉल में og:description वैकल्पिक है, पर उसके बिना प्लेटफ़ॉर्म अंदाज़ा लगाता है।
हर पेज पर एक जैसे tag। तब हर पोस्ट साझा होने पर होम पेज जैसी दिखती है, और og:url कुछ पहचान नहीं बताता।
उसी पते पर छवि बदल देना। Facebook URL के हिसाब से cache करता है, इसलिए नई फ़ाइल नए नाम से प्रकाशित कीजिए।
ऐसे tag जो JavaScript चलने के बाद ही बनते हैं। उन्हें भेजे गए HTML में रखिए।
मानों में बिना बचाव वाले उद्धरण-चिह्न। वे एट्रिब्यूट को ख़त्म कर देते हैं और tag कट जाता है।
og:url में ट्रैकिंग वाला पता। tag में canonical पता होना चाहिए।

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

क्या Open Graph tags रैंकिंग का कारक हैं?

इसका कोई प्रमाण नहीं है। Open Graph तय करता है कि साझा किया गया लिंक सोशल नेटवर्क और मैसेंजर में कैसा दिखे। यहाँ इस्तेमाल हुए स्रोतों में कुछ भी इसे रैंकिंग से नहीं जोड़ता।

og:image का आकार कितना रखूँ?

1200 × 630 पिक्सल, अनुपात 1.91 : 1 के क़रीब और 8 MB से कम। यह Facebook की सिफ़ारिश के अनुरूप है और SEOgrinder के ब्लॉग पेजों की पूर्वावलोकन छवि का आकार भी यही है।

क्या मुझे og:description चाहिए?

प्रोटोकॉल इसे वैकल्पिक पर आम तौर पर सुझाया गया बताता है। इसके बिना प्लेटफ़ॉर्म को आपके पेज से कोई विवरण अंदाज़े से बनाना पड़ता है, इसलिए ख़ुद लिखिए।

मेरी पुरानी छवि अब भी क्यों दिख रही है?

Facebook छवियों को उनके पते के हिसाब से cache करता है। नई छवि नए URL पर प्रकाशित कीजिए, फिर पेज को Sharing Debugger में चलाइए। पुराने शेयर अपने आप ताज़ा नहीं होते।

twitter:card का क्या?

यह tag Open Graph प्रोटोकॉल का हिस्सा नहीं है। अधूरे पूर्वावलोकन पर SEOgrinder का सुधार-सुझाव twitter:card को summary_large_image पर रखने की भी सलाह देता है। X के नियम यह लेख नहीं बताता, इसलिए उन्हें X के अपने दस्तावेज़ में देखिए।

क्या कोई कोडिंग एजेंट मेरे लिए tag जोड़ सकता है?

यांत्रिक हिस्सा वह कर सकता है: tag को आपके टेम्पलेट में लिखना और curl से जाँचना। रिपोर्ट में AI को सौंपें नतीजों को Markdown में कार्य-आदेश बना देता है, हर काम के साथ जाँचने लायक़ लक्ष्य-शर्त (“पूरा तब जब”) के साथ। तस्वीर चुनना और शब्द लिखना आपका ही काम रहता है।

आपका अगला कदम

अपने होम पेज पर मुफ़्त स्कैन चलाइए और सोशल पूर्वावलोकन और ऊपर बताए नतीजे देखिए। उन्हें क्रम से ठीक कीजिए, कोई छवि बदलनी हो तो नई छवि नए पते पर प्रकाशित कीजिए, और पेज को Sharing Debugger में चलाइए। फिर दोबारा स्कैन कीजिए, यह पक्का करने के लिए कि पूर्वावलोकन पूरा है। पूरी साइट की बाक़ी जाँचों के लिए SEO audit checklist देखिए।