---
title: " Component"
description: "JSX-based head management with the Head component and native title, meta, link, style, and script elements."
canonical_url: "https://unhead.unjs.io/docs/react/head/guides/core-concepts/components"
last_updated: "2026-07-24T01:36:31.459Z"
---
Import `` from `@unhead/react`, then place native lowercase ``, `<meta>`, `<link>`, `<style>`, and `<script>` elements inside it.
`<Head>` provides HTML-like JSX syntax. Use `useHead()` instead when you need typed object input or Unhead-specific entry options.
## Basic Usage
```tsx
import { Head } from '@unhead/react'
function App() {
return (
<Head>
<title>My Site
)
}
```
## Supported Tags
### Metadata
```tsx
Page Title
```
Google does not set a fixed meta-description length; search snippets are truncated to fit the device. Write a useful page-specific summary instead of targeting a character count. See [Google's snippet guidance](https://developers.google.com/search/docs/appearance/snippet).
### Links
```tsx
{/* Stylesheets */}
{/* Preloading Critical Resources */}
{/* Performance Hints */}
{/* Icons */}
```
### Scripts
```tsx
{/* Async Loading */}
{/* Module/NoModule Pattern */}
{/* Inline Scripts */}
```
### Open Graph
```tsx
```
### Twitter Cards
```tsx
```
## Unhead-Specific Options
### Tag Priority
For Unhead-specific options such as `tagPriority`, use `useHead()` so TypeScript can validate the tag configuration:
```tsx
useHead({
title: 'Must Load First',
link: [
{ rel: 'stylesheet', href: '/styles.css', tagPriority: 'high' }
],
script: [
{ src: '/analytics.js', tagPriority: 'low' }
]
})
```
### Document Position
Use `tagPosition` for tags outside the document head:
```tsx
useHead({
script: [
{ src: '/early.js', tagPosition: 'head' },
{ src: '/late.js', tagPosition: 'bodyClose' }
]
})
```
### Deduplication
Unhead automatically dedupes tags based on their content and attributes. Later instances override earlier ones:
```tsx
<>
```