Meta Tag Generator
Build title, description, canonical, and social meta tags. Your work stays on this device whenever possible.
How to use Meta Tag Generator
- Type the "Page Title (<title>)" and watch its counter turn red past 60 characters; then fill "Meta Description", whose counter turns amber under 120 or over 160.
- Set "Canonical URL" and choose a "Robots Directive" such as noindex, follow from the dropdown.
- In the social block add "OG Title (Social Title)", "OG Image URL (1200x630 recommended)", "Site Name" and pick "summary_large_image" or "summary" in "Twitter Card".
- Switch between the tabs "HTML <meta>", "Next.js Metadata (App Router)", "Nuxt 3 / Vue (useSeoMeta)" and "JSON Format" to see the same values in each syntax.
- To start from existing markup click "Paste Existing <head> to Edit", paste it and press "Parse & Populate Fields"; finish with "Copy Generated Meta Tags" or "Download .html Snippet".
Worked example
Enter the title Blue Widgets | Acme, a 140 character description, canonical https://acme.example/widgets and robots noindex, follow. The HTML tab starts with the comment Primary Meta Tags, then <title>Blue Widgets | Acme</title>, a meta name="title" line, a description line and <link rel="canonical" href="https://acme.example/widgets">. The robots line reads noindex, follow, and a warning about dropping the page from the index appears.
When to use this tool
- Drafting the head block for a new landing page before it goes to a developer.
- Converting an existing HTML head into a Next.js metadata object during a framework migration.
- Auditing a client's title and description lengths without opening browser developer tools.
Important limitations
Search engines and social platforms crawl meta tags independently. Generating tags does not guarantee specific snippet rendering or indexation if pages violate search quality guidelines.
Frequently asked questions
Which fields does the head parser recover?
It reads the title, meta description, canonical link, og:title, og:image and og:site_name. Robots, Twitter card type and any other tags in the pasted markup are ignored, so set those two dropdowns again by hand after parsing.
Are quotes in my title escaped?
The HTML output inserts your text as typed. A double quote inside the title or description will end the attribute early and break the tag, so use typographic quotes or replace them with " before copying. The Next.js and Nuxt tabs escape single quotes.
Why is there no separate Open Graph description?
The single Meta Description field is reused for og:description and twitter:description. If your social text must differ from the search snippet, edit those two lines in the output after copying.
What do the red and amber warnings mean?
They are length hints: a title over 60 characters and a description under 50 or over 160 may be cut in results, and an image URL not starting with http triggers a warning. They are guidelines, not limits enforced by any search engine.
Is the Next.js output ready to paste?
It produces an exported metadata object with title, description, alternates.canonical and openGraph keys for an App Router layout or page. Check it against your project setup, since it does not cover every field the framework supports.