---
title: "Install Unhead Schema.org"
description: "Add Schema.org to Svelte apps with @unhead/schema-org. Setup defineWebSite(), defineWebPage() for Google Rich Results."
canonical_url: "https://unhead.unjs.io/docs/svelte/schema-org/guides/get-started/installation"
last_updated: "2026-05-12T13:30:50.918Z"
---

## Demos

<u-button target="_blank" to="https://stackblitz.com/edit/vitejs-vite-xbb1fa" style="margin-right: 10px;">

Vite SPA

</u-button>

<u-button target="_blank" to="https://stackblitz.com/edit/vitejs-vite-vsf3sy">

Vite + Vite SSR

</u-button>

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

</code-group>

1. 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 { UnheadSchemaOrg } from '@unhead/schema-org'

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

## Recommended: Vite Plugin

If you're using Vite, the [Vite plugin](/docs/head/guides/build-plugins/overview) optimizes your production bundle by tree-shaking server-only code and transforming head composables at build time:

```ts
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { Unhead } from '@unhead/svelte/vite'

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

## 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,
        },
      ],
    }),
  ]
})
```

</code-group>

## Next Steps

Your 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)