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.

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