solidjs.com

Head

Head lets you set the <head> of your page.
tsx
<Head>
  <Title>Hogwarts</Title>
</Head>
tsx
<Head>
  <Title>Hogwarts</Title>
</Head>

Usage

Setting the <head> of your page

The Head component includes machine-readable metadata about the document, like its title, description of its content, links to scripts, and stylesheets.

It is a wrapper over the head element and accepts the same attributes. It accepts elements you would usually place under head, like title, meta, and link along with their wrapped counterparts.

The Head is required to be a child of Html and should be the first child of Html. It serves a few purposes, and a document without the Head component will not render correctly.

tsx
export default function Root() {
  return (
    <Html lang="en">
      <Head>
        <Title>Solid - Hacker News</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta name="description" content="Hacker News Clone built with Solid" />
        <Link rel="manifest" href="/manifest.webmanifest" />
      </Head>
    </Html>
  );
}
tsx
export default function Root() {
  return (
    <Html lang="en">
      <Head>
        <Title>Solid - Hacker News</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta name="description" content="Hacker News Clone built with Solid" />
        <Link rel="manifest" href="/manifest.webmanifest" />
      </Head>
    </Html>
  );
}

Reference

<Head />

Use the Head component as the first child of Html to set the <head> of your page. It is necessary to have this otherwise your app will break in production (probably in dev too).

The Head component automatically inserts any link elements needed for preloading JavaScript and CSS for the current page. It handles the insertion of any meta-tags that are added throughout the application.

Head and its descendants are not hydrated on page boot up in the browser after server rendering. It accepts the same props as the native <head> element.

tsx
import { Html, Head } from "solid-start";
 
export default function Root() {
  return (
    <Html>
      <Head>...</Head>
    </Html>
  );
}
tsx
import { Html, Head } from "solid-start";
 
export default function Root() {
  return (
    <Html>
      <Head>...</Head>
    </Html>
  );
}