Meta Tag Previewer
See how your link will look before you post it anywhere.
BeginnerWeb appDev tool6–12hAI-buildable 5/5no setupworth shipping
Enter page metadata and preview the resulting social cards across several platforms, each with its own truncation rules and image ratios. Then generate the tags. It catches the mistakes you'd otherwise only find after posting.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Fields for title, description, image and URL
- Previews render for several platforms with accurate styling
- Each preview applies that platform's real truncation rules
- Image aspect ratio warnings per platform
- Generated meta tags are shown and copyable
- A URL can be loaded to prefill from its existing tags
- Missing recommended tags are flagged
The interesting part
- Truncation rules differ per platform and change over time
- CORS prevents fetching arbitrary URLs' tags from the browser
- Recreating platform card styling accurately enough to be useful
Once it works
- Add a live crawler check against a deployed URL
- Add per-platform tag overrides
- Add structured data preview
Suggested stack
reacttypescripttailwind