---
title: useSchemaOrg()
description: How to use the useSchemaOrg composable.
---

The `useSchemaOrg()`{lang="ts"} composable is the primary way to manage the head of the document at runtime.

```ts
useSchemaOrg(input, options)
```

## Example

Add a page title and a meta description.

```ts
useSchemaOrg({
  title: 'My Page',
  meta: [
    {
      name: 'description',
      content: 'My page description',
    },
  ],
})
```

## Input

```ts
interface Head<E extends MergeHead = SchemaAugmentations> {
  title?: string | Promise<string>
  titleTemplate?: string | null | ((title?: string) => string | null)
  templateParams?: { separator?: string } & Record<string, string | Record<string, string>>
  base?: Base<E['base']>
  link?: Link<E['link']>[]
  meta?: Meta<E['meta']>[]
  style?: (Style<E['style']> | string)[]
  script?: (Script<E['script']> | string)[]
  noscript?: (Noscript<E['noscript']> | string)[]
  htmlAttrs?: HtmlAttributes<E['htmlAttrs']>
  bodyAttrs?: BodyAttributes<E['bodyAttrs']>
}
```

## Options

The second parameter to `useSchemaOrg` is the `HeadEntryOptions`. This allows you to apply options to the entry, meaning all
tags that exist within the `input`.

```ts
export interface HeadEntryOptions {
  processTemplateParams?: boolean
  tagPriority?: number | 'critical' | 'high' | 'low' | `before:${string}` | `after:${string}`
  tagPosition?: 'head' | 'bodyClose' | 'bodyOpen'
  mode?: RuntimeMode
  transform?: (input: unknown) => unknown
  head?: Unhead
}
```

### `mode`

This lets you specify which mode the head should be applied in.

By default, entries are rendered in both server and client. If you'd like to only use a specific mode
you can set the `mode` option to either `server` or `client`.

If you intend to server render tags you should instead opt for the `useServerHead` composable.

## Entry API

The `useSchemaOrg` composable returns an API to manage the lifecycle of the head entry. Using this you can either `patch` or
`dispose` of the entry.

```ts
const myPageHead = useSchemaOrg({
  title: 'My Page',
  meta: [
    {
      name: 'description',
      content: 'My page description',
    },
  ],
})

// removes it
myPageHead.dispose()
```

## XSS safety

The `useSchemaOrg` function only applies minimal sanitization on input to improve the developer experience.

Be careful, **do not** use this function with any unknown / third party input, that isn't sanitised. It is not possible
to guarantee that the output is safe when dealing with unknown input.

If you need XSS safety, sanitise your input or
look at using the [useSeoMeta](/usage/composables/use-seo-meta) or [useSchemaOrgSafe](/usage/composables/use-head-safe) composables instead.
If you're having issues working around the default nodes, you should disable them.

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  schemaOrg: {
    defaults: false
  }
})
```