@unhead/schema-org

Generate Schema.org JSON-LD with Google-focused TypeScript helpers

Features

• 🔍 Google-focused fields: Helpers prioritize properties used by Google Search structured data features
• 🎯 Typed helpers: TypeScript autocomplete for supported fields, defaults, and node relationships
• 🖖 Framework agnostic: Works with Vue, React, Svelte, SolidJS, and more
• 📋 Custom nodes: Add any valid Schema.org type or property when no dedicated helper exists
• 🔄 Reactive: Dynamic schema updates with framework reactivity

The helper types are practical subsets, not complete TypeScript definitions of the Schema.org vocabulary. Extra valid properties pass through to the generated JSON-LD. Use schema-dts with a custom node when you need full Schema.org typing.

Installation

# npm
npm install @unhead/schema-org

# yarn
yarn add @unhead/schema-org

# pnpm
pnpm add @unhead/schema-org

Usage

Vue

<script setup>
import { defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org/vue'

useSchemaOrg([
  defineWebSite({
    name: 'My Website',
    url: 'https://example.com',
  }),
  defineWebPage({
    title: 'About Us',
    description: 'Learn more about our company',
  })
])
</script>

React

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

function About() {
  useSchemaOrg([
    defineWebSite({
      name: 'My Website',
      url: 'https://example.com',
    }),
    defineWebPage({
      title: 'About Us',
      description: 'Learn more about our company',
    })
  ])

  return <h1>About Us</h1>
}

Framework Agnostic

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

// Provide your unhead instance
useSchemaOrg([
  defineWebPage({
    title: 'My Page',
    description: 'Page description'
  })
], { head: myHeadInstance })

Common Schema Types

Article

import { defineArticle } from '@unhead/schema-org'

defineArticle({
  headline: 'How to use Schema.org',
  description: 'Learn how to implement schema.org',
  author: {
    name: 'John Doe',
    url: 'https://johndoe.com'
  },
  datePublished: '2023-01-01',
  dateModified: '2023-01-15'
})

Organization

import { defineOrganization } from '@unhead/schema-org'

defineOrganization({
  name: 'My Company',
  url: 'https://mycompany.com',
  logo: 'https://mycompany.com/logo.png',
  sameAs: [
    'https://twitter.com/mycompany',
    'https://linkedin.com/company/mycompany'
  ]
})

Product

import { defineProduct } from '@unhead/schema-org'

defineProduct({
  name: 'Amazing Product',
  description: 'The most amazing product ever',
  image: 'https://example.com/product.jpg',
  offers: {
    price: '29.99',
    priceCurrency: 'USD',
    availability: 'InStock'
  }
})

Documentation

Visit the Schema.org documentation for comprehensive guides and all available schema types.

License

MIT