---
title: "Install Unhead Schema.org"
description: "Add Schema.org structured data to React apps with the @unhead/schema-org React adapter."
canonical_url: "https://unhead.unjs.io/docs/react/schema-org/guides/get-started/installation"
last_updated: "2026-08-11T00:40:28.517Z"
---

## 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
```

</code-group>

### 2. Configure Schema.org Params

At a minimum, provide a [`host`](/docs/schema-org/guides/core-concepts/params). You can set it through Unhead's template params:

```tsx
import { useHead } from '@unhead/react'

function SchemaConfig() {
  useHead({
    templateParams: {
      schemaOrg: {
        host: 'https://example.com',
      }
    }
  })

  return null
}
```

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

### 3. Add Site Schema.org

Import the React adapter so `useSchemaOrg()` gets the current head instance from React context and follows the component lifecycle:

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

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 react from '@vitejs/plugin-react'
import { Unhead } from '@unhead/react/vite'
import { defineConfig } from 'vite'

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

## Optional: Auto-Imports

The React adapter exports an auto-import preset for Schema.org functions:

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

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

## Next Steps

1. Choose an [Identity](/docs/schema-org/guides/recipes/identity)
2. Set up your pages with [Schema.org Params](/docs/schema-org/guides/core-concepts/params)
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)