# Head
The Head component (alias for Helmet) allows you to manage document head elements like title, meta
tags, and links from anywhere in your component tree. It uses
[`react-helmet-async`](https://github.com/staylor/react-helmet-async) under the hood.
## Import
```tsx
import { Head } from "zudoku/components";
```
## Props
The Head component accepts any valid HTML head elements as children.
## Usage
### Basic Title
```tsx
My Page Title
```
### Meta Tags
```tsx
About Us - My Company
```
### Social Media Meta Tags
```tsx
My Blog Post
```
### Custom Links
```tsx
```
### Favicon
```tsx
```
## Advanced Usage
### Dynamic Title with Template
```tsx
function MyPage() {
return (
<>
Contact Us
Contact Us
{/* Page content */}
);
}
```
### Multiple Head Tags
```tsx
Product Page - {productName}
```
### Conditional Meta Tags
```tsx
function ProductPage({ product }) {
return (
<>
{product.name} - Our Store
{product.inStock && }
{product.price && }
{/* 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
```tsx
{pageTitle}
```
### Social Sharing
```tsx
```
### Structured Data
```tsx
```
## 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
## Notes
:::tip
The Head component is an alias for the Helmet component from React Helmet Async. You can use either
`` or `` - they're identical.
:::
:::info
Head tags are merged across components, so you can set some meta tags globally and override specific
ones in individual pages.
:::
:::caution
Remember that Head tags need to be valid HTML head elements. Invalid elements will be ignored or may
cause issues.
:::