---
title: 'Install Unhead Schema.org with Solid.js'
description: 'Get started with Unhead Schema.org in your Solid.js project.'
navigation:
  title: 'Installation'
---

## Setup

1. Install `@unhead/schema-org` dependency to your project:

::code-group

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

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

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

::

2. Setup with Solid.js

Import and use Schema.org with Solid.js:

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

// Create the head instance with the Schema.org plugin
const head = createHead({
  plugins: [
    SchemaOrgUnheadPlugin({
      // Configure Schema.org params
      host: 'https://example.com',
      // ... other options
    }),
  ]
})

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

3. Add Schema.org nodes in your components:

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

function SiteSchema() {
  // Add Schema.org structured data
  useSchemaOrg([
    // Define identity (Organization or Person)
    defineWebSite({
      name: 'My Awesome Website',
    }),
    defineWebPage(),
  ])

  return null
}

// Use it in your App
function App() {
  return (
    <>
      <SiteSchema />
      {/* Rest of your app */}
    </>
  )
}
```

## Schema.org Configuration Options

At a minimum you should provide a [host](https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls) in your Schema.org configuration.

Here's a more complete example:

```tsx
const head = createHead({
  plugins: [
    SchemaOrgUnheadPlugin({
      // Base URL for your site (required)
      host: 'https://example.com',

      // Default language
      defaultLanguage: 'en',

      // Organization or Person identity
      identity: {
        type: 'Organization',
        name: 'My Company',
        logo: 'https://example.com/logo.png',
      },

      // Enable debug mode for development
      debug: process.env.NODE_ENV !== 'production',
    }),
  ]
})
```

See the [Schema.org Params](/docs/schema-org/guides/core-concepts/params) for all available options.

## Recommended: Tree-shaking for SSR

If you're using Vite SSR with Solid.js, it's highly recommended to add the [Unhead tree-shaking plugin](/docs/head/guides/advanced/vite-plugin):

```ts [vite.config.ts]
import UnheadVite from '@unhead/addons/vite'
import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'

export default defineConfig({
  plugins: [
    solidPlugin(),
    UnheadVite(),
  ]
})
```

This will remove the `@unhead/schema-org` dependency from your client bundle, and only include it in your server bundle.

## Optional: Auto-Imports

If you're using Vite with [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import), you can configure automatic imports for Schema.org composables:

```ts [vite.config.ts]
import { schemaAutoImports } from '@unhead/schema-org'
import AutoImport from 'unplugin-auto-import/vite'
import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'

export default defineConfig({
  plugins: [
    solidPlugin(),
    AutoImport({
      imports: [
        // Auto-import Schema.org composables
        {
          '@unhead/schema-org': schemaAutoImports,
        },
      ],
    }),
  ]
})
```

## Using Schema.org with Reactivity

You can leverage Solid.js's reactivity system with Schema.org:

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

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

function ArticleSchema(props) {
  const [article] = createResource(() => props.id, fetchArticleData)

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

  return null
}
```

## Next Steps

Your Solid.js app is now serving basic Schema.org structured data, congrats! 🎉

The next steps are:

1. Choose an [Identity](/docs/schema-org/guides/recipes/identity)
2. Set up your pages for [Schema.org structures](/docs/schema-org/guides/core-concepts/nodes)
3. Then follow some recipes:

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