ఉచిత మెటా ట్యాగ్ & ఓపెన్ గ్రాఫ్ జనరేటర్

ఇది ఎలా పనిచేస్తుంది

అన్ని ట్యాగ్ కూర్పు మరియు head-పార్సింగ్ నేరుగా మీ బ్రౌజర్‌లో జరుగుతాయి — సర్వర్ ప్రమేయం లేదు. టూల్ HTML స్ట్రింగ్‌లను ప్రతిస్పందనాత్మకంగా నిర్మించడానికి React useMemo మరియు import/audit ఫీచర్ కోసం ఇప్పటికే ఉన్న పేజీ మార్కప్‌ను చదవడానికి బ్రౌజర్ స్థానిక DOMParser API ఉపయోగిస్తుంది.

1. 1
   ఫారమ్ ఇన్‌పుట్ లైవ్ కూర్పును నడుపుతుంది

   మీరు టైప్ చేస్తుండగా, useMemo హుక్ పూర్తి ట్యాగ్ బ్లాక్‌ను వెంటనే మళ్లీ కూర్చుతుంది — title, meta description, Open Graph properties, మరియు Twitter Card attributes — ప్రత్యేక అక్షరాలను (&, <, >, ") escape చేస్తూ, కాబట్టి అవుట్‌పుట్ నేరుగా HTMLలో అతికించడానికి సురక్షితం.
2. 2
   బ్రౌజర్ URL constructor ద్వారా URL ధృవీకరణ

   ప్రతి URL ఫీల్డ్ (page URL, social image) బ్రౌజర్ అంతర్నిర్మిత URL constructor ఉపయోగించి ధృవీకరించబడుతుంది. చుక్కలు ఉన్న hostnamesతో సరిగ్గా ఏర్పడిన http:// లేదా https:// చిరునామాలు మాత్రమే పాస్ అవుతాయి; చెల్లని విలువలు కాపీ బటన్‌ను నిరోధించి ఇన్‌లైన్ లోపాన్ని చూపుతాయి.
3. 3
   దిగుమతి: DOMParser ఇప్పటికే ఉన్న head మార్కప్‌ను చదువుతుంది

   మీరు ఆడిట్ చేయడానికి ఇప్పటికే ఉన్న <head> HTMLను అతికిస్తే, టూల్ దాన్ని inert మోడ్‌లో DOMParser ద్వారా నడుపుతుంది — ఏ scripts అమలు కావు, ఏ నెట్‌వర్క్ అభ్యర్థనలు చేయబడవు. తర్వాత పార్స్ చేసిన డాక్యుమెంట్‌లో తెలిసిన meta selectors (og:title, twitter:description, canonical link, మొదలైనవి) కోసం శోధించి, దొరికిన వాటితో ఫారమ్ ఫీల్డ్‌లను ముందుగా నింపుతుంది.
4. 4
   లైవ్ Google మరియు సోషల్ కార్డ్ ప్రివ్యూలు

   టూల్ అదే ఫారమ్ state ఉపయోగించి శైలీకృత Google శోధన ఫలితం మరియు Open Graph కార్డ్ ప్రివ్యూను రియల్ టైమ్‌లో చూపుతుంది, కాబట్టి అవుట్‌పుట్ కాపీ చేసే ముందు title మరియు description ఎలా కత్తిరించబడతాయో ఖచ్చితంగా చూడవచ్చు.

సంబంధిత సాధనాలు