### Development Setup

Source: https://github.com/unjs/unhead/blob/main/packages/angular/README.md

Install dependencies, generate build files, and run tests for development.

```bash
# Install dependencies
npm install

# Generate build files
npm run build

# Run tests
npm run test
```

--------------------------------

### Quick Start useHead()

Source: https://github.com/unjs/unhead/blob/main/docs/head/7.api/composables/0.use-head.md

Initialize head tags with title and meta information using useHead(). This is a basic setup for most applications.

```typescript
import { useHead } from '@unhead/vue' // or your framework

useHead({
  title: 'Page Title',
  meta: [{ name: 'description', content: 'Page description' }]
})
```

--------------------------------

### Install @unhead/solid-js

Source: https://github.com/unjs/unhead/blob/main/packages/solid-js/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @unhead/solid-js
```

```bash
yarn add @unhead/solid-js
```

```bash
pnpm add @unhead/solid-js
```

--------------------------------

### Install @unhead/bundler

Source: https://github.com/unjs/unhead/blob/main/packages/bundler/README.md

Install the @unhead/bundler package using npm, yarn, or pnpm.

```bash
# npm
npm install @unhead/bundler

# yarn
yarn add @unhead/bundler

# pnpm
pnpm add @unhead/bundler
```

--------------------------------

### Basic WebPage Example

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/9.schema/webpage.md

A simple example demonstrating how to define a WebPage with a name and an image.

```typescript
defineWebPage({
  name: 'Page Title',
  image: '/image.jpg',
})
```

--------------------------------

### Client Setup

Source: https://github.com/unjs/unhead/blob/main/docs/0.typescript/head/guides/1.core-concepts/5.streaming.md

The client automatically processes queued entries from the stream. No explicit setup is usually required beyond importing the function.

```typescript
import { createStreamableHead } from 'unhead/stream/client'

const head = createStreamableHead()
```

--------------------------------

### Install @unhead/cli

Source: https://github.com/unjs/unhead/blob/main/docs/0.typescript/head/guides/2.tooling/1.cli.md

Install the unhead CLI as a development dependency.

```bash
pnpm add -D @unhead/cli
```

--------------------------------

### Install ESLint Plugin

Source: https://github.com/unjs/unhead/blob/main/docs/0.typescript/head/guides/2.tooling/0.eslint-plugin.md

Install the @unhead/eslint-plugin as a development dependency using pnpm.

```bash
pnpm add -D @unhead/eslint-plugin
```

--------------------------------

### Install @unhead/vue

Source: https://github.com/unjs/unhead/blob/main/packages/vue/README.md

Install the @unhead/vue package using npm, yarn, or pnpm.

```bash
# npm
npm install @unhead/vue

# yarn
yarn add @unhead/vue

# pnpm
pnpm add @unhead/vue
```

--------------------------------

### Install @unhead/schema-org with pnpm

Source: https://github.com/unjs/unhead/blob/main/docs/0.angular/schema-org/guides/get-started/0.installation.md

Install the @unhead/schema-org dependency using pnpm.

```bash
pnpm add -D @unhead/schema-org
```

--------------------------------

### Install @unhead/schema-org with npm

Source: https://github.com/unjs/unhead/blob/main/docs/0.angular/schema-org/guides/get-started/0.installation.md

Install the @unhead/schema-org dependency using npm.

```bash
npm install -D @unhead/schema-org
```

--------------------------------

### Quick Start with useSchemaOrg

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/0.composables/0.use-schema-org.md

Initialize Schema.org structured data with basic site and page definitions.

```typescript
useSchemaOrg([
  defineWebSite({ name: 'My Site' }),
  defineWebPage({ name: 'Home' })
])
```

--------------------------------

### Install @unhead/schema-org with Yarn

Source: https://github.com/unjs/unhead/blob/main/docs/0.angular/schema-org/guides/get-started/0.installation.md

Install the @unhead/schema-org dependency using Yarn.

```bash
yarn add -D @unhead/schema-org
```

--------------------------------

### Setup Server-Side Rendering Instance

Source: https://github.com/unjs/unhead/blob/main/docs/0.typescript/head/guides/0.get-started/1.installation.md

Create a server head instance by importing createHead from 'unhead/server' in your server entry file.

```typescript
import { createHead } from 'unhead/server'
import typescriptLogo from './typescript.svg'

export function render(_url: string) {
  const head = createHead()
  const html = `<!-- your html -->`
  return { html, head }
```

--------------------------------

### Svelte Setup for Canonical Plugin

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/plugins/canonical.md

Initializes the Canonical plugin within a Svelte application. Ensure to install @unhead/svelte/client.

```typescript
import { createHead, UnheadContextKey } from '@unhead/svelte/client'
import { CanonicalPlugin } from 'unhead/plugins'

const head = createHead()
head.use(CanonicalPlugin({
  canonicalHost: 'https://mysite.com'
}))
```

--------------------------------

### Angular Setup for Canonical Plugin

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/plugins/canonical.md

Configures the Canonical plugin for an Angular application using provideClientHead. Ensure to install @unhead/angular.

```typescript
import { provideClientHead } from '@unhead/angular'
import { CanonicalPlugin } from 'unhead/plugins'

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHead({
      plugins: [
        CanonicalPlugin({
          canonicalHost: 'https://mysite.com'
        })
      ]
    })
  ]
}
```

--------------------------------

### React Setup for Canonical Plugin

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/plugins/canonical.md

Adds the Canonical plugin to a React application using createHead. Ensure to install @unhead/react/client.

```typescript
import { createHead } from '@unhead/react/client'
import { CanonicalPlugin } from 'unhead/plugins'

const head = createHead({
  plugins: [
    CanonicalPlugin({
      canonicalHost: 'https://mysite.com'
    })
  ]
})
```

--------------------------------

### Server-Side Rendering Setup with Unhead

Source: https://github.com/unjs/unhead/blob/main/docs/0.react/head/guides/0.get-started/migrate-from-react-helmet.md

Illustrates the server-side rendering setup using Unhead, including creating a head instance and wrapping the app with UnheadProvider for SSR.

```tsx
import { createHead, UnheadProvider } from '@unhead/react/server'
import { StrictMode } from 'react'
import { renderToString } from 'react-dom/server'
import App from './App'

export function render(_url: string) {
  const head = createHead()
  const html = renderToString(
    <StrictMode>
      <UnheadProvider value={head}>
        <App />
      </UnheadProvider>
    </StrictMode>,
  )
  return { html, head }
}
```

--------------------------------

### Install ESLint Plugin

Source: https://github.com/unjs/unhead/blob/main/packages/eslint-plugin/README.md

Install the unhead ESLint plugin and ESLint as development dependencies.

```bash
pnpm add -D @unhead/eslint-plugin eslint
```

--------------------------------

### Install @unhead/schema-org dependency

Source: https://github.com/unjs/unhead/blob/main/docs/0.solid-js/schema-org/guides/get-started/0.installation.md

Install the @unhead/schema-org dependency using your preferred package manager.

```bash
yarn add -D @unhead/schema-org
```

```bash
npm install -D @unhead/schema-org
```

```bash
pnpm add -D @unhead/schema-org
```

--------------------------------

### Setup Client-Side Rendering

Source: https://github.com/unjs/unhead/blob/main/docs/0.typescript/head/guides/0.get-started/1.installation.md

Initialize Unhead for client-side rendering by importing createHead from 'unhead/client' and attaching the instance to the window object.

```typescript
import { createHead } from 'unhead/client'
import { setupCounter } from './counter'
import './style.css'
import './typescript.svg'

window.__UNHEAD__ = createHead()

setupCounter(document.querySelector('#counter') as HTMLButtonElement)
```

--------------------------------

### Install VueHeadMixin for Client Rendering

Source: https://github.com/unjs/unhead/blob/main/docs/0.vue/head/guides/1.core-concepts/3.options-api.md

Install the VueHeadMixin from '@unhead/vue/client' when setting up your Vue application for client-side rendering.

```typescript
import { createApp } from './main'
import { createHead, VueHeadMixin } from '@unhead/vue/client'

const { app } = createApp()
const head = createHead()
app.use(head)
app.mixin(VueHeadMixin)

app.mount('#app')
```

--------------------------------

### Install VueHeadMixin for Server Rendering

Source: https://github.com/unjs/unhead/blob/main/docs/0.vue/head/guides/1.core-concepts/3.options-api.md

Install the VueHeadMixin from '@unhead/vue/server' when setting up your Vue application for server-side rendering.

```typescript
import { createApp } from './main'
import { createHead, VueHeadMixin } from '@unhead/vue/server'

const { app } = createApp()
const head = createHead()
app.use(head)
app.mixin(VueHeadMixin)

app.mount('#app')
```

--------------------------------

### Usage Example

Source: https://github.com/unjs/unhead/blob/main/docs/head/7.api/hooks/13.ssr-render.md

Example of how to use the ssr:render hook to log tags and add a server-specific meta tag.

```APIDOC
## Usage Example

```ts
import { createHead } from '@unhead/dynamic-import'

const head = createHead({
  hooks: {
    'ssr:render': (ctx) => {
      // Log the tags being rendered in SSR
      console.log(`Rendering ${ctx.tags.length} tags during SSR`)

      // Add a server-specific meta tag
      ctx.tags.push({
        tag: 'meta',
        props: {
          name: 'ssr-timestamp',
          content: Date.now().toString()
        }
      })
    }
  }
})
```
```

--------------------------------

### Define Product Schema (Minimal)

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/9.schema/product.md

Use this minimal example to define a product with its name and image. This is useful for basic product listings.

```typescript
defineProduct({
  name: 'Guide To Vue.js',
  image: '/vuejs-book.png',
})
```

--------------------------------

### Complete Service Schema Example

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/9.schema/service.md

A comprehensive example including subtype, URL, category, image, aggregate rating, reviews, terms of service, and slogan. Use this for detailed service descriptions.

```typescript
defineService({
  'name': 'Professional Consulting Services',
  '@type': 'FinancialService',
  'serviceType': 'Financial Consulting',
  'description': 'Expert financial advisory and consulting for businesses',
  'url': 'https://example.com/services/consulting',
  'provider': {
    name: 'Expert Consultants LLC',
    url: 'https://example.com',
  },
  'areaServed': ['United States', 'Canada', 'United Kingdom'],
  'category': 'Consulting',
  'image': 'https://example.com/services/consulting-hero.jpg',
  'offers': {
    price: 250,
    priceCurrency: 'USD',
    description: 'Hourly consulting rate',
  },
  'aggregateRating': {
    ratingValue: 4.8,
    ratingCount: 120,
  },
  'review': [
    {
      author: 'Jane Smith',
      reviewRating: 5,
      reviewBody: 'Excellent service, highly recommended!',
    },
  ],
  'termsOfService': 'https://example.com/terms',
  'slogan': 'Your success is our mission',
})
```

--------------------------------

### Plugin Setup with createHead

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/plugins/infer-seo-meta-tags.md

Demonstrates how to add the InferSeoMetaPlugin to your Unhead configuration when creating a new head instance.

```ts
import { InferSeoMetaPlugin } from '@unhead/dynamic-import/plugins'

const head = createHead({
  plugins: [
    InferSeoMetaPlugin()
  ]
})
```

--------------------------------

### Organization JSON-LD Example

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/9.schema/organization.md

A complete JSON-LD example for an Organization, including name, URL, logo, social profiles (sameAs), and contact information.

```json
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Acme Corp",
  "url": "https://acme.com",
  "logo": "https://acme.com/logo.png",
  "sameAs": [
    "https://twitter.com/acme",
    "https://github.com/acme",
    "https://linkedin.com/company/acme"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-800-555-0199",
    "contactType": "customer service"
  }
}
```

--------------------------------

### Client-side Setup (SPA)

Source: https://github.com/unjs/unhead/blob/main/packages/svelte/README.md

Set up @unhead/svelte for client-side rendering in a Svelte Single Page Application.

```typescript
import { createHead, UnheadContextKey } from '@unhead/svelte/client'
import { mount } from 'svelte'
import App from './App.svelte'
// main.ts
import './app.css'

const unhead = createHead()
const context = new Map()
context.set(UnheadContextKey, unhead)

mount(App, {
  target: document.getElementById('app')!,
  context
})
```

--------------------------------

### Plugin Setup with head.use()

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/plugins/infer-seo-meta-tags.md

Shows how to register the InferSeoMetaPlugin with an existing Unhead instance using the `use` method.

```ts
head.use(InferSeoMetaPlugin())
```

--------------------------------

### Server-side Setup (SSR)

Source: https://github.com/unjs/unhead/blob/main/packages/svelte/README.md

Set up @unhead/svelte for server-side rendering in a Svelte application.

```typescript
import { createHead, UnheadContextKey } from '@unhead/svelte/server'
// entry-server.ts
import { render as _render } from 'svelte/server'
import App from './App.svelte'

export function render(url: string) {
  const unhead = createHead()
  const context = new Map()
  context.set(UnheadContextKey, unhead)

  return {
    render: _render(App, { context }),
    unhead,
  }
}
```

--------------------------------

### Setup UnheadProvider

Source: https://github.com/unjs/unhead/blob/main/docs/0.react/head/guides/1.core-concepts/2.reactivity.md

Create a head instance and provide it to the component tree using UnheadProvider for isolated head state management.

```tsx
import { createHead, UnheadProvider } from '@unhead/react'

// Create head instance with custom options
const head = createHead()

function App() {
  return (
    <UnheadProvider head={head}>
      <YourApp />
    </UnheadProvider>
  )
}
```

--------------------------------

### Client-side Setup (SPA)

Source: https://github.com/unjs/unhead/blob/main/packages/vue/README.md

Set up @unhead/vue for client-side rendering in a Vue Single Page Application.

```typescript
import { createHead } from '@unhead/vue/client'
// main.ts
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
const head = createHead()
app.use(head)

app.mount('#app')
```

--------------------------------

### SEO Meta Transform Example

Source: https://github.com/unjs/unhead/blob/main/packages/bundler/README.md

Shows the optimization of useSeoMeta calls to useHead with meta tags.

```typescript
// Before:
useSeoMeta({
  title: 'My Page',
  description: 'Page description'
})

// After (optimized):
useHead({
  title: 'My Page',
  meta: [{ name: 'description', content: 'Page description' }]
})
```

--------------------------------

### SoftwareApplication JSON-LD Example

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/9.schema/software-app.md

This is a standard JSON-LD representation of a SoftwareApplication, including its name, operating system, category, offers, and aggregate rating.

```json
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Photo Editor Pro",
  "operatingSystem": "Windows, macOS",
  "applicationCategory": "DesignApplication",
  "offers": {
    "@type": "Offer",
    "price": "9.99",
    "priceCurrency": "USD"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "ratingCount": 1250
  }
}
```

--------------------------------

### Tree-shake Server Composables Example

Source: https://github.com/unjs/unhead/blob/main/packages/bundler/README.md

Demonstrates how server-only composables like useServerHead are removed from client bundles.

```typescript
// Before (in client bundle):
import { useServerHead } from '@unhead/vue'

useServerHead({ /* ... */ })

// After (removed from client bundle):
// (code is completely removed)
```

--------------------------------

### Server-side Setup (SSR)

Source: https://github.com/unjs/unhead/blob/main/packages/vue/README.md

Configure @unhead/vue for server-side rendering, including rendering the app and extracting head information.

```typescript
import { createHead } from '@unhead/vue/server'
// entry-server.ts
import { renderToString } from 'vue/server-renderer'
import { createApp } from './main'

export async function render(url: string) {
  const { app } = createApp()
  const head = createHead()
  app.use(head)

  const html = await renderToString(app)
  return { html, head }
```

--------------------------------

### Nuxt Setup for Canonical Plugin

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/plugins/canonical.md

Registers the Canonical plugin in a Nuxt application. Ensure to install @unhead/vue and @unhead/dynamic-import/plugins.

```typescript
import { injectHead } from '@unhead/vue'
import { CanonicalPlugin } from '@unhead/dynamic-import/plugins'

export default defineNuxtPlugin(() => {
  const head = injectHead()
  head.use(CanonicalPlugin({
    canonicalHost: 'https://mysite.com'
  }))
})
```

--------------------------------

### Basic SEO Setup with useHead() and useSeoMeta()

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/0.get-started/4.starter-recipes.md

Use `useHead` for general head tag management and `useSeoMeta` for type-safe SEO meta tags. Configure HTML attributes like language and canonical links. This is suitable for essential SEO tags.

```typescript
import { useHead, useSeoMeta } from '@unhead/dynamic-import'

// [useHead](/docs/head/api/composables/use-head) - general head tag management
// [useSeoMeta](/docs/head/api/composables/use-seo-meta) - type-safe SEO meta tags
useHead({
  htmlAttrs: { lang: 'en-US' }, // BCP 47 language code
  link: [{
    rel: 'canonical',
    href: 'https://www.example.com/product'
  }]
})

useSeoMeta({
  title: 'About Us',
  titleTemplate: '%s - Site',
  description: 'Learn about our awesome site.',
})
```

--------------------------------

### Vue Setup for Canonical Plugin

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/plugins/canonical.md

Integrates the Canonical plugin into a Vue application using createHead. Ensure to install @unhead/vue/client.

```typescript
import { createHead } from '@unhead/vue/client'
import { CanonicalPlugin } from 'unhead/plugins'

const head = createHead({
  plugins: [
    CanonicalPlugin({
      canonicalHost: 'https://mysite.com'
    })
  ]
})

app.use(head)
```

--------------------------------

### Complete Script Loading Example with Triggers and Proxies

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/1.core-concepts/9.loading-scripts.md

Demonstrates advanced script loading with a specific warmup strategy, a promise-based trigger, proxy access for immediate calls, and error handling.

```typescript
import { useScript } from '@unhead/dynamic-import'

const analytics = useScript({
  src: 'https://example.com/analytics.js',
  key: 'analytics',
  defer: true,
  async: true,
  crossorigin: 'anonymous',
  referrerpolicy: 'no-referrer'
}, {
  warmupStrategy: 'preconnect',
  trigger: new Promise((resolve) => {
    // Load after user has been on page for 3 seconds
    setTimeout(resolve, 3000)
  })
})

// Track page view immediately (queued until script loads)
analytics.proxy.track('pageview')

// Access direct API after script is loaded
analytics.onLoaded(({ track }) => {
  // Do something with direct access
  const result = track('event', { category: 'engagement' })
  console.log('Event tracked:', result)
})

// Handle errors
analytics.onError((error) => {
  console.error('Failed to load analytics:', error)
})
```

--------------------------------

### useScript() - Full Configuration

Source: https://github.com/unjs/unhead/blob/main/docs/head/7.api/composables/4.use-script.md

Demonstrates how to use useScript() with a full configuration object, allowing customization of script attributes like id, async, defer, and more.

```APIDOC
## useScript() with Configuration Object

### Description
Loads a third-party script using a configuration object, allowing for detailed customization of script attributes.

### Method
`useScript(options: ScriptConfig, loadOptions?: LoadOptions): ScriptInstance`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **options** (ScriptConfig) - Configuration object for the script.
  - **src** (string) - The URL of the script.
  - **id** (string) - Optional ID for the script tag.
  - **async** (boolean) - Whether the script should load asynchronously.
  - **defer** (boolean) - Whether the script should be deferred.
  - **crossorigin** (boolean | 'anonymous' | 'use-credentials') - Cross-origin attribute.
  - ... any other valid script attribute.
- **loadOptions** (LoadOptions) - Optional configuration for loading behavior (same as in Basic Usage).

### Request Example
```ts
import { useScript } from '@unhead/dynamic-import'

useScript({
  src: 'https://example.com/script.js',
  id: 'my-script',
  async: true,
  defer: false,
  crossorigin: false, // disable crossorigin='anonymous'
})
```

### Response
#### Success Response
Returns a `ScriptInstance` object with lifecycle hooks and proxy capabilities.

#### Response Example
```ts
{
  onLoaded: (callback: (api: any) => void) => void,
  onError: (callback: () => void) => void,
  proxy: any
}
```
```

--------------------------------

### Client-side Setup (SPA)

Source: https://github.com/unjs/unhead/blob/main/packages/solid-js/README.md

Set up Unhead for client-side rendering in a SolidJS SPA. This involves creating a head instance and providing it via context.

```jsx
import { UnheadContext } from '@unhead/solid-js'
import { createHead } from '@unhead/solid-js/client'
// main.jsx
import { render } from 'solid-js/web'
import App from './App'

const head = createHead({ /* config */ })

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

--------------------------------

### Basic SEO Setup with useHead()

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/0.get-started/4.starter-recipes.md

Manages general head tags including HTML attributes, title, meta descriptions, robots directives, and canonical links. This snippet is useful for comprehensive basic SEO configuration.

```typescript
import { useHead } from '@unhead/dynamic-import'

useHead({
  htmlAttrs: { lang: 'en-US' }, // BCP 47 language code
  title: 'About Us | Company',
  titleTemplate: '%s - Site',
  meta: [
    {
      name: 'description',
      content: 'Learn how to bake delicious, moist cupcakes with our easy-to-follow guide. Featuring tips and tricks for beginners.'
    },
    // disable indexing with robots 'noindex, nofollow'
    { name: 'robots', content: 'index, follow' }
  ],
  link: [
    {
      rel: 'canonical',
      href: 'https://www.example.com/product'
    }
  ]
})
```

--------------------------------

### JSON-LD Example for HowTo Schema

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/9.schema/how-to.md

A basic JSON-LD structure for a HowTo schema, including name, steps with text and image, and total time.

```json
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Tie a Tie",
  "step": [
    {
      "@type": "HowToStep",
      "text": "Drape the tie around your neck with the wide end on your right, about 1/3 longer than the narrow end.",
      "image": "https://example.com/step1.jpg"
    },
    {
      "@type": "HowToStep",
      "text": "Cross the wide end over the narrow end, then bring it underneath.",
      "image": "https://example.com/step2.jpg"
    }
  ],
  "totalTime": "PT5M"
}
```

--------------------------------

### Server-side Setup (SSR)

Source: https://github.com/unjs/unhead/blob/main/packages/react/README.md

Set up @unhead/react for server-side rendering. This function renders the app and returns the HTML along with the head object for SSR.

```jsx
import { createHead, UnheadProvider } from '@unhead/react/server'
// entry-server.jsx
import { StrictMode } from 'react'
import { renderToString } from 'react-dom/server'
import App from './App'

export function render(url) {
  const head = createHead()
  const html = renderToString(
    <StrictMode>
      <UnheadProvider value={head}>
        <App />
      </UnheadProvider>
    </StrictMode>
  )
  return { html, head }
```

--------------------------------

### Install Unhead for Svelte

Source: https://github.com/unjs/unhead/blob/main/docs/0.svelte/head/guides/0.get-started/1.installation.md

Install the `@unhead/svelte` dependency using npm or yarn.

```bash
npm install @unhead/svelte@next
yarn add @unhead/svelte@next
```

--------------------------------

### Install Unhead Dependency

Source: https://github.com/unjs/unhead/blob/main/docs/0.typescript/head/guides/0.get-started/1.installation.md

Install the unhead package using npm or yarn.

```bash
npm install unhead@next
# or
yarn add unhead@next
```

--------------------------------

### useScript() Quick Start

Source: https://github.com/unjs/unhead/blob/main/docs/head/7.api/composables/4.use-script.md

Load a script and access its API or hook into its loaded state. Calls to the proxy are queued until the script is ready.

```typescript
const { proxy, onLoaded } = useScript('https://example.com/analytics.js')

// Call functions immediately (queued until loaded)
proxy.track('pageview')

// Or wait for script to load
onLoaded(() => {
  console.log('Script ready!')
})
```

--------------------------------

### Define HowTo Schema with Basic Details

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/2.guides/4.recipes/how-to.md

Use defineHowTo to create structured data for a How-To guide, including name, description, image, estimated cost, supplies, tools, and detailed steps.

```typescript
import { defineHowTo, useSchemaOrg } from '@unhead/schema-org/@framework'

useSchemaOrg([
  defineHowTo({
    name: 'How to Build a Desk',
    description: 'A step-by-step guide to building a home office desk.',
    image: '/images/desk-building.jpg',
    estimatedCost: {
      currency: 'USD',
      value: '100'
    },
    supply: [
      'Wood panels',
      'Screws',
      'Hammer',
      'Nails'
    ],
    tool: [
      'Screwdriver',
      'Power drill',
      'Tape measure'
    ],
    step: [
      {
        name: 'Gather materials',
        text: 'Collect all necessary supplies and tools.',
        image: '/images/desk-materials.jpg',
        url: '/how-to-build-desk/materials'
      },
      {
        name: 'Cut wood panels',
        text: 'Cut the wood panels to the proper dimensions.',
        image: '/images/cutting-panels.jpg',
        url: '/how-to-build-desk/cutting'
      },
      {
        name: 'Assemble desk frame',
        text: 'Connect the panels to form the desk frame.',
        image: '/images/desk-frame.jpg',
        url: '/how-to-build-desk/assembly'
      },
      {
        name: 'Attach desk top',
        text: 'Secure the desk top to the frame.',
        image: '/images/desk-top.jpg',
        url: '/how-to-build-desk/finishing'
      }
    ]
  })
])
```

--------------------------------

### Set up Client-Side Rendering

Source: https://github.com/unjs/unhead/blob/main/docs/0.solid-js/head/guides/0.get-started/1.installation.md

Initialize Unhead in your Solid.js client-side entry file by creating a head instance and providing it via UnheadContext.Provider.

```tsx
import { createHead, UnheadContext } from '@unhead/solid-js/client'
import { hydrate } from 'solid-js/web'
import App from './App'
/* @refresh reload */
import './index.css'

hydrate(() => {
  const head = createHead()
  return (<UnheadContext.Provider value={head}><App /></UnheadContext.Provider>)
}, document.getElementById('root'))
```

--------------------------------

### Install Unhead React Dependency

Source: https://github.com/unjs/unhead/blob/main/docs/0.react/head/guides/0.get-started/1.installation.md

Install the @unhead/react package to your project using npm or yarn.

```bash
npm install @unhead/react@next
# or
yarn add @unhead/react@next
```

--------------------------------

### Install Unhead Angular Package

Source: https://github.com/unjs/unhead/blob/main/docs/0.angular/head/guides/0.get-started/1.installation.md

Install the Angular-specific Unhead package using npm or yarn.

```bash
npm install @unhead/angular
yarn add @unhead/angular
```

--------------------------------

### Creating a custom app context with unctx

Source: https://github.com/unjs/unhead/blob/main/docs/0.typescript/head/guides/1.core-concepts/0.wrapping-composables.md

Demonstrates how to set up a custom application context using `unctx` to manage Unhead instances. This is useful for non-framework environments.

```typescript
import { createContext } from 'unctx'

const appCtx = createContext()

export const useMyApp = appCtx.use
```

--------------------------------

### Install unhead with npm, yarn, or pnpm

Source: https://github.com/unjs/unhead/blob/main/packages/unhead/README.md

Install the unhead package using your preferred package manager.

```bash
# npm
npm install unhead

# yarn
yarn add unhead

# pnpm
pnpm add unhead
```

--------------------------------

### Complete SEO Setup with useSeoMeta

Source: https://github.com/unjs/unhead/blob/main/docs/head/7.api/composables/3.use-seo-meta.md

Configure comprehensive SEO meta tags including basic SEO, Open Graph, Twitter cards, and article-specific structured data.

```typescript
import { useSeoMeta } from '@unhead/dynamic-import'

useSeoMeta({
  // Basic SEO
  title: 'Product Name - Your Brand',
  description: 'Detailed product description optimized for search engines.',

  // Open Graph
  ogTitle: 'Product Name - Your Brand',
  ogDescription: 'Engaging description for social media shares.',
  ogImage: 'https://example.com/product-social.jpg',
  ogUrl: 'https://example.com/products/my-product',
  ogType: 'product',
  ogSiteName: 'Your Brand',

  // Twitter
  twitterTitle: 'Product Name - Your Brand',
  twitterDescription: 'Engaging description for Twitter shares.',
  twitterImage: 'https://example.com/product-twitter.jpg',
  twitterCard: 'summary_large_image',

  // Product specific (structured data will be generated)
  articleAuthor: 'Author Name',
  articlePublishedTime: '2023-01-01',
  articleModifiedTime: '2023-02-15',
})
```

--------------------------------

### Server-Side Rendering Setup (Entry Server)

Source: https://github.com/unjs/unhead/blob/main/docs/0.svelte/head/guides/0.get-started/1.installation.md

Initialize Unhead for server-side rendering in your server entry file (`entry-server.ts`). This creates the Unhead instance and context for server-side rendering.

```typescript
import { createHead, UnheadContextKey } from '@unhead/svelte/server'
import { render as _render } from 'svelte/server'
import App from './App.svelte'

export function render(_url: string) {
  const unhead = createHead()
  const context = new Map()
  context.set(UnheadContextKey, unhead)
  return {
    render: _render(App, {
      context,
    }),
    unhead,
  }
}
```

--------------------------------

### Install Unhead Dependency

Source: https://github.com/unjs/unhead/blob/main/README.md

Install the unhead package using npm. This is the first step to integrating Unhead into your project.

```bash
npm install unhead
```

--------------------------------

### Server-side Setup (SSR)

Source: https://github.com/unjs/unhead/blob/main/packages/solid-js/README.md

Set up Unhead for server-side rendering in a SolidJS application. This includes creating a head instance and rendering the app to a string.

```jsx
import { UnheadContext } from '@unhead/solid-js'
import { createHead } from '@unhead/solid-js/server'
// entry-server.jsx
import { renderToString } from 'solid-js/web'
import App from './App'

export function render(url) {
  const head = createHead()
  const html = renderToString(() => (
    <UnheadContext.Provider value={head}>
      <App />
    </UnheadContext.Provider>
  ))
  return { html, head }
```

--------------------------------

### Server Setup with wrapStream

Source: https://github.com/unjs/unhead/blob/main/docs/0.typescript/head/guides/1.core-concepts/5.streaming.md

Use `wrapStream` to inject head updates into your response stream. This is the recommended approach for most server-side streaming setups.

```typescript
import { createStreamableHead, wrapStream } from 'unhead/stream/server'

const { head } = createStreamableHead()

head.push({
  title: 'My App',
  htmlAttrs: { lang: 'en' }
})

const template = '<!DOCTYPE html><html><head></head><body></body></html>'

// Wrap your app stream with head injection
const fullStream = wrapStream(head, appStream, template)
return new Response(fullStream)
```

--------------------------------

### Install Unhead for Vue

Source: https://github.com/unjs/unhead/blob/main/docs/0.vue/head/guides/0.get-started/1.installation.md

Install the Unhead Vue package using npm or yarn. This is the primary dependency for integrating Unhead with Vue.js applications.

```bash
npm install @unhead/vue
# or
yarn add @unhead/vue
```

--------------------------------

### Define Product Schema (Comprehensive)

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/9.schema/product.md

Use this comprehensive example to define a product with offers, aggregate rating, and reviews. This is useful for detailed product pages.

```typescript
defineProduct({
  name: 'test',
  image: '/product.png',
  offers: [
    { price: 50 },
  ],
  aggregateRating: {
    ratingValue: 88,
    bestRating: 100,
    ratingCount: 20,
  },
  review: [
    {
      name: 'Awesome product!',
      author: {
        name: 'Harlan Wilton',
      },
      reviewRating: {
        ratingValue: 5,
      },
    },
  ],
})
```

--------------------------------

### Canonical Plugin Setup with Host

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/plugins/canonical.md

Initializes the Canonical Plugin with a base canonical host. This is required for the plugin to convert relative URLs to absolute ones.

```ts
import { CanonicalPlugin } from '@unhead/dynamic-import/plugins'

const head = createHead({
  plugins: [
    CanonicalPlugin({
      canonicalHost: 'https://mysite.com'
    })
  ]
})
```

--------------------------------

### Start Development Server

Source: https://github.com/unjs/unhead/blob/main/examples/angular/README.md

Use this command to start a local development server for your Angular application. The application will auto-reload on source file changes.

```bash
ng serve
```

--------------------------------

### Custom URL Resolution with Canonical Plugin

Source: https://github.com/unjs/unhead/blob/main/docs/head/1.guides/plugins/canonical.md

Example of using the customResolver option to transform URLs with the Canonical plugin. This example prepends a CDN path to the URL.

```typescript
CanonicalPlugin({
  canonicalHost: 'https://mysite.com',
  customResolver: path => new URL(`/cdn${path}`, 'https://example.com').toString()
})
```

--------------------------------

### LocalBusiness JSON-LD Example

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/9.schema/local-business.md

A standard JSON-LD example for a LocalBusiness, including name, address, and opening hours. This can be used to represent a physical business location for search engines.

```json
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Dave's Steak House",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "148 W 51st St",
    "addressLocality": "New York",
    "addressRegion": "NY",
    "postalCode": "10019",
    "addressCountry": "US"
  },
  "telephone": "+12122459600",
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "11:30",
      "closes": "23:00"
    }
  ]
}
```

--------------------------------

### Replace server composables with standard composables

Source: https://github.com/unjs/unhead/blob/main/docs/0.vue/head/guides/0.get-started/1.migration.md

Migrate from 'useServerHead' and 'useServerSeoMeta' to 'useHead' and 'useSeoMeta' respectively. For server-only management, use conditional logic with 'import.meta.server'.

```diff
- import { useServerHead, useServerSeoMeta } from '@unhead/vue'
+ import { useHead, useSeoMeta } from '@unhead/vue'

- useServerHead({ title: 'My Page' })
+ useHead({ title: 'My Page' })

- useServerSeoMeta({ description: 'My description' })
+ useSeoMeta({ description: 'My description' })
```

```ts
if (import.meta.server) {
  useHead({ title: 'Server Only' })
}
```

--------------------------------

### Install Unhead v1 for Vue 2

Source: https://github.com/unjs/unhead/blob/main/docs/0.vue/head/guides/0.get-started/1.installation.md

If you are using Vue 2, install version 1 of the @unhead/vue package. Official support for Vue 2 has been dropped in v2 and later.

```bash
npm install @unhead/vue@^1
# or
yarn add @unhead/vue@^1
```

--------------------------------

### Quick Start with useHeadSafe

Source: https://github.com/unjs/unhead/blob/main/docs/head/7.api/composables/1.use-head-safe.md

Safely set head tags with user-provided input for titles and meta descriptions. Input is automatically sanitized.

```typescript
useHeadSafe({
  title: userInput.title, // Automatically sanitized
  meta: [{ name: 'description', content: userInput.description }]
})
```

--------------------------------

### Define SoftwareApp Composable Example

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/9.schema/software-app.md

Example of using the `defineSoftwareApp` composable to generate SoftwareApplication schema. It takes an object with properties like name, operating system, category, aggregate rating, and offers.

```typescript
defineSoftwareApp({
  name: 'Angry Birds',
  operatingSystem: 'ANDROID',
  applicationCategory: 'GameApplication',
  aggregateRating: {
    ratingValue: '4.6',
    ratingCount: 8864,
  },
  offers: {
    price: '1.00',
    priceCurrency: 'USD',
  },
})
```

--------------------------------

### Client-side Setup (SPA)

Source: https://github.com/unjs/unhead/blob/main/packages/react/README.md

Set up @unhead/react for client-side rendering in a Single Page Application. This involves creating a head instance and providing it via UnheadProvider.

```jsx
import { createHead, UnheadProvider } from '@unhead/react/client'
// main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'

const head = createHead({ /* config */ })

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <UnheadProvider head={head}>
      <App />
    </UnheadProvider>
  </StrictMode>
)
```

--------------------------------

### OG Image Generation Example

Source: https://github.com/unjs/unhead/blob/main/docs/7.releases/2.v2.md

Example of using a hypothetical `useOgImage` composable to generate Open Graph images from HTML templates. This showcases a future feature for creating social media images.

```typescript
useOgImage('<div class="bg-red-500">my image :)</div>')
```

--------------------------------

### Google Analytics Integration Example

Source: https://github.com/unjs/unhead/blob/main/docs/7.releases/2.v2.md

Example of using a hypothetical `useGoogleAnalytics` composable to integrate Google Analytics, including sending a page view event. This demonstrates a future capability for easier third-party script management.

```typescript
const { proxy } = useGoogleAnalytics({
  id: 'UA-123456789',
})

proxy.gtag('page_view', {
  page_path: '/my-page',
})
```

--------------------------------

### Define Article

Source: https://github.com/unjs/unhead/blob/main/docs/schema-org/5.api/9.schema/article.md

Basic example of defining an article with route meta support.

```typescript
defineArticle()
```