Index of every page on this site: llms.txt
Unhead
Solid.js
Get Started

Install Unhead Schema.org with Solid.js

Copy for LLMs
On this page

Setup

1. Install the Package

Install @unhead/schema-org in your project:

yarn add @unhead/schema-org

2. Configure the Plugin

Configure the Schema.org host when you create the head instance:

import { UnheadSchemaOrg } from '@unhead/schema-org'
import { createHead, UnheadContext } from '@unhead/solid-js/client'
import { render } from 'solid-js/web'
import App from './App'

const head = createHead({
  plugins: [
    UnheadSchemaOrg({ host: 'https://example.com' }),
  ]
})

render(() => (
  <UnheadContext.Provider value={head}>
    <App />
  </UnheadContext.Provider>
), document.getElementById('root')!)

Use the same plugin configuration with createHead() from @unhead/solid-js/server for SSR. See Schema.org Params for all available options.

3. Add Schema.org Nodes

Import composables and node helpers from the Solid adapter:

import { defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org/solid-js'

function SiteSchema() {
  useSchemaOrg([
    defineWebSite({ name: 'Example Site' }),
    defineWebPage(),
  ])

  return null
}

Recommended: Vite Plugin

The Vite plugin can tree-shake server-only code and transform head composables at build time:

vite.config.ts
import { Unhead } from '@unhead/solid-js/vite'
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

export default defineConfig({
  plugins: [solid(), Unhead()],
})

Optional: Auto-Imports

The Solid adapter exports an auto-import preset:

vite.config.ts
import { schemaOrgAutoImports } from '@unhead/schema-org/solid-js'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: schemaOrgAutoImports,
    }),
  ],
})

Using Schema.org with Reactivity

Create the schema entry once, then patch it from a Solid effect:

import { defineArticle, useSchemaOrg } from '@unhead/schema-org/solid-js'
import { createEffect, createResource } from 'solid-js'

async function fetchArticleData(id: string) {
  const response = await fetch(`/api/article/${id}`)
  return response.json()
}

function ArticleSchema(props: { id: string }) {
  const [article] = createResource(() => props.id, fetchArticleData)
  const entry = useSchemaOrg()

  createEffect(() => {
    entry.patch([
      defineArticle({
        headline: article()?.title || 'Loading...',
        description: article()?.summary || '',
        image: article()?.featuredImage || '',
        datePublished: article()?.publishDate,
        author: {
          name: article()?.author?.name || 'Anonymous',
        }
      })
    ])
  })

  return null
}

Next Steps

  1. Choose an Identity
  2. Set up your pages with Schema.org nodes
  3. Follow a recipe:
Edit this page
Markdown For LLMs
Did this page help you?

Streaming SSR

Stream head tags as Suspense boundaries resolve during Solid.js SSR

Installing Unhead with Svelte

Set up Unhead in Svelte with createHead() and useHead(). Advanced features beyond svelte:head for SEO, structured data, and scripts.