Copy page

Utility

Head

Applies to

Developer Portalthe documentation site for your API consumers

Hosting

Managed EdgeManaged DedicatedSelf-Hosted

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>

Social Media Meta Tags

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>

Social Sharing

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