unhead@beta@unhead/schema-org dependency to your project:yarn add -D @unhead/schema-org
npm install -D @unhead/schema-org
pnpm add -D @unhead/schema-org
Import and use Schema.org with Solid.js:
import { UnheadSchemaOrg, useSchemaOrg } from '@unhead/schema-org'
import { createHead, UnheadContext } from '@unhead/solid-js'
import { render } from 'solid-js/web'
import App from './App'
// Create the head instance with the Schema.org plugin
const head = createHead({
plugins: [
UnheadSchemaOrg({
// Configure Schema.org params
host: 'https://example.com',
// ... other options
}),
]
})
// Provide it via context
render(() => (
<UnheadContext.Provider value={head}>
<App />
</UnheadContext.Provider>
), document.getElementById('root'))
import { defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org'
function SiteSchema() {
// Add Schema.org structured data
useSchemaOrg([
// Define identity (Organization or Person)
defineWebSite({
name: 'My Awesome Website',
}),
defineWebPage(),
])
return null
}
// Use it in your App
function App() {
return (
<>
<SiteSchema />
{/* Rest of your app */}
</>
)
}
At a minimum you should provide a host in your Schema.org configuration.
Here's a more complete example:
const head = createHead({
plugins: [
UnheadSchemaOrg({
// Base URL for your site (required)
host: 'https://example.com',
// Default language
defaultLanguage: 'en',
// Organization or Person identity
identity: {
type: 'Organization',
name: 'My Company',
logo: 'https://example.com/logo.png',
},
// Enable debug mode for development
debug: process.env.NODE_ENV !== 'production',
}),
]
})
See the Schema.org Params for all available options.
If you're using Vite SSR with Solid.js, it's highly recommended to add the Unhead tree-shaking plugin:
import UnheadVite from '@unhead/addons/vite'
import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'
export default defineConfig({
plugins: [
solidPlugin(),
UnheadVite(),
]
})
This will remove the @unhead/schema-org dependency from your client bundle, and only include it in your server bundle.
If you're using Vite with unplugin-auto-import, you can configure automatic imports for Schema.org composables:
import { schemaAutoImports } from '@unhead/schema-org'
import AutoImport from 'unplugin-auto-import/vite'
import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'
export default defineConfig({
plugins: [
solidPlugin(),
AutoImport({
imports: [
// Auto-import Schema.org composables
{
'@unhead/schema-org': schemaAutoImports,
},
],
}),
]
})
You can leverage Solid.js's reactivity system with Schema.org:
import { defineArticle, useSchemaOrg } from '@unhead/schema-org'
import { createResource, createSignal } from 'solid-js'
async function fetchArticleData(id) {
const response = await fetch(`/api/article/${id}`)
return response.json()
}
function ArticleSchema(props) {
const [article] = createResource(() => props.id, fetchArticleData)
useSchemaOrg(() => [
defineArticle({
headline: article()?.title || 'Loading...',
description: article()?.summary || '',
image: article()?.featuredImage || '',
datePublished: article()?.publishDate || new Date().toISOString(),
author: {
name: article()?.author?.name || 'Anonymous',
}
})
])
return null
}
Your Solid.js app is now serving basic Schema.org structured data, congrats! 🎉
The next steps are: