Metadata

Render document tags with React 19 , or use <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>:

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 , preconnect , preload , preinit , preloadModule , and preinitModule from react-dom.

`<Head>`

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

// 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:

// 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> 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.

PreviousImages Next Server Runtime APIs