---
title: 'Install Unhead Schema.org with Solid.js'
description: 'Add Schema.org structured data to Solid.js apps with the @unhead/schema-org Solid adapter.'
navigation:
  title: 'Installation'
---

## Setup

### 1. Install the Package

Install `@unhead/schema-org` in your project:

::code-group

```bash [yarn]
yarn add @unhead/schema-org
```

```bash [npm]
npm install @unhead/schema-org
```

```bash [pnpm]
pnpm add @unhead/schema-org
```

::

### 2. Configure the Plugin

Configure the Schema.org [`host`](/docs/schema-org/guides/core-concepts/params) when you create the head instance:

```tsx
import { UnheadSchemaOrg } from '@unhead/schema-org'
import { createHead, UnheadContext } from '@unhead/solid-js/client'
import { render } from 'solid-js/web'
import App from './App'

const head = createHead({
  plugins: [
    UnheadSchemaOrg({ host: 'https://example.com' }),
  ]
})

render(() => (
  <UnheadContext.Provider value={head}>
    <App />
  </UnheadContext.Provider>
), document.getElementById('root')!)
```

Use the same plugin configuration with `createHead()` from `@unhead/solid-js/server` for SSR. See [Schema.org Params](/docs/schema-org/guides/core-concepts/params) for all available options.

### 3. Add Schema.org Nodes

Import composables and node helpers from the Solid adapter:

```tsx
import { defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org/solid-js'

function SiteSchema() {
  useSchemaOrg([
    defineWebSite({ name: 'Example Site' }),
    defineWebPage(),
  ])

  return null
}
```

## Recommended: Vite Plugin

The [Vite plugin](/docs/head/guides/build-plugins/overview) can tree-shake server-only code and transform head composables at build time:

```ts [vite.config.ts]
import { Unhead } from '@unhead/solid-js/vite'
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

export default defineConfig({
  plugins: [solid(), Unhead()],
})
```

## Optional: Auto-Imports

The Solid adapter exports an auto-import preset:

```ts [vite.config.ts]
import { schemaOrgAutoImports } from '@unhead/schema-org/solid-js'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: schemaOrgAutoImports,
    }),
  ],
})
```

## Using Schema.org with Reactivity

Create the schema entry once, then patch it from a Solid effect:

```tsx
import { defineArticle, useSchemaOrg } from '@unhead/schema-org/solid-js'
import { createEffect, createResource } from 'solid-js'

async function fetchArticleData(id: string) {
  const response = await fetch(`/api/article/${id}`)
  return response.json()
}

function ArticleSchema(props: { id: string }) {
  const [article] = createResource(() => props.id, fetchArticleData)
  const entry = useSchemaOrg()

  createEffect(() => {
    entry.patch([
      defineArticle({
        headline: article()?.title || 'Loading...',
        description: article()?.summary || '',
        image: article()?.featuredImage || '',
        datePublished: article()?.publishDate,
        author: {
          name: article()?.author?.name || 'Anonymous',
        }
      })
    ])
  })

  return null
}
```

## Next Steps

1. Choose an [Identity](/docs/schema-org/guides/recipes/identity)
2. Set up your pages with [Schema.org nodes](/docs/schema-org/guides/core-concepts/nodes)
3. Follow a recipe:

- [Breadcrumbs](/docs/schema-org/guides/recipes/breadcrumbs)
- [FAQ Page](/docs/schema-org/guides/recipes/faq)
- [Site Search](/docs/schema-org/guides/recipes/site-search)