getting started

Install Unhead Schema.org

Get started with Unhead Schema.org by installing the dependency to your project.

Using Nuxt? Check out nuxt-schema-org.

Demos

Vite SPA

Vite + Vite SSR

Setup

  1. Install @unhead/schema-org dependency to your project:
yarn
yarn add -D @unhead/schema-org
  1. Configure the Schema.org params

At a minimum you should provide a host.

import { SchemaOrgUnheadPlugin } from '@unhead/schema-org'useHead({  templateParams: {    schemaOrg: {      host: 'https://example.com',    }  }})

See the Schema.org Params for all options you can pass on schemaOrg.

3. Add Site Schema.org

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

If you're using Vite SSR, it's highly recommended to add the Unhead tree-shaking plugin.

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

@unhead/schema-org
import { defineConfig } from 'vite'import { unhead } from '@unhead/vite-plugin'export default defineConfig({  plugins: [    unhead(),  ]})

Optional: Auto-Imports

If you're using Vite with unplugin-vue-components or unplugin-auto-import, you can optionally configure automatic imports.

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

@unhead/schema-org
import { SchemaOrgResolver, schemaAutoImports } 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,        },      ],    }),  ]})

Next Steps

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

The next steps are:

  1. Choose an Identity
  2. Set up your pages for Schema.org Params
  3. Then feel free to follow some recipes: