Meta Tag Generator

An SEO meta tag builder built with vibecoding in ~5 minutes.

Details

Previews

https://example.com
My Awesome Project
A cool project built with vibecoding. Fast, modern, and open source.
OG Image Preview
My Project
My Awesome Project
A cool project built with vibecoding. Fast, modern, and open source.

Generated Tags

<!-- Primary Meta Tags -->
<title>My Awesome Project</title>
<meta name="title" content="My Awesome Project" />
<meta name="description" content="A cool project built with vibecoding. Fast, modern, and open source." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com" />
<meta property="og:title" content="My Awesome Project" />
<meta property="og:description" content="A cool project built with vibecoding. Fast, modern, and open source." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:site_name" content="My Project" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com" />
<meta property="twitter:title" content="My Awesome Project" />
<meta property="twitter:description" content="A cool project built with vibecoding. Fast, modern, and open source." />
<meta property="twitter:image" content="https://example.com/og-image.png" />
<meta property="twitter:site" content="@myhandle" />

<!-- Canonical -->
<link rel="canonical" href="https://example.com" />

Built with this prompt

Build a meta tag generator in React with:
- Input fields for: title, description, URL, OG image URL, site name, Twitter handle
- Live preview of generated meta tags (Primary, Open Graph, Twitter Card, Canonical)
- Google search result preview showing title and description
- Twitter/social card preview
- Copy all tags button
- Syntax-highlighted output
- Dark theme
Try in Project Starter →