Using Nuxt? Check out nuxt-schema-org.

Demos

Setup

1. Install @unhead/schema-org dependency to your project:

yarn add -D @unhead/schema-org

2. 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(),
])

Recommended: Tree-shaking for SSR

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.

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 or unplugin-auto-import, you can optionally configure automatic imports.

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

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

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:

• Breadcrumbs
• FAQ Page
• Site Search