---
title: "Installing Unhead with Solid.js"
description: "Set up Unhead in Solid.js with UnheadContext.Provider and useHead(). Includes client and SSR entry points."
canonical_url: "https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation"
last_updated: "2026-08-10T05:41:59.780Z"
---
Install `@unhead/solid-js`, wrap the application with `UnheadContext.Provider`, and call `useHead()` in components.
The adapter uses Solid context for the head instance and exposes hooks for head tags, SEO metadata, and scripts. The examples follow [Vite's SSR structure](https://vite.dev/guide/ssr.html); SPAs use the same client entry.
## Install Unhead
### 1. Add Dependency
Install the `@unhead/solid-js` dependency in your project.
### 2. Set Up Client-Side Rendering
Create the browser instance from `@unhead/solid-js/client`. In a Vite SSR app this usually belongs in `entry-client.ts`; in an SPA, put it in the main entry.
```tsx [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. Set Up Server-Side Rendering
Serving your app as an SPA? You can [skip](#4-add-head-tags) this step. See the [SPA guide](/docs/head/guides/get-started/single-page-applications) for template defaults, crawler limits, and route prerendering.
For SSR, create a fresh instance from `@unhead/solid-js/server` for each request and return it with the rendered app.
```tsx [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 }
}
```
After Solid renders, pass the instance and complete HTML template to `transformHtmlTemplate()`:
```ts [server.ts]
import { transformHtmlTemplate } from '@unhead/solid-js/server'
// ...
// Serve HTML
app.use('*', async (req, res) => {
try {
// ...
const rendered = await render(url)
const html = transformHtmlTemplate(
rendered.unhead,
template
.replace(``, generateHydrationScript())
.replace(``, rendered.html ?? '')
)
res.status(200).set({ 'Content-Type': 'text/html' }).send(html)
}
catch (e) {
// ...
}
})
// ...
```
### 4. Add Head Tags
The server head inserts three defaults:
- ``
- ``
- ``
Set server-only defaults through `init`. Keeping them in the server entry also keeps them out of the client bundle.
```tsx [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 }
}
```
Call `useHead()` inside a component to add tags:
```tsx [App.tsx]
import { useHead } from '@unhead/solid-js'
export default function App() {
useHead({
title: 'Example Site',
meta: [
{ name: 'description', content: 'An example page description.' }
]
})
return (
Hello World
)
}
```
## Next Steps
Hooks:
- [`useHead()`](/docs/head/api/composables/use-head)
- [`useSeoMeta()`](/docs/head/api/composables/use-seo-meta)
- [`useScript()`](/docs/head/api/composables/use-script) for loading triggers and script lifecycle hooks
Optional integrations:
- Add [`useSchemaOrg()`](/docs/schema-org/api/composables/use-schema-org) for structured data