Installing Unhead with Solid.js · Unhead [Unhead Home](https://unhead.unjs.io/ "Home") - [Docs](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview) - [Tools](https://unhead.unjs.io/tools) - [Learn](https://unhead.unjs.io/learn/guides/what-is-capo) [Releases](https://unhead.unjs.io/releases) Search…```k`` /` [Unhead on GitHub](https://github.com/unjs/unhead) [User Guides](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview) [API](https://unhead.unjs.io/docs/solid-js/head/api/get-started/overview) [Releases](https://unhead.unjs.io/docs/solid-js/releases/v3) Solid.js - [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation) - [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation) - [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation) - [Switch to React](https://unhead.unjs.io/docs/react/head/guides/get-started/installation) - [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/get-started/installation) - [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/get-started/installation) - [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/installation) v3 (stable) Head - [Discord Support](https://discord.com/invite/275MBUBvgP) - Get Started - [Overview](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview) - [Introduction to Unhead](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/intro-to-unhead) - [Starter Recipes](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/starter-recipes) - [Installation](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation) - [Upgrade Guide](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/migration) - Core Concepts - [Titles & Title Templates](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/titles) - [Tag Sorting & Placement](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/positions) - [Class & Style Attributes](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/class-attr) - [Inline Style & Scripts](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/inner-content) - [Tag Deduplication](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/handling-duplicates) - [DOM Event Handling](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/dom-event-handling) - [Script Loading](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/loading-scripts) - [Reactivity](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/reactivity) - [StreamingNew](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/streaming) - Build Plugins - [Overview](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/overview) - [Tree-Shaking](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/tree-shaking) - [useSeoMeta Transform](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/seo-meta-transform) - [Minify Transform](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/minify-transform) - [Devtools](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/devtools) - Plugins - [Template Params](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/template-params) - [Alias Sorting](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/alias-sorting) - [Canonical Plugin](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/canonical) - [Infer SEO Meta](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/infer-seo-meta-tags) - [Minify](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/minify) - [Validate](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/validate) Get Started # Installing Unhead with Solid.js [Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.solid-js/head/guides/0.get-started/1.installation.md) Last updated Apr 5, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [docs: documentation content audit and formatting improvements (#718)](https://github.com/unjs/unhead/pull/718). On this page - [Introduction](#introduction) - [How do I install Unhead with Solid.js?](#how-do-i-install-unhead-with-solidjs) - [Next Steps](#next-steps) ## [Introduction](#introduction) **Quick Start:** Install `@unhead/solid-js`, wrap your app with `UnheadContext.Provider`, and use `useHead()` in components. Unhead has first-class support for Solid.js, allowing you to manage your head tags using the `useHead()` hook and other ecosystem hooks. It can directly replace [Solid Meta](https://github.com/solidjs/solid-meta), handling a more diverse set of use cases from SEO to structured data. It's designed to work with any Solid.js setup. This guide assumes you're following a similar structure to the [Vite: ssr-solid-js-ts](https://github.com/bluwy/create-vite-extra/tree/master/template-ssr-solid-js-ts) template or a similar SPA setup. ## [How do I install Unhead with Solid.js?](#how-do-i-install-unhead-with-solidjs) ### [1. Add Dependency](#_1-add-dependency) Install `@unhead/solid-js` dependency to your project. pnpm bun npm yarn bash `pnpm add @unhead/solid-js@next` ### [2. How do I set up client-side rendering?](#_2-how-do-i-set-up-client-side-rendering) To begin with, we'll import the function to initialize Unhead in our _client_ Solid.js app from `@unhead/solid-js/client`. In Vite this entry file is typically named `entry-client.ts`. If you're not server-side rendering, you can add this to your main Solid.js app entry instead. src/entry-client.ts ``` import { createHead, UnheadContext } from '@unhead/solid-js/client' import { hydrate } from 'solid-js/web' import App from './App' /* @refresh reload */ import './index.css' hydrate(() => { const head = createHead() return () }, document.getElementById('root')) ``` ### [3. How do I set up server-side rendering?](#_3-how-do-i-set-up-server-side-rendering) Serving your app as an SPA? You can [skip](#4-how-do-i-add-head-tags) this step. Setting up server-side rendering is more complicated as it requires rendering out the tags to the HTML string before sending it to the client. We'll start with setting up the plugin in the _server_ entry this time. Make sure to import from `@unhead/solid-js/server` instead and add the `unhead` in the return object. src/entry-server.ts ``` import { createHead, UnheadContext } from '@unhead/solid-js/server' import { renderToString } from 'solid-js/web' import App from './App' export function render(_url: string) { const unhead = createHead() const html = renderToString(() => ) return { html, unhead } } ``` Now we need to render out the head tags _after_ Solid.js has rendered the app. Within your `server.js` file or wherever you're handling the template logic, you need to transform the template data for the head tags using `transformHtmlTemplate()`. server.ts ``` import { transformHtmlTemplate } from '@unhead/solid-js/server' // ... // Serve HTML app.use('*', async (req, res) => { try { // ... const rendered = await render(url) const html = await transformHtmlTemplate( rendered.unhead, template .replace(\`\`, generateHydrationScript()) .replace(\`\`, rendered.html ?? '') ) res.status(200).set({ 'Content-Type': 'text/html' }).send(html) } catch (e) { // ... } }) // ... ``` ### [4. How do I add head tags?](#_4-how-do-i-add-head-tags) Done! Your app should now be rendering head tags on the server and client. To improve your app's stability, Unhead will now insert important default tags for you: - `` - `` - `` You may need to change these for your app requirements, for example, you may want to change the default language. Adding tags in your server entry means you won't add any weight to your client bundle. src/entry-server.ts ``` import { createHead, UnheadContext } from '@unhead/solid-js/server' import { renderToString } from 'solid-js/web' import App from './App' export function render(_url: string) { const unhead = createHead({ // change default initial lang init: [ { htmlAttrs: { lang: 'en' }, title: 'Default title', titleTemplate: '%s - My Site', }, ] }) const html = renderToString(() => ) return { html, unhead } } ``` For adding tags in your components, use the `useHead()` hook: App.tsx ``` import { useHead } from '@unhead/solid-js' export default function App() { useHead({ title: 'My Awesome Site', meta: [ { name: 'description', content: 'My awesome site description' } ] }) return (

Hello World

) } ``` ### [5. How do I enable auto-imports? (Optional)](#_5-how-do-i-enable-auto-imports-optional) If you're using [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import), you can automatically import the composables. vite.config.ts ``` import { hookImports } from '@unhead/solid-js' import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ AutoImport({ imports: [ hookImports, ], }), // ... ] }) ``` ## [Next Steps](#next-steps) Your Solid.js app is now setup for head management, congrats! 🎉 You can get started with any of the hooks: - [`useHead()`](https://unhead.unjs.io/docs/head/api/composables/use-head) - [`useSeoMeta()`](https://unhead.unjs.io/docs/head/api/composables/use-seo-meta) - [`useScript()`](https://unhead.unjs.io/docs/head/api/composables/use-script) for performance optimized script loading Or explore some of the optional extras: - Add [`useSchemaOrg()`](https://unhead.unjs.io/docs/schema-org/api/composables/use-schema-org) for structured data [Edit this page](https://github.com/unjs/unhead/edit/main/docs/0.solid-js/head/guides/0.get-started/1.installation.md) [Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.solid-js/head/guides/0.get-started/1.installation.md) Did this page help you? [Installation Add Schema.org to React apps with @unhead/schema-org. Setup defineWebSite(), defineWebPage() for Google Rich Results.](https://unhead.unjs.io/docs/react/schema-org/guides/get-started/installation) [Upgrade Guide Learn how to migrate between Unhead versions for Solid.js users.](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/migration) On this page - [Introduction](#introduction) - [How do I install Unhead with Solid.js?](#how-do-i-install-unhead-with-solidjs) - [Next Steps](#next-steps) [GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP) [ /llms.txt](https://unhead.unjs.io/llms.txt) [Part of the UnJS ecosystem](https://unjs.io/) ### Head Management - [Getting Started](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview) - [useHead](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-head) - [useSeoMeta](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-seo-meta) - [useHeadSafe](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-head-safe) - [useScript](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-script) ### Schema.org - [Getting Started](https://unhead.unjs.io/docs/solid-js/schema-org/guides/get-started/overview) - [useSchemaOrg](https://unhead.unjs.io/docs/solid-js/schema-org/api/composables/use-schema-org) - [Nodes](https://unhead.unjs.io/docs/solid-js/schema-org/guides/core-concepts/nodes) - [Recipes](https://unhead.unjs.io/docs/solid-js/schema-org/guides/recipes/identity) ### Guides - [Titles](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/titles) - [Streaming SSR](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/streaming) - [DOM Events](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/dom-event-handling) - [Plugins](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/template-params) ### Tools - [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator) - [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator) - [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator) - [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer) ### Articles - [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo) ### Research - [State of in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026) - [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance) - [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research) Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)