---
title: " Component"
description: "JSX-based head management with Head, Title, Meta, Link, Script components. HTML-like syntax alternative to useHead()."
canonical_url: "https://unhead.unjs.io/docs/react/head/guides/core-concepts/components"
last_updated: "2026-05-14T14:12:03.025Z"
---
**Quick Answer:** Use ``, ``, `<Meta>`, `<Link>`, and `<Script>` components for JSX-based head management. Import from `@unhead/react/components`.
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.
## How Do I Get Started with Head Components?
```tsx
import { Head } from '@unhead/react'
function App() {
return (
<Head>
<title>My Site
)
}
```
## What Tags Are Supported?
### Which Meta Tags Should I Use?
```tsx
Page Title
```
### How Do I Add Link Tags?
```tsx
{/* Stylesheets */}
{/* Preloading Critical Resources */}
{/* Performance Hints */}
{/* Icons */}
```
### How Do I Add Scripts?
```tsx
{/* Async Loading */}
{/* Module/NoModule Pattern */}
{/* Inline Scripts */}
```
### How Do I Set Up Open Graph Tags?
```tsx
```
### How Do I Configure Twitter Cards?
```tsx
```
## How Do I Use Advanced Features?
### How Do I Control Tag Priority?
Control rendering order with `tagPriority`:
```tsx
Must Load First
```
### How Do I Position Tags in the Document?
Place tags in specific locations:
```tsx
```
### How Does Tag Deduplication Work?
Unhead automatically dedupes tags based on their content and attributes. Later instances override earlier ones:
```tsx
<>
```