ओपन ग्राफ और सोशल शेयर मेटा टैग चेकर

--- name: open-graph-and-social-share-meta-tag-checker description: किसी पेज के HTML सोर्स में उन टैग्स की जांच करता है जिनसे लिंक प्रीव्यू बनते हैं - टाइटल और डिस्क्रिप्शन की लंबाई, rel=canonical, og:title/description/type/url/site_name/locale, og:image का आकार, पहलू, alt और SVG, twitter:card और हैंडल। relative/http:// URLs, ट्रैकिंग पैरामीटर, थीम + SEO प्लगइन डुप्लिकेट, <body> में टैग्स और अनरेंडर्ड {{ }} प्लेसहोल्डर्स को फ्लैग करता है, और एक फिक्स्ड <head> ब्लॉक लौटाता है। इसमें --self-test के साथ एक ऑफलाइन stdlib Python चेकर शामिल है। --- # Open Graph और Social Share Meta Tag Checker आप साझा किए गए लिंक को Facebook, LinkedIn, X, Slack, Discord, WhatsApp और iMessage पर सही दिखाते हैं। आप क्रॉलर द्वारा देखे जाने वाले पेज सोर्स को पढ़ते हैं, उपयोगकर्ता को दिखाते हैं कि प्रीव्यू किससे बनेगा (टाइटल, डिस्क्रिप्शन, इमेज, डोमेन), समझाते हैं कि प्रीव्यू खाली, क्रॉप्ड या लोगो दिखा रहा है, और एक सही किया गया <head> ब्लॉक लौटाते हैं। आप सेव किए गए HTML से काम करते हैं; आप कभी दावा नहीं करते कि आपने लाइव पेज लाया या किसी प्लेटफॉर्म का कैश देखा। ## इस स्किल में फाइलें - `scripts/og_meta_check.py` - `html.parser` के साथ HTML पार्स करता है और title, description, canonical, og:* और twitter:* टैग्स की जांच करता है; `--root` के साथ यह स्थानीय PNG/JPEG/GIF/WebP शेयर इमेज की वास्तविक चौड़ाई/ऊंचाई और फाइल साइज पढ़ता है (केवल Python 3.8+ मानक लाइब्रेरी) - `references/tag-rules.md` - प्रत्येक टैग, क्रॉलर द्वारा स्वीकार किए जाने वाले मान, लंबाई, इमेज साइज और फॉलबैक - `references/platform-notes.md` - Facebook, LinkedIn, X, Slack, Discord, WhatsApp और iMessage प्रीव्यू कैसे बनाते हैं, उन्हें कैश करते हैं और कैसे रीफ्रेश करें - `templates/share-meta-review.md` - लौटाने के लिए समीक्षा (प्रीव्यू, फिक्स टेबल, फिक्स्ड हेड ब्लॉक, रीफ्रेश चरण) - `examples/product-page.html` - एक प्रोडक्ट पेज जिसकी थीम और SEO प्लगइन दोनों टैग्स लिखते हैं, जानबूझकर गलतियों के साथ - `examples/product-page-fixed.html` - वही पेज सही हेड के साथ (जांच साफ) - `examples/meta-report.md` - टूटे उदाहरण पर चेकर का वास्तविक आउटपुट ## कार्यप्रवाह ### 1. क्रॉलर द्वारा देखा गया HTML प्राप्त करें पेज URL और सर्वर-रेंडर्ड सोर्स मांगें, DevTools Elements व्यू नहीं (वह JavaScript द्वारा जोड़े गए टैग्स दिखाता है, जो अधिकांश क्रॉलर कभी नहीं चलाते): ``` curl -sL -A "facebookexternalhit/1.1" https://example.com/page -o page.html curl -sL -A "Twitterbot/1.0" https://example.com/page -o page-x.html ``` स्थैतिक साइट या बिल्ड फोल्डर के लिए, चेकर को फोल्डर पर इंगित करें और `--root` पास करें ताकि शेयर इमेज डिस्क से मापी जाएं। पूछें कि कौन से प्लेटफॉर्म सबसे महत्वपूर्ण हैं (B2B: LinkedIn और Slack; उपभोक्ता: WhatsApp, iMessage, Facebook, X)। ### 2. चेकर चलाएं ``` python3 scripts/og_meta_check.py examples/product-page.html --url https://shop.example.com/shoes/trail-grip python3 scripts/og_meta_check.py dist/ --root dist/ --min-severity MEDIUM python3 scripts/og_meta_check.py page.html --url https://example.com/blog/post --json python3 scripts/og_meta_check.py --self-test ``` एकल पेज के लिए `--url` दें ताकि relative लिंक हल हों और canonical/og:url की तुलना हो। Exit 0 = कोई HIGH नहीं, 1 = HIGH निष्कर्ष, 2 = गलत इनपुट। यदि आप कोड नहीं चला सकते, तो `references/tag-rules.md` को उसी क्रम में देखें। ### 3. प्रीव्यू समझाएं - प्रीव्यू टेबल से शुरू करें: यही है जो लोग देखेंगे। एक गायब, relative या SVG `og:image` आमतौर पर नंगे टेक्स्ट लिंक का कारण है; एक वर्गाकार या छोटी इमेज बड़े कार्ड के बजाय छोटा थंबनेल मिलता है। - **HIGH** प्रीव्यू तोड़ता है (कोई या relative og:image नहीं, 200x200 से कम इमेज, कोई टाइटल नहीं, कई canonical)। **MEDIUM** गलत चीज़ दिखाता है (डुप्लिकेट, प्लेसहोल्डर्स, <body> में टैग्स, अमान्य twitter:card, ट्रैकिंग पैरामीटर, SVG)। **LOW** पॉलिश है (लंबाई, alt टेक्स्ट, locale प्रारूप, site_name)। - डुप्लिकेट आमतौर पर दो सिस्टम से आते हैं (थीम प्लस SEO प्लगइन, फ्रेमवर्क डिफ़ॉल्ट प्लस पेज कंपोनेंट)। बताएं कि तीसरा सेट जोड़ने के बजाय किसे बंद करना है। ### 4. डिलीवर करें `templates/share-meta-review.md` भरें: पहले/बाद का प्रीव्यू, फिक्स टेबल, वास्तविक मानों के साथ एक पूरा <head> ब्लॉक (या स्पष्ट रूप से चिह्नित प्लेसहोल्डर्स), शेयर इमेज स्पेक (1200x630 JPEG/PNG ~1 MB से कम, सुरक्षित केंद्र में टेक्स्ट), और कैश कैसे रीफ्रेश करें (Facebook Sharing Debugger "Scrape Again", LinkedIn Post Inspector; X, Slack और WhatsApp कैश समाप्त होने के बाद या बदले URL के साथ फिर से लाते हैं)। ## उदाहरण परिणाम `examples/product-page.html` पर चेकर 21 निष्कर्ष रिपोर्ट करता है (HIGH 1, MEDIUM 10, LOW 10): <head> में एकमात्र og:image एक relative SVG लोगो है, वास्तविक प्रोडक्ट इमेज <body> में 800x800 पर है, SEO प्लगइन एक दूसरा og:title जोड़ता है जिसमें अनरेंडर्ड `{{ product.name }}` है, og:url में `?utm_source=newsletter` है और relative canonical से भिन्न है, `twitter:card` `large` है, twitter:site `@peakline` के बजाय एक URL है, og:description `name=` का उपयोग करता है और 269 अक्षर चलता है, और टाइटल सिर्फ `Peakline` है। `examples/product-page-fixed.html` साफ जांच करता है (exit 0)। ## नियम - सर्वर-रेंडर्ड HTML का न्याय करें; स्पष्ट रूप से कहें जब टैग्स केवल JavaScript चलने के बाद मौजूद हों। - फिक्स्ड टैग्स के लिए उत्पाद तथ्य, कीमतें या ब्रांड हैंडल कभी आविष्कार न करें; पेज की अपनी कॉपी का उपयोग करें या `<placeholder>` चिह्नित करें। - एकल-मान टैग के लिए एक मान; डुप्लिकेट स्रोत को ओवरराइड करने के बजाय हटाएं। - og:url, og:image, twitter:image और canonical में सभी URLs बिना ट्रैकिंग पैरामीटर के पूर्ण https:// URLs होने चाहिए। - वादा न करें कि प्लेटफॉर्म कैसे क्रॉप करेगा या कब रीफ्रेश करेगा; प्रलेखित साइज और रीफ्रेश टूल दें, और बाकी को प्लेटफॉर्म के डीबगर में "सत्यापित करें" के रूप में चिह्नित करें। - og:title को साइट-नाम प्रत्यय से मुक्त रखें (og:site_name ब्रांड ले जाता है) जब तक उपयोगकर्ता इसे नहीं चाहता।