Core Concepts
<Head> Component
The <Head> component from @unhead/react makes HTML head tag management simple in React applications.
While useHead() provides better TypeScript support, the <Head> component offers an HTML-like syntax that's more readable.
Quick Start
import { Head } from '@unhead/react'
function App() {
return (
<Head>
<title>My Site</title>
<meta name="description" content="Site description" />
</Head>
)
}
Supported Tags and Best Practices
Essential Meta Tags
<Head>
<title>Page Title</title>
<meta name="description" content="Clear, compelling description under 155 characters" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index,follow" />
<meta charset="utf-8" />
</Head>
Link Tags
<Head>
{/* Stylesheets */}
<link rel="stylesheet" href="/styles.css" />
{/* Preloading Critical Resources */}
<link rel="preload" href="/critical-font.woff2" as="font" type="font/woff2" crossorigin />
{/* Performance Hints */}
<link rel="dns-prefetch" href="//api.example.com" />
<link rel="preconnect" href="https://api.example.com" />
{/* Icons */}
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</Head>
Scripts
<Head>
{/* Async Loading */}
<script async src="https://example.com/analytics.js" />
{/* Module/NoModule Pattern */}
<script type="module" src="/modern.js" />
<script noModule src="/legacy.js" />
{/* Inline Scripts */}
<script type="application/ld+json">
{JSON.stringify({
'@context': 'https://schema.org',
'@type': 'WebSite',
'name': 'Your Site Name'
})}
</script>
</Head>
Open Graph Tags
<Head>
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
</Head>
Twitter Cards
<Head>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@username" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />
</Head>
Advanced Features
Tag Priority
Control rendering order with tagPriority:
<Head>
<title tagPriority="critical">Must Load First</title>
<link rel="stylesheet" href="/styles.css" tagPriority="high" />
<script src="/analytics.js" tagPriority="low" />
</Head>
Tag Positioning
Place tags in specific locations:
<Head>
<script src="/early.js" tagPosition="head" />
<script src="/late.js" tagPosition="bodyClose" />
</Head>
Deduplication
Unhead automatically dedupes tags based on their content and attributes. Later instances override earlier ones:
<>
<Head>
<meta name="description" content="Will be overridden" />
</Head>
<Head>
<meta name="description" content="Final description" />
</Head>
</>
Did this page help you?