Install Unhead Schema.org

Using Nuxt? See nuxt-schema-org in the official Nuxt module directory.

Demos

Set Up

1. Install the Package

Install @unhead/schema-org in your project:

yarn add @unhead/schema-org

npm install @unhead/schema-org

pnpm add @unhead/schema-org

2. Configure the Plugin

At a minimum, provide a host when creating the head instance:

import { UnheadSchemaOrg } from '@unhead/schema-org/vue'
import { createHead } from '@unhead/vue/client'

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

Use createHead() from @unhead/vue/server for SSR. See Schema.org Params for all available options.

3. Add Site Schema.org Data

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

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

Recommended: Vite Plugin

If you're using Vite, the Vite plugin can tree-shake server-only code and transform head composables at build time:

import vue from '@vitejs/plugin-vue'
import { Unhead } from '@unhead/vue/vite'

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

Optional: Auto-Imports

If you're using Vite with unplugin-vue-components and unplugin-auto-import, configure the Vue adapter's presets in vite.config.ts:

import { schemaOrgAutoImports, SchemaOrgResolver } from '@unhead/schema-org/vue'

export default defineConfig({
  plugins: [
    // ...
    Components({
      // ...
      resolvers: [
        // auto-import schema-org components
        SchemaOrgResolver(),
      ],
    }),
    AutoImport({
      // ...
      imports: schemaOrgAutoImports,
    }),
  ]
})

SchemaOrgResolver() supports the deprecated component API. New projects can omit the Components() configuration and use the auto-imported composables instead.

Next Steps

1. Choose an Identity
2. Set up your pages for Schema.org Params
3. Follow a recipe:

• Breadcrumbs
• FAQ Page
• Site Search