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

Install Unhead Schema.org

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 Schema.org Plugin

At a minimum, provide a host:

src/app/app.config.client.ts
import { provideClientHead } from '@unhead/angular/client'
import { UnheadSchemaOrg } from '@unhead/schema-org'

export const appConfig = {
  providers: [
    provideClientHead({
      plugins: [
        UnheadSchemaOrg({ host: 'https://example.com' }),
      ],
    }),
  ],
}

Pass the same plugin to provideServerHead() when using SSR. See Schema.org Params for the available configuration.

3. Add Site Schema.org

import { Component, DestroyRef, inject } from '@angular/core'
import { RouterOutlet } from '@angular/router'
import { useUnhead } from '@unhead/angular'
import { defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org'

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: '<router-outlet />',
})
export class AppComponent {
  private head = useUnhead()
  private destroyRef = inject(DestroyRef)

  constructor() {
    const entry = useSchemaOrg(this.head, [
      defineWebSite({ name: 'Example Site' }),
      defineWebPage(),
    ])

    this.destroyRef.onDestroy(() => entry.dispose())
  }
}

The framework-agnostic useSchemaOrg() function takes the Unhead instance as its first argument. Register its returned entry with DestroyRef so component-scoped schema is removed during cleanup.

Recommended: Vite Plugin

With Vite, the Unhead plugin can tree-shake server-only code and transform head composables at build time.

Next Steps

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

Head Management in Angular Components

Manage title, meta, link, and script tags in Angular components with the useHead() composable.

Installing Unhead with Nuxt

Unhead is built into Nuxt 3 and Nuxt 4. Use useHead() and useSeoMeta() directly in components.