MetaForge
A custom Next.js meta tag generator and auditor, built with clean architecture for maximum performance, accessibility, and SEO, scoring excellent results on Lighthouse.
The Challenge
Getting meta tags right is one of those things that looks simple but constantly causes problems - a title that's too long gets truncated on Google, a missing og:image means shared links show up blank on Twitter and Facebook, and there's no quick way to check what a page actually has versus what it should have. The challenge was to build a free, all-in-one tool that handles both generating meta tags from scratch and auditing existing pages, with live previews that show exactly how the page will appear across Google, Twitter/X, and Facebook before anything goes live.
The Solution
MetaForge was built as a single-page Next.js application with two modes - Generate and Audit. In Generate mode, users fill in their page title, description, canonical URL, OG image, and other fields while watching live preview cards update in real time for Google Search, Twitter/X, and Facebook/LinkedIn. Character counters with color-coded feedback keep titles and descriptions within optimal ranges. A one-click copy button exports the complete <head> code with all Open Graph and Twitter Card tags ready to paste. In Audit mode, users enter any live URL - the app fetches it server-side, parses the HTML, extracts every meta tag, and flags issues like missing og:image or titles over 60 characters. A single "Fix it" button copies whatever was found into the generator so users can correct and re-export. The entire app is styled with a custom dark-mode glassmorphism design and deployed on Vercel with a good Lighthouse score across all metrics.