---
title: Component
description: 'JSX-based head management with Head, Title, Meta, Link, Script components. HTML-like syntax alternative to useHead().'
---
**Quick Answer:** Use ``, ``, `<Meta>`, `<Link>`, and `<Script>` components for JSX-based head management. Import from `@unhead/react/components`.
The `<Head>`{lang="Html"} component from `@unhead/react` makes HTML head tag management simple in React applications.
While `useHead()`{lang="ts"} provides better TypeScript support, the `<Head>`{lang="html"} 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
<>
```