मोफत मेटा टॅग आणि Open Graph जनरेटर

हे कसे कार्य करते

सर्व tag एकत्रीकरण आणि head-पार्सिंग थेट तुमच्या ब्राउझरमध्ये होते — सर्व्हर सामील नाही. साधन HTML स्ट्रिंग्स reactively तयार करण्यासाठी React चा useMemo आणि import/audit वैशिष्ट्यासाठी विद्यमान page markup वाचण्यासाठी ब्राउझरचे native DOMParser API वापरते.

1. 1
   Form इनपुट लाइव्ह एकत्रीकरण चालवते

   तुम्ही टाइप करताच, useMemo hook तात्काळ संपूर्ण tag block पुन्हा एकत्र करतो — title, meta description, Open Graph properties, आणि Twitter Card attributes — विशेष अक्षरे (&, <, >, ") escape करत त्यामुळे आउटपुट थेट HTML मध्ये पेस्ट करण्यास सुरक्षित असतो.
2. 2
   ब्राउझरच्या URL constructor द्वारे URL प्रमाणीकरण

   प्रत्येक URL फील्ड (page URL, social image) ब्राउझरच्या बिल्ट-इन URL constructor वापरून प्रमाणित होते. फक्त dotted hostnames सह योग्य-स्वरूपाचे http:// किंवा https:// पत्ते पास होतात; अवैध मूल्ये copy बटण अवरोधित करतात आणि inline त्रुटी दाखवतात.
3. 3
   आयात: DOMParser विद्यमान head markup वाचतो

   तुम्ही ऑडिट करण्यासाठी विद्यमान <head> HTML पेस्ट केल्यास, साधन ते inert मोडमध्ये DOMParser मधून चालवते — कोणतेही scripts चालत नाहीत आणि कोणत्याही नेटवर्क विनंत्या होत नाहीत. नंतर ते पार्स केलेल्या दस्तऐवजात ज्ञात meta selectors (og:title, twitter:description, canonical link, इ.) शोधते आणि त्याला जे सापडते त्याने form फील्ड्स आधी भरते.
4. 4
   लाइव्ह Google आणि social card प्रिव्ह्यू

   साधन तीच form स्थिती वापरून रिअल टाइममध्ये styled Google शोध निकाल आणि Open Graph card प्रिव्ह्यू रेंडर करते, त्यामुळे तुम्ही आउटपुट कॉपी करण्याआधी title आणि description नेमके कसे कापले जातील ते पाहू शकता.

संबंधित साधने