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 ``</li> <li>Specifying page metadata using `<meta>`</li> <li>Linking to resources like stylesheets using `<link>`</li> <li>Including third-party JavaScript code using `<script>`</li> </ul> <div class="fenced-code"><div class="fenced-code-header"> routes/index.tsx </div><pre class="highlight highlight-source-tsx notranslate lang-tsx"><code>import { Head } from "$fresh/runtime.ts"; export default function Home() { return ( <> <Head> <meta charset="UTF-8" /> <title>Fresh App</title> <meta name="description" content="This is a brief description of Fresh" /> <link rel="stylesheet" href="styles.css" /> <script src="script.js"></script> </Head> <div class="p-4 mx-auto max-w-screen-md"> <h1>Hello World</h1> </div> </> ); }</code></pre></div><h2 id="-avoiding-duplicate-tags"><a class="md-anchor" tabindex="-1" href="#-avoiding-duplicate-tags">Avoiding duplicate tags#</a></h2>You might end up with duplicate tags, when multiple <code><Head /></code> components are rendered on the same page. This can happen when you render <code><Head /></code> in a route and another <code><Head /></code> in another component for example. <div class="fenced-code"><pre class="highlight highlight-source-tsx notranslate lang-tsx"><code>// routes/page-a.tsx <Head> <meta name="og:title" content="This is a title" /> </Head> // components/MyTitle.tsx <Head> <meta name="og:title" content="Other title" /> </Head></code></pre></div>To ensure that the tag is not duplicated, Fresh supports setting the <code>key</code> prop. By giving matching elements the same <code>key</code> prop, only the last one will be rendered. <div class="fenced-code"><pre class="highlight highlight-source-diff notranslate lang-diff"><code> // routes/page-a.tsx <Head> - <meta name="og:title" content="This is a title" /> + <meta name="og:title" content="This is a title" key="title" /> </Head> // components/MyTitle.tsx <Head> - <meta name="og:title" content="Other title" /> + <meta name="og:title" content="Other title" key="title" /> </Head></code></pre></div>The rendered page will only include the <code><meta></code>-tag with <code>"Other title"</code>. <blockquote> [info]: The `<title>`-tag is automatically deduplicated, even without a `key` prop.</blockquote> </div><div class="mb-8"><div class="px-4 md:px-0 mt-8 flex flex-col sm:flex-row gap-4 justify-between"><a href="/docs/examples/migrating-to-tailwind" class="px-4 py-2 text-left rounded border border-gray-200 grid border-solid w-full hover:border-green-600 transition-colors">Previous pageMigrating to Tailwind</a><a href="/docs/examples/writing-tests" class="px-4 py-2 text-right rounded border border-gray-200 border-solid grid w-full hover:border-green-600 transition-colors">Next pageWriting tests</a></div></div><hr><div class="px-4 md:px-0 flex justify-between my-6"><a href="https://github.com/denoland/fresh/edit/main/docs/latest/examples/modifying-the-head.md" class="text-green-600 underline flex items-center" target="_blank" rel="noopener noreferrer"><svg class="w-4 h-4 inline-block mr-1"><use href="/icons.svg#external"></use></svg>Edit this page on GitHub</a></div></div></div><div class="xl:ml-[3.75rem]"><footer class="border-t-2 border-gray-200 md:h-16 flex mt-16 justify-center md:mx-16 undefined"><div class="flex flex-col sm:flex-row gap-4 justify-between items-center max-w-screen-xl mx-auto w-full sm:px-6 md:px-8 p-4"><div class="text-gray-600 text-center">© 2024 the Fresh authors</div><div class="flex items-center gap-8"><a href="https://github.com/denoland/fresh" class="text-gray-600 hover:underline">Source</a><a href="https://github.com/denoland/fresh/blob/main/LICENSE" class="text-gray-600 hover:underline">License</a><a href="https://github.com/denoland/fresh/blob/main/CODE_OF_CONDUCT.md" class="text-gray-600 hover:underline">Code of Conduct</a></div></div></footer></div></main></div></div></div><script type="module" nonce="1c497dd789b34cdc88ab65fc181ae01c">import { boot } from "/fresh-runtime.js?__frsh_c=e2b40496fb25296ba33b1b9bf9f22a2667e5eab1";import SearchButton from "/SearchButton.js?__frsh_c=e2b40496fb25296ba33b1b9bf9f22a2667e5eab1";import VersionSelect from "/VersionSelect.js?__frsh_c=e2b40496fb25296ba33b1b9bf9f22a2667e5eab1";import { TableOfContents } from "/TableOfContents.js?__frsh_c=e2b40496fb25296ba33b1b9bf9f22a2667e5eab1";boot({SearchButton,VersionSelect,TableOfContents},"[[1,5,16,19,22],{\"slots\":2,\"props\":3},[],{\"class\":4},\"mr-4 sm:mr-0\",{\"slots\":6,\"props\":7},[],{\"selectedVersion\":8,\"versions\":9},\"latest\",[10,13],{\"label\":11,\"value\":11,\"href\":12},\"canary\",\"/docs/canary/examples/modifying-the-head\",{\"label\":14,\"value\":8,\"href\":15},\"1.6.8\",\"/docs/examples/modifying-the-head\",{\"slots\":17,\"props\":18},[],{\"class\":4},{\"slots\":20,\"props\":21},[],{\"selectedVersion\":8,\"versions\":9},{\"slots\":23,\"props\":24},[],{\"headings\":25},[26],{\"id\":27,\"html\":28},\"-avoiding-duplicate-tags\",\"Avoiding duplicate tags\"]");</script></body></html>