Modifying <head>

The <head>-element is a crucial element in HTML to set metadata for a page. It allows you to:

Set the document title with <title>
Specify page metadata with <meta>
Link to resources like stylesheets with <link>
Include JavaScript code with <script>

Info
The outer HTML structure including <head> is typically created inside _app.tsx.

Passing metadata from `ctx.state`

For simple scenarios passing metadata along from a handler or a middleware by writing to ctx.state is often sufficient.

routes/_app.tsx

import { define } from "../util.ts";

export default define.page((ctx) => {
  return (
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>{ctx.state.title ?? "Welcome!"}</title>
      </head>
      <body>
        <ctx.Component />
      </body>
    </html>
  );
});

Using the `<Head>`-component

For more complex scenarios, or to set page metadata from islands, Fresh ships with the <Head>-component.

Info
The <Head> component is not dynamic by default. It will not automatically update the document title or other head elements on the client side when component state changes. The head elements are set during server rendering or initial page load.

routes/about.tsx

import { Head } from "fresh/runtime";

export default define.page((ctx) => {
  return (
    <div>
      <Head>
        <title>About me</title>
      </Head>
      <h1>About me</h1>
      <p>I like Fresh!</p>
    </div>
  );
});

Avoiding duplicate tags

You might end up with duplicate tags, when multiple <Head /> components are rendered on the same page. Fresh will employ the following strategies to find the matching element:

For <title> elements Fresh will set document.title directly
Check if an element with the same key exists
Check if an element with the same id attribute
Only for <meta> elements: Check if there is a <meta> element with the same name attribute
No matching element was found, Fresh will create a new one and append it to <head>

Info
The <title>-tag is automatically deduplicated, even without a key prop.

Passing metadata from ctx.state#

Using the <Head>-component#

Avoiding duplicate tags#

Passing metadata from `ctx.state`

Using the `<Head>`-component

Avoiding duplicate tags