---
title: 'Install Unhead Schema.org'
description: 'Get started with Unhead Schema.org by installing the dependency to your project.'
navigation:
  title: 'Installation'
---

Using :Icon{name="logos:nuxt-icon"} Nuxt? Check out [nuxt-schema-org](https://nuxtseo.com/schema-org).

## Demos

::UButton{to="https://stackblitz.com/edit/vitejs-vite-xbb1fa" target="_blank" style="margin-right: 10px;"}
Vite SPA
::

::UButton{to="https://stackblitz.com/edit/vitejs-vite-vsf3sy" target="_blank"}
Vite + Vite SSR
::

## 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. Configure the Schema.org params

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

```ts
import { SchemaOrgUnheadPlugin } from '@unhead/schema-org/vue'

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

See the [Schema.org Params](/docs/schema-org/guides/core-concepts/params) for all options you can pass on `schemaOrg`.

### 3. Add Site Schema.org

```ts
import { SchemaOrgUnheadPlugin } from '@unhead/schema-org/vue'

useSchemaOrg([
  // @todo Select Identity: http://unhead.unjs.io/schema-org/recipes/identity
  defineWebSite({
    name: 'My Awesome Website',
  }),
  defineWebPage(),
])
```

## Recommended: Tree-shaking for SSR

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

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

```ts [@unhead/schema-org]
import UnheadVite from '@unhead/addons/vite'
import { defineConfig } from 'vite'

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

## Optional: Auto-Imports

If you're using Vite with [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) or [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import), you can optionally configure automatic imports.

Modify your `vite.config.ts` to get the auto-imports.

::code-group

```ts [@unhead/schema-org]
import { schemaAutoImports, SchemaOrgResolver } from '@unhead/schema-org'

export default defineConfig({
  plugins: [
    // ...
    Components({
      // ...
      resolvers: [
        // auto-import schema-org components
        SchemaOrgResolver(),
      ],
    }),
    AutoImport({
      // ...
      imports: [
        // auto-import schema-org composables
        {
          '@unhead/schema-org': schemaAutoImports,
        },
      ],
    }),
  ]
})
```

```ts [@unhead/schema-org/vue]
import { schemaAutoImports, SchemaOrgResolver } from '@unhead/schema-org/vue'

export default defineConfig({
  plugins: [
    // ...
    Components({
      // ...
      resolvers: [
        // auto-import schema-org components
        SchemaOrgResolver(),
      ],
    }),
    AutoImport({
      // ...
      imports: [
        // auto-import schema-org composables
        {
          '@unhead/schema-org/vue': schemaAutoImports,
        },
      ],
    }),
  ]
})
```

::

## Next Steps

Your Vue app is now serving basic Schema.org, congrats!

The next steps are:

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