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
- Install
@unhead/schema-org
dependency to your project:
yarn
yarn add -D @unhead/schema-org
- 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.
@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:
- Choose an Identity
- Set up your pages for Schema.org Params
- Then feel free to follow some recipes: