Unhead
Solid.js
Get Started

Install Unhead Schema.org with Solid.js

Copy for LLMs
On this page

Demos

Setup

  1. Install @unhead/schema-org dependency to your project:
yarn add -D @unhead/schema-org
  1. Setup with Solid.js

Import and use Schema.org with Solid.js:

import { SchemaOrgUnheadPlugin, 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: [
    SchemaOrgUnheadPlugin({
      // 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'))
  1. Add Schema.org nodes in your components:
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 */}
    </>
  )
}

Schema.org Configuration Options

At a minimum you should provide a host in your Schema.org configuration.

Here's a more complete example:

const head = createHead({
  plugins: [
    SchemaOrgUnheadPlugin({
      // 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.

Recommended: Tree-shaking for SSR

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

vite.config.ts
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.

Optional: Auto-Imports

If you're using Vite with unplugin-auto-import, you can configure automatic imports for Schema.org composables:

vite.config.ts
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,
        },
      ],
    }),
  ]
})

Using Schema.org with Reactivity

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
}

Next Steps

Your Solid.js app is now serving basic Schema.org structured data, congrats! 🎉

The next steps are:

  1. Choose an Identity
  2. Set up your pages for Schema.org structures
  3. Then follow some recipes:
Edit this page
Markdown For LLMs
Did this page help you?

Reactivity

Learn how to handle state changes for head tags in Solid.js applications using signals and effects.

Installation

Learn how to start using Unhead with Svelte.