Fresh logo

Modifying the <head>

We can use the <Head /> component in $fresh/runtime.ts to add elements as children of the <head> element. By adding elements as children of Fresh’s <Head /> tag, these automatically get injected into the <head> element of the web page. Some uses include:

  • Setting the document title using <title>
  • Specifying page metadata using <meta>
  • Linking to resources like stylesheets using <link>
  • Including third-party JavaScript code using <script>
import { Head } from "$fresh/runtime.ts";

export default function Home() {
  return (
        <meta charset="UTF-8" />
        <title>Fresh App</title>
          content="This is a brief description of Fresh"
        <link rel="stylesheet" href="styles.css" />
        <script src="script.js"></script>
      <div class="p-4 mx-auto max-w-screen-md">
        <h1>Hello World</h1>

Avoiding duplicate tags

You might end up with duplicate tags, when multiple <Head /> components are rendered on the same page. This can happen when you render <Head /> in a route and another <Head /> in another component for example.

// routes/page-a.tsx
  <meta name="og:title" content="This is a title" />

// components/MyTitle.tsx
  <meta name="og:title" content="Other title" />

To ensure that the tag is not duplicated, Fresh supports setting the key prop. By giving matching elements the same key prop, only the last one will be rendered.

  // routes/page-a.tsx
-   <meta name="og:title" content="This is a title" />
+   <meta name="og:title" content="This is a title" key="title" />

  // components/MyTitle.tsx
-   <meta name="og:title" content="Other title" />
+   <meta name="og:title" content="Other title" key="title" />

The rendered page will only include the <meta>-tag with "Other title".

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