Free Meta Tag & Open Graph Generator

How It Works

All tag assembly and head-parsing happens directly in your browser — no server involved. The tool uses React's useMemo to reactively build HTML strings and the browser's native DOMParser API to read existing page markup for the import/audit feature.

1. 1
   Form input drives live assembly

   As you type, a useMemo hook immediately reassembles the full tag block — title, meta description, Open Graph properties, and Twitter Card attributes — escaping special characters (&, <, >, ") so the output is safe to paste directly into HTML.
2. 2
   URL validation via the browser's URL constructor

   Each URL field (page URL, social image) is validated using the browser's built-in URL constructor. Only well-formed http:// or https:// addresses with dotted hostnames pass; invalid values block the copy button and show an inline error.
3. 3
   Import: DOMParser reads existing head markup

   If you paste existing <head> HTML to audit it, the tool runs it through DOMParser in inert mode — no scripts execute and no network requests are made. It then queries the parsed document for known meta selectors (og:title, twitter:description, canonical link, etc.) and pre-fills the form fields with whatever it finds.
4. 4
   Live Google and social card previews

   The tool renders a styled Google search result and an Open Graph card preview in real time using the same form state, so you can see exactly how the title and description will be truncated before you copy the output.

Related Tools