About head
head turns a handful of facts about a web page into the metadata search engines and social platforms read — then writes it out as code for the framework you actually ship.
One document, nine targets
Most metadata tools give you a block of HTML and leave the translation to you. This one keeps
a single document and compiles it to each framework's own idiom: Next.js gets the Metadata API
and the separate viewport export it requires for themeColor, Astro gets set:html, Nuxt gets useHead, React Router gets its meta export. The targets are HTML,
Next.js as both a static export and generateMetadata, SvelteKit, Astro, React
Helmet, Nuxt, React Router, and raw JSON.
Why it measures pixels
Search results truncate by rendered width, not by character count. WWWWW and iiiii are five characters each and nowhere near the same width, so a character counter
tells you very little about whether your title will survive. head measures the string against the
real budget — roughly 600 pixels for a title, 920 for a description — and shows you the exact text
that gets shown.
Structured data you can defend
Twelve schema.org types compile into a single @graph: Organization, WebSite,
Article, Product, BreadcrumbList, FAQPage, LocalBusiness, Person, Event, SoftwareApplication,
VideoObject and HowTo. Empty blocks are dropped rather than emitted, and the editor is
explicit that markup has to describe what a visitor can actually see — describing content that
is not on the page is what gets a site penalised.
Questions
- Does my data leave the browser?
- No. The document you edit is kept in your browser’s local storage and never uploaded. The one exception is the AI drafting feature: when you ask for a draft, the brief you wrote is sent to Anthropic or OpenAI using a key you supply, through a proxy that uses it once and never stores it.
- Which frameworks can it export to?
- HTML, Next.js as both a static metadata export and generateMetadata, SvelteKit, Astro, React Helmet, Nuxt, React Router, and raw JSON. Each target is written in that framework’s own idiom rather than the same HTML in a wrapper.
- Do I need an account or an API key?
- No account, ever. An API key is only needed for AI drafting, you supply your own, and every other feature works without one.
- Why does it measure titles in pixels instead of characters?
- Because search results truncate by rendered width. “WWWWW” and “iiiii” are the same character count and nowhere near the same width, so a character counter tells you very little. The gauge measures the string and shows the exact text that survives the cut.
- Is it open source?
- Yes, under the MIT license. The source is at https://github.com/mrluisfer/seo-generator, and adding a framework target is a single entry in one file.
Contributing
Adding a framework target is one entry in a single file, and adding a schema.org type is one object in a registry — the form is generated from its field descriptors, so neither needs new interface code. The source is on GitHub under the MIT license.