SolidStart

Head and metadata

SolidStart does not bundle a metadata API. Use @solidjs/meta to manage document titles, metadata, links, styles, and other elements in <head>.

Add the provider

Place MetaProvider in the router root so route metadata is collected during server rendering and updated during client navigation.

import { MetaProvider } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";


export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

Set route metadata

Metadata components can be rendered from any route below MetaProvider. They are removed or updated when the route changes.

import { Meta, Title } from "@solidjs/meta";


export default function About() {
  return (
    <>
      <Title>About | My site</Title>
      <Meta name="description" content="Learn more about my site." />
      <Meta property="og:title" content="About my site" />
      <h1>About</h1>
    </>
  );
}

Use asynchronous data

Metadata can read the same query result as the route. Wrap the rendered data in Suspense or Show when it may not be available immediately.

import { Title } from "@solidjs/meta";
import { createAsync, query, type RouteSectionProps } from "@solidjs/router";
import { Show } from "solid-js";


const getUser = query(async (id: string) => {
  "use server";
  return { id, name: `User ${id}` };
}, "user");


export default function User(props: RouteSectionProps) {
  const user = createAsync(() => getUser(props.params.id));


  return (
    <Show when={user()}>
      {(value) => (
        <>
          <Title>{value().name}</Title>
          <h1>{value().name}</h1>
        </>
      )}
    </Show>
  );
}

See the @solidjs/meta documentation for all supported head elements and provider behavior.

Last updated: 7/27/26, 1:53 AMEdit this pageReport an issue with this page