Unhead
Unhead is a framework-agnostic head management library for Vue, React, Svelte, and more, offering performant, reactive document metadata and SEO optimization.
Unhead is a powerful, framework-agnostic document head manager designed to improve the performance and developer experience of reactive SSR JavaScript applications. Created to address the complexities of managing <head> tags across various modern web frameworks, Unhead ensures that your SEO metadata, structured data, and third-party scripts are handled efficiently during both server-side rendering (SSR) and client-side updates. By tracking side effects and offering a unified API, it provides a consistent way to update document metadata, regardless of whether you are using Vue, React, Svelte, Solid.js, Angular, or vanilla TypeScript.
Functionality: The library streamlines head management by providing robust primitives such as useHead() for general tag manipulation, useSeoMeta() for simplifying complex SEO configurations, and useScript() for performant, deferred third-party script loading. It automatically handles tag deduplication, sorting, and lifecycle management, ensuring that changes to components are correctly reflected in the document head without manual DOM manipulation. Unhead also includes advanced features like automatic Schema.org generation and Capo.js-compliant tag ordering to optimize search engine ranking and page load speeds.
Some of the key features are:
useHead(): A flexible composable for managing any head tag with type-narrowing and automatic deduplication.useSeoMeta(): A flat configuration object approach to managing over 100 meta tags effortlessly.useScript(): A specialized utility for optimized third-party script loading that supports deferred execution and lifecycle tracking.- Capo.js Integration: Automatic ordering of head tags according to performance best practices to minimize re-parsing and improve LCP.
- Streaming SSR Support: Native support for streaming head tags as data resolves, which is essential for modern high-performance server frameworks.
- Schema.org Integration: Simplifies the creation of complex structured data graphs without manual JSON-LD maintenance.
- Built-in Minification: Options to minify inline styles and scripts during the rendering process for smaller bundle sizes.
- Unified Vite/Webpack Plugins: Comprehensive build plugins that include tag validation, tree-shaking, and detailed development tools for debugging your head state.
Operation: Unhead operates by hooking into the application’s lifecycle, allowing developers to define head tags at the component level. On the server, it collects these tags and transforms them into a serialized HTML structure, often integrated through transformHtmlTemplate(). On the client, it dynamically manages the DOM, ensuring that updates are applied reactively when components mount or state changes. By providing both server-side rendering instances and client-side providers, Unhead maintains a synchronized state that ensures document metadata is accurate and searchable from the initial server response through to client-side navigation.
Some common use cases include:
- Dynamic SEO Management: Automatically updating page titles and meta descriptions based on current route data in a multi-page application.
- Third-Party Script Optimization: Safely loading analytics or tracking scripts only when they are needed, minimizing impact on the initial page load.
- Structured Data Implementation: Dynamically injecting JSON-LD schema graphs to enhance search engine results for articles, products, or organizational data.
- Template Parameter Injection: Using dynamic tokens in title or meta tags to ensure consistent site-wide branding.
- Performance Tuning: Using the built-in analyzer to reorder head tags automatically to ensure critical resources like stylesheets and preconnect hints are discovered as early as possible by the browser.