Install Unhead Schema.org

Setup

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 Schema.org Params

At a minimum, provide a host. You can set it through Unhead's template params:

import { useHead } from '@unhead/react'

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

  return null
}

See Schema.org 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:

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 can tree-shake server-only code and transform head composables at build time:

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:

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
2. Set up your pages with Schema.org Params
3. Follow a recipe:

• Breadcrumbs
• FAQ Page
• Site Search