आपका लिंक प्रिव्यू गलत क्यों दिखता है, और Open Graph से इसे कैसे ठीक करें

आप अपने नए लैंडिंग पेज का लिंक शेयर करते हैं और प्रिव्यू में कोई तस्वीर नहीं आती, या होम पेज का टाइटल आता है, या दो कैंपेन पुराना बैनर दिखता है। पेज खुद ठीक है। प्रिव्यू किसी और चीज़ से बनता है: पेज के head में कोड की कुछ लाइनों से, जो ज़्यादातर लोग कभी नहीं देखते।

इस पोस्ट में उन छह कारणों पर बात है जो ज़्यादातर टूटे प्रिव्यू के पीछे होते हैं, उसी क्रम में जिसमें उन्हें जांचना चाहिए। अगर आप चाहते हैं कि टैग आपके लिए लिखे जाएं, तो मुफ्त Open Graph generator उन्हें बनाता है, उन्हें सही तरीके से escape करता है और नीचे दी गई सीमाओं के हिसाब से जांचता है।

लिंक प्रिव्यू कैसे बनता है

जब कोई लिंक किसी पोस्ट या मैसेज में पेस्ट होता है, तो ऐप उस पेज पर एक crawler भेजता है। crawler <head> में मौजूद <meta> टैग पढ़ता है और उन्हीं से कार्ड बनाता है। ये टैग Open Graph protocol से आते हैं, जो चार को ज़रूरी बताता है:

• og:title: पेज का टाइटल, जैसा वह कार्ड में दिखना चाहिए।
• og:type: पेज किस तरह का है, आमतौर पर website या article।
• og:image: तस्वीर।
• og:url: पेज का canonical URL, जिसे प्रोटोकॉल अपना permanent ID कहता है।

og:description जोड़ दें तो कार्ड पूरा हो जाता है। एक पूरा, न्यूनतम सेट कुछ ऐसा दिखता है:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

कारण 1: टैग गायब हैं

बिना og: टैग के, हर ऐप को पेज पर मिलने वाली दूसरी चीज़ों पर निर्भर होना पड़ता है, जैसे <title> या पहली इमेज, और वह किसे चुनेगा यह उसी ऐप पर निर्भर है। इसी वजह से एक लिंक एक जगह ठीक दिखता है और दूसरी जगह टूटा हुआ। इसका हल है कि हर उस पेज पर, जिसे लोग शेयर करने वाले हैं, चारों ज़रूरी टैग और एक description दें, सिर्फ होम पेज पर नहीं। प्रोडक्ट पेज को होम पेज के टैग के साथ शेयर करेंगे तो उसका कार्ड होम पेज वाला दिखेगा।

कारण 2: इमेज का URL relative है

यह आसानी से छूट जाता है, क्योंकि पेज आपके अपने ब्राउज़र में ठीक दिखता है। content="/images/og.jpg" उस ब्राउज़र के लिए चलता है जो पहले से आपकी साइट पर है, पर crawler उसके बाहर है। पूरा पता लिखें, https:// और अपने domain से शुरू करके। यही og:url पर भी लागू होता है।

कारण 3: इमेज का साइज़ या आकार गलत है

हर प्लेटफ़ॉर्म बताता है कि उसे क्या चाहिए, और वे संयोग से एक चौड़ी इमेज पर सहमत हैं:

• LinkedIn अपनी guide to making a website shareable में कहता है कि इमेज कम से कम 1200 × 627 पिक्सल की हो, recommended 1.91:1 अनुपात में, और 5 MB से बड़ी न हो।
• Meta की sharing best practices high-resolution स्क्रीन के लिए कम से कम 1080 पिक्सल चौड़ी इमेज और image link ads दिखाने के लिए कम से कम 600 चौड़ी इमेज की सलाह देते हैं।
• X का large image card 2:1 अनुपात को 300 × 157 से 4096 × 4096 पिक्सल तक सपोर्ट करता है, 5MB से कम, JPG, PNG, WEBP या GIF में, और SVG को सपोर्ट नहीं करता, उसके developer documentation के अनुसार (मूल पेज अब redirect करता है, इसलिए यह लिंक Internet Archive से होकर जाता है)।

एक साइज़ तीनों में फिट होता है: 1200 × 630। यह LinkedIn की 1200 × 627 न्यूनतम सीमा को पार करता है, Meta के 1080 से चौड़ा है, और इसका अनुपात 1200 ÷ 630 = 1.905 है, जो X के 2:1 से 5% के भीतर है। वर्गाकार या लंबी इमेज को चौड़े कार्ड में काटा जाएगा, इसलिए ज़रूरी हिस्सा बीच में रखें। aspect ratio calculator दिखाता है कि center crop में क्या बचता है।

टैग में साइज़ भी बताएं। Meta og:image:width और og:image:height मांगता है, ताकि उसका crawler इमेज को पहले डाउनलोड और प्रोसेस किए बिना तुरंत render कर सके। उसकी webmaster guide सीधी बात कहती है: height और width बताएं, ताकि पहली बार शेयर होने पर ही इमेज सही लोड हो।

कारण 4: टैग JavaScript से जोड़े जाते हैं

कुछ site builders और single-page apps पेज लोड होने के बाद, ब्राउज़र में meta tags जोड़ते हैं। crawler वह HTML पढ़ता है जो आपका सर्वर भेजता है, और हो सकता है वह कोड कभी चले ही नहीं, इसलिए उसे टैग कभी दिखें ही नहीं। पेज का source देखें (View Source, inspector नहीं, क्योंकि inspector में स्क्रिप्ट चलने के बाद का पेज दिखता है)। अगर टैग source में नहीं हैं, तो crawler को भी शायद नहीं दिखेंगे। इसका हल आपकी साइट की settings या server-side template में होना चाहिए।

कारण 5: स्पेशल कैरेक्टर ने टैग तोड़ दिया

टाइटल में डबल क्वोट हो, जैसे The "only" linen you need, तो वह content="..." attribute को जल्दी बंद कर देता है और बाकी टाइटल खो जाता है। Attribute के अंदर मायने रखने वाले कैरेक्टर को escape करना ज़रूरी है: " बन जाता है ", & बन जाता है &, और < बन जाता है <। ब्राउज़र और crawler टैग पढ़ते समय इन्हें वापस मूल कैरेक्टर में बदल देते हैं। Generator यह अपने आप करता है, और एक generator इस्तेमाल करने का यह आधा कारण है।

कारण 6: ऐप ने पुराना वर्ज़न याद रखा है

आपने टैग ठीक कर दिए, दोबारा शेयर किया, और पुराना कार्ड अभी भी है। यह cache है। ऐप जो स्क्रैप करते हैं उसे स्टोर करके दोबारा इस्तेमाल करते हैं, और दोनों बड़े नेटवर्क ताज़ा रूप मांगने का tool देते हैं:

• Facebook: URL को Meta के Sharing Debugger में पेस्ट करें। Meta की webmaster guide के अनुसार यह दिखाता है कि crawler ने कौन से टैग स्क्रैप किए, साथ में कोई error या warning, और नया scrape शुरू करता है। Meta की best practices में यह भी है कि स्क्रैप किया गया content अन्यथा मानक 24 घंटे की अवधि पर अपडेट होता है।
• LinkedIn: URL को Post Inspector से चलाएं। LinkedIn का help page सीमा के बारे में साफ है: refresh सिर्फ नई पोस्ट के प्रिव्यू बदलता है। जिन पोस्ट में URL पहले से है, उनमें पुराना ही रहता है।

लॉन्च से पहले यही LinkedIn वाली बात याद रखें। पहली पोस्ट जाने से पहले प्रिव्यू पहले जांचें, क्योंकि पेज ठीक करने से पुरानी पोस्ट ठीक नहीं होती।

twitter:card टैग: चार नहीं, एक लाइन

X भी Open Graph पढ़ता है। उसका cards markup reference हर टैग के लिए fallback बताता है: twitter:title, og:title पर जाता है, twitter:description og:description पर, twitter:image og:image पर, और twitter:image:alt og:image:alt पर। इसलिए सब कुछ दोहराने की ज़रूरत नहीं। बस एक लाइन जोड़ें, twitter:card: पूरी चौड़ाई की तस्वीर के लिए summary_large_image, या छोटे वर्गाकार के लिए summary। यह न हो तो वही reference कहता है कि X छोटा summary card दिखा सकता है, इसलिए कभी-कभी बड़ी तस्वीर थंबनेल बनकर आती है। वही reference टाइटल की सीमा 70 अक्षर, description 200 और alt text 420 बताता है।

लॉन्च से पहले पांच मिनट की जांच

1. पेज का source खोलें और og: टैग ढूंढें। चारों ज़रूरी टैग, साथ में description।
2. जांचें कि og:image और og:url https:// से शुरू होते हैं।
3. इमेज का URL अकेले ब्राउज़र में खोलें। वह लोड होना चाहिए, 1200 × 630 या उसके आसपास।
4. URL को Sharing Debugger और Post Inspector में पेस्ट करके कार्ड पढ़ें।
5. इसके बाद ही शेयर करें।

Hermoso कहाँ फ़िट होता है

Hermoso एक AI marketing agent है: यह आपके बाज़ार में पहले से चल रहे ads खोजता है, आपके ब्रांड के हिसाब से image और video ads बनाता है, पोस्ट आपके अपने accounts पर schedule करता है और आपके अपने ad accounts पर paid campaigns चलाता है। अच्छा लिंक प्रिव्यू ही उन पोस्ट को क्लिक लायक बनाता है। Hermoso web app में काम करता है, या Claude, ChatGPT और Cursor के अंदर अपने MCP server के ज़रिए।

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

मेरा लिंक Facebook या LinkedIn पर कोई इमेज क्यों नहीं दिखाता?

आमतौर पर og:image टैग नहीं होता, या relative path इस्तेमाल होता है, पूरे https:// पते की जगह, या इमेज बहुत छोटी है। LinkedIn कम से कम 1200 × 627 पिक्सल मांगता है। ठीक करने के बाद URL को Meta के Sharing Debugger या LinkedIn के Post Inspector से चलाएं, ताकि वे उसे दोबारा fetch करें।

Open Graph इमेज का साइज़ कितना होना चाहिए?

1200 × 630 पिक्सल सभी बड़े नेटवर्क पर काम करता है। यह LinkedIn की 1200 × 627 न्यूनतम सीमा को लगभग 1.91:1 पर पूरा करता है, Meta के सुझाए 1080 पिक्सल से चौड़ा है, और X के large image cards के 2:1 के करीब है।

LinkedIn पर लिंक प्रिव्यू कैसे अपडेट करूं?

पेज के टैग ठीक करें, फिर URL को LinkedIn के Post Inspector में डालें। ताज़ा प्रिव्यू सिर्फ नई पोस्ट पर लागू होता है। जिन पोस्ट में URL पहले से है, उनमें पुराना प्रिव्यू रहता है।

अगर og: टैग हैं तो क्या मुझे twitter: टैग चाहिए?

सिर्फ twitter:card। जब twitter: वाले वर्ज़न नहीं होते, तो X og:title, og:description, og:image और og:image:alt पर fallback करता है।