Utility

Head

The Head component allows you to manage document head elements like title, meta tags, and links from anywhere in your component tree. It uses Unhead under the hood.

Import


Code
import { Head } from "zudoku/components";

Props

The Head component accepts any valid HTML head elements as children.

Usage

Basic Title


Code
<Head>
  <title>My Page Title</title>
</Head>

Meta Tags


Code
<Head>
  <title>About Us - My Company</title>
  <meta name="description" content="Learn more about our company and mission." />
  <meta name="keywords" content="company, about, mission" />
</Head>


Code
<Head>
  <title>My Blog Post</title>
  <meta property="og:title" content="My Blog Post" />
  <meta property="og:description" content="An interesting blog post about..." />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:url" content="https://example.com/blog/my-post" />
  <meta name="twitter:card" content="summary_large_image" />
</Head>

Custom Links


Code
<Head>
  <link rel="canonical" href="https://example.com/canonical-url" />
  <link rel="alternate" hreflang="es" href="https://example.com/es" />
</Head>

Favicon


Code
<Head>
  <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
</Head>

Advanced Usage

Dynamic Title with Template


Code
function MyPage() {
  return (
    <>
      <Head>
        <title>Contact Us</title>
      </Head>
      <h1>Contact Us</h1>
      {/* Page content */}
    </>
  );
}

Multiple Head Tags


Code
<Head>
  <title>Product Page - {productName}</title>
  <meta name="description" content={productDescription} />
  <meta property="og:title" content={productName} />
  <meta property="og:description" content={productDescription} />
  <meta property="og:image" content={productImage} />
  <link rel="canonical" href={`https://example.com/products/${productSlug}`} />
</Head>

Conditional Meta Tags


Code
function ProductPage({ product }) {
  return (
    <>
      <Head>
        <title>{product.name} - Our Store</title>
        <meta name="description" content={product.description} />
        {product.inStock && <meta property="product:availability" content="in stock" />}
        {product.price && <meta property="product:price:amount" content={product.price} />}
      </Head>
      {/* Component content */}
    </>
  );
}

Features

Server-Side Rendering: Works with SSR to set proper head tags
Dynamic Updates: Head tags update when component props change
Multiple Components: Head tags from multiple components are merged
Override Behavior: Later Head components can override earlier ones
Template Support: Zudoku's Layout automatically provides title templates

Common Use Cases

SEO Optimization


Code
<Head>
  <title>{pageTitle}</title>
  <meta name="description" content={pageDescription} />
  <meta name="keywords" content={pageKeywords} />
  <link rel="canonical" href={canonicalUrl} />
</Head>


Code
<Head>
  <meta property="og:title" content={shareTitle} />
  <meta property="og:description" content={shareDescription} />
  <meta property="og:image" content={shareImage} />
  <meta property="og:url" content={shareUrl} />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@yourhandle" />
</Head>

Structured Data


Code
<Head>
  <script type="application/ld+json">
    {JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      headline: articleTitle,
      author: articleAuthor,
      datePublished: publishDate,
    })}
  </script>
</Head>

Integration with Dev Portal

The Layout component automatically provides:

Title templates based on your Dev Portal meta configuration
Canonical URLs when canonicalUrlOrigin is configured
Description meta tags from page meta
Favicon links from meta configuration

Head tags are merged across components, so you can set some meta tags globally and override specific ones in individual pages.

Remember that Head tags need to be valid HTML head elements. Invalid elements will be ignored or may cause issues.

Edit this page

Last modified on May 29, 2026

ClientOnly Slot

Utility

Head

The Head component allows you to manage document head elements like title, meta tags, and links from anywhere in your component tree. It uses Unhead under the hood.

Import


Code
import { Head } from "zudoku/components";

Props

The Head component accepts any valid HTML head elements as children.

Usage

Basic Title


Code
<Head>
  <title>My Page Title</title>
</Head>

Meta Tags


Code
<Head>
  <title>About Us - My Company</title>
  <meta name="description" content="Learn more about our company and mission." />
  <meta name="keywords" content="company, about, mission" />
</Head>


Code
<Head>
  <title>My Blog Post</title>
  <meta property="og:title" content="My Blog Post" />
  <meta property="og:description" content="An interesting blog post about..." />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:url" content="https://example.com/blog/my-post" />
  <meta name="twitter:card" content="summary_large_image" />
</Head>

Custom Links


Code
<Head>
  <link rel="canonical" href="https://example.com/canonical-url" />
  <link rel="alternate" hreflang="es" href="https://example.com/es" />
</Head>

Favicon


Code
<Head>
  <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
</Head>

Advanced Usage

Dynamic Title with Template


Code
function MyPage() {
  return (
    <>
      <Head>
        <title>Contact Us</title>
      </Head>
      <h1>Contact Us</h1>
      {/* Page content */}
    </>
  );
}

Multiple Head Tags


Code
<Head>
  <title>Product Page - {productName}</title>
  <meta name="description" content={productDescription} />
  <meta property="og:title" content={productName} />
  <meta property="og:description" content={productDescription} />
  <meta property="og:image" content={productImage} />
  <link rel="canonical" href={`https://example.com/products/${productSlug}`} />
</Head>

Conditional Meta Tags


Code
function ProductPage({ product }) {
  return (
    <>
      <Head>
        <title>{product.name} - Our Store</title>
        <meta name="description" content={product.description} />
        {product.inStock && <meta property="product:availability" content="in stock" />}
        {product.price && <meta property="product:price:amount" content={product.price} />}
      </Head>
      {/* Component content */}
    </>
  );
}

Features

Server-Side Rendering: Works with SSR to set proper head tags
Dynamic Updates: Head tags update when component props change
Multiple Components: Head tags from multiple components are merged
Override Behavior: Later Head components can override earlier ones
Template Support: Zudoku's Layout automatically provides title templates

Common Use Cases

SEO Optimization


Code
<Head>
  <title>{pageTitle}</title>
  <meta name="description" content={pageDescription} />
  <meta name="keywords" content={pageKeywords} />
  <link rel="canonical" href={canonicalUrl} />
</Head>


Code
<Head>
  <meta property="og:title" content={shareTitle} />
  <meta property="og:description" content={shareDescription} />
  <meta property="og:image" content={shareImage} />
  <meta property="og:url" content={shareUrl} />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@yourhandle" />
</Head>

Structured Data


Code
<Head>
  <script type="application/ld+json">
    {JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      headline: articleTitle,
      author: articleAuthor,
      datePublished: publishDate,
    })}
  </script>
</Head>

Integration with Dev Portal

The Layout component automatically provides:

Title templates based on your Dev Portal meta configuration
Canonical URLs when canonicalUrlOrigin is configured
Description meta tags from page meta
Favicon links from meta configuration

Head tags are merged across components, so you can set some meta tags globally and override specific ones in individual pages.

Remember that Head tags need to be valid HTML head elements. Invalid elements will be ignored or may cause issues.

Edit this page

Last modified on May 29, 2026

ClientOnly Slot

Import

Props

Usage

Basic Title

Meta Tags

Social Media Meta Tags

Custom Links

Favicon

Advanced Usage

Dynamic Title with Template

Multiple Head Tags

Conditional Meta Tags

Features

Common Use Cases

SEO Optimization

Social Sharing

Structured Data

Integration with Dev Portal

Import

Props

Usage

Basic Title

Meta Tags

Social Media Meta Tags

Custom Links

Favicon

Advanced Usage

Dynamic Title with Template

Multiple Head Tags

Conditional Meta Tags

Features

Common Use Cases

SEO Optimization

Social Sharing

Structured Data

Integration with Dev Portal