# Metadata

Render document tags with [React 19](https://react.dev/blog/2024/12/05/react-19#support-for-metadata-tags),
or use [`<Head>`](#head) when layouts and pages set the same tags.

## Document tags

Render `<title>`, `<meta>`, and `<link>` directly in the component tree. React 19 hoists them to
`<head>`:

```tsx
export default async function ProductPage() {
  const product = await getProduct()

  return (
    <div>
      <title>{product.name}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.id}`} />
      <ProductDetail product={product} />
    </div>
  )
}
```

For resource hints, use [`prefetchDNS`](https://react.dev/reference/react-dom/prefetchDNS),
[`preconnect`](https://react.dev/reference/react-dom/preconnect),
[`preload`](https://react.dev/reference/react-dom/preload),
[`preinit`](https://react.dev/reference/react-dom/preinit),
[`preloadModule`](https://react.dev/reference/react-dom/preloadModule), and
[`preinitModule`](https://react.dev/reference/react-dom/preinitModule) from `react-dom`.

## `<Head>`

Use it for tags that should replace defaults. Render the defaults with the same component:

```tsx
// app/layout.tsx
import { Head } from "@rebask/core/components/head"

<html lang="en">
  <head>
    <meta charSet="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <Head>
      <title>My App</title>
      <meta name="description" content="Default description" />
    </Head>
    {children}
  </body>
</html>
```

A page can then override them:

```tsx
// app/products/page.tsx
import { Head } from "@rebask/core/components/head"

<Head>
  <title>Products</title>
  <meta name="description" content="Browse the catalog" />
</Head>
```

A nested `<Head>` overrides its parent, so page tags replace the layout defaults.

### Deduplication

[`<Head>`](#head) only reads direct native tags. Fragments, custom components, and nested wrappers
are ignored.

`<Head>` dedupes:

- `<title>`
- `<meta>` by `name`, `property`, or `http-equiv`
- canonical `<link>` tags
- `<base>`

Non-canonical links are left alone, so repeated `preconnect` links are allowed.

Deduplication runs in the browser. Rebask includes the required script automatically. Without
JavaScript, duplicate tags may remain in the HTML.