Meta

Meta adds a <meta> element to the document head.

Import

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

Type

const Meta: Component<
  JSX.MetaHTMLAttributes<HTMLMetaElement> & { key?: string }
>;

Props

Accepts attributes for <meta>. Attribute values can be reactive expressions.

`key`

Type: string
Optional: Yes

Overrides the default identity used for deduplication.

Behavior

Dedupes by name, property, or http-equiv. These are separate namespaces: <Meta name="og:image" /> and <Meta property="og:image" /> coexist.
A media attribute forks identity, so theme-color light and dark variants coexist:

<Meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />
<Meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

The last-registered tag for an identity wins; unmounting it restores the previous registration.
A <Meta> with none of the identity attributes (and no key) is append-only.
<Meta charset> is server-shell only: it is rendered into the head prelude on the first flush and ignored (with a dev warning) on the client.

Examples

Basic usage

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

export default function Page() {
  return (
    <>
      <Meta name="description" content="A description of this page." />
      <Meta property="og:title" content="My Page" />
    </>
  );
}

Forcing tags to override each other

{/* These override each other despite different attributes: */}
<Meta key="social-image" name="twitter:image" content="/twitter.png" />
<Meta key="social-image" property="og:image" content="/og.png" />

Multiple tags with the same identity

Wrap deliberate sets in <Head> so they coexist and override as a unit:

<Head>
  <Meta property="og:image" content="/image-1.png" />
  <Meta property="og:image" content="/image-2.png" />
</Head>

Last updated: 8/11/26, 7:55 PMEdit this pageReport an issue with this page