OG Tag Preview

यह किसके लिए है?

जब आप Twitter/X, Facebook, LinkedIn, Discord, Slack या किसी भी आधुनिक chat या social app में link share करते हैं, तो link page head में Open Graph meta tags के आधार पर एक "card" — title, description, और image — में unfurl हो जाता है। विभिन्न platforms इन cards को अलग-अलग तरह से render करते हैं और text को अलग-अलग lengths पर clip करते हैं। यह टूल आपको side-by-side previews देता है कि वही content प्रत्येक में कैसा दिखाई देगा, बिना URL को हर platform पर वास्तव में share करना पड़े।

कब इस्तेमाल करें

• आपने OG image या copy बदला है और deploy करने से पहले यह पुष्टि करना चाहते हैं कि यह सही दिखता है।
• आप एक hero image चुन रहे हैं और देखना चाहते हैं कि focal point 1.91:1 crop को सहन करेगा या नहीं।
• आप title/description copy लिख रहे हैं और जानना चाहते हैं कि हर platform कहाँ इसे clip करेगा।
• आपको कोई page विरासत में मिला है जिसमें OG tags नहीं हैं और आप render किए गए card का preview देखकर उन्हें draft करना चाहते हैं।

न्यूनतम tags

• <meta property="og:title" content="…">
• <meta property="og:description" content="…">
• <meta property="og:image" content="https://…"> (absolute URL, 1200×630 ideal)
• <meta property="og:url" content="https://…">
• <meta property="og:type" content="website">
• <meta name="twitter:card" content="summary_large_image"> (X/Twitter big-image style के लिए)

आम गलतियाँ

• यह एक static preview है, live fetcher नहीं। असली platforms आपके page को अपने servers से scrape करते हैं; यदि आपकी असली site की image अलग है, तो यह टूल इसे नहीं पकड़ेगा। Authoritative check के लिए platforms के अपने debuggers (Twitter का card validator, Facebook का Sharing Debugger, LinkedIn का Post Inspector) का उपयोग करें।
• Image URLs absolute होने चाहिए। /og.png काम नहीं करेगा — scrapers आपके origin को नहीं जानते।
• Image सार्वजनिक रूप से पहुँच योग्य होनी चाहिए। Authentication walls, referer मांगने वाले CDNs, या hot-link protection आपको एक टूटे हुए card के साथ छोड़ देंगे।
• Aspect ratio मायने रखता है। 1.91:1 (1200×630 canonical है) हर platform पर अच्छी तरह render होता है। Square या portrait बुरी तरह crop होते हैं।
• File size मायने रखता है। कुछ scrapers 8 MB से बड़ी images reject करते हैं; first-load snappy रखने के लिए <1 MB का लक्ष्य रखें।
• Cache invalidation वास्तविक है। एक बार जब platform ने आपका URL scrape कर लिया, तो वह card को cache कर लेता है। Re-scrape force करने के लिए platform debuggers का उपयोग करें।
• Title/description length limits भिन्न होती हैं। Twitter/X लगभग 70 chars पर title clip करता है; Facebook लगभग 88; LinkedIn लगभग 100। महत्वपूर्ण शब्दों को आगे रखें।
• Discord theme-color को पसंद करता है। <meta name="theme-color" content="#xxxxxx"> जोड़ने से Discord embeds पर left border का color सेट हो जाता है।