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 { 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.

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:

• Breadcrumbs
• FAQ Page
• Site Search