Solid Meta

https://docs.solidjs.com/solid-meta
Admin
Solid Meta provides asynchronous SSR-ready Document Head management for Solid.js applications,...
Tokens:4,332
Snippets:54
Trust Score:9.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install @solidjs/meta

Source: https://docs.solidjs.com/solid-meta/getting-started/installation-and-setup

Commands to install the package using different package managers.

```bash
npm i @solidjs/meta
```

```bash
pnpm i @solidjs/meta
```

```bash
yarn add @solidjs/meta
```

```bash
bun i @solidjs/meta
```

```bash
deno add npm:@solidjs/meta
```

--------------------------------

### Basic usage of Title

Source: https://docs.solidjs.com/solid-meta/reference/meta/title

Example showing how to use the Title component within a MetaProvider.

```jsx
import { MetaProvider, Title } from "@solidjs/meta";


export default function Root() {
  return (
    <MetaProvider>
      <Title>Solid Docs</Title>
    </MetaProvider>
  );
}
```

--------------------------------

### Basic usage of useHead

Source: https://docs.solidjs.com/solid-meta/reference/meta/use-head

Example of adding a link tag to the document head.

```jsx

import { createUniqueId } from "solid-js";
import { MetaProvider, useHead } from "@solidjs/meta";


function RssLink() {
  useHead({
    tag: "link",
    id: createUniqueId(),
    props: {
      rel: "alternate",
      type: "application/rss+xml",
      title: "Solid RSS",
      href: "/rss.xml",
    },
  });
}


export default function Root() {
  return (
    <MetaProvider>
      <RssLink />
    </MetaProvider>
  );
}

```

--------------------------------

### Configure MetaProvider and Head Tags

Source: https://docs.solidjs.com/solid-meta/getting-started/installation-and-setup

Example of wrapping an application with MetaProvider and using head tag components like Title, Link, and Meta.

```jsx
import { MetaProvider, Title, Link, Meta } from "@solidjs/meta";


const App = () => (
  <MetaProvider>
    <div class="Home">
      <Title>Title of page</Title>
      <Link rel="canonical" href="http://solidjs.com/" />
      <Meta name="example" content="whatever" />
    </div>
  </MetaProvider>
);
```

--------------------------------

### Basic usage of Link

Source: https://docs.solidjs.com/solid-meta/reference/meta/link

Example showing how to use the Link component within a MetaProvider to set a favicon.

```jsx

import { MetaProvider, Link } from "@solidjs/meta";


function App() {
  return (
    <MetaProvider>
      <Link rel="icon" href="/favicon.ico" />
    </MetaProvider>
  );
}

```

--------------------------------

### Add script contents with useHead

Source: https://docs.solidjs.com/solid-meta/reference/meta/use-head

Example of adding a JSON-LD script tag to the document head.

```jsx

import { createUniqueId } from "solid-js";
import { MetaProvider, useHead } from "@solidjs/meta";


function JsonLd() {
  const jsonLD = JSON.stringify({
    "@context": "https://schema.org",
    "@type": "WebSite",
    name: "Solid Docs",
    url: "https://docs.solidjs.com/",
  });


  useHead({
    tag: "script",
    setting: { close: true, escape: false },
    id: createUniqueId(),
    props: {
      type: "application/ld+json",
      children: jsonLD,
    },
  });
}


export default function Root() {
  return (
    <MetaProvider>
      <JsonLd />
    </MetaProvider>
  );
}

```

--------------------------------

### Import MetaProvider

Source: https://docs.solidjs.com/solid-meta/reference/meta/metaprovider

Import the MetaProvider component from the @solidjs/meta package.

```javascript
import { MetaProvider } from "@solidjs/meta";
```

--------------------------------

### Basic Meta Usage

Source: https://docs.solidjs.com/solid-meta/reference/meta/meta

Wrap the application in a MetaProvider and define meta tags within the component tree.

```jsx

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


export default function Root() {
  return (
    <MetaProvider>
      <Meta charset="utf-8" />
      <Meta name="viewport" content="width=device-width, initial-scale=1" />
      <Meta name="description" content="Hacker News Clone built with Solid" />
    </MetaProvider>
  );
}

```

--------------------------------

### Importing Meta

Source: https://docs.solidjs.com/solid-meta/reference/meta/meta

Import the Meta component from the @solidjs/meta package.

```typescript

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

```

--------------------------------

### Basic usage of Base

Source: https://docs.solidjs.com/solid-meta/reference/meta/base

Wrap the application in a MetaProvider and include the Base component to set the document base URL.

```jsx

import { MetaProvider, Base } from "@solidjs/meta";


function App() {
  return (
    <MetaProvider>
      <Base href="https://docs.solidjs.com/" />
    </MetaProvider>
  );
}

```

--------------------------------

### Import useHead

Source: https://docs.solidjs.com/solid-meta/reference/meta/use-head

Import the useHead function from the @solidjs/meta package.

```typescript

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

```

--------------------------------

### Basic MetaProvider Usage

Source: https://docs.solidjs.com/solid-meta/reference/meta/metaprovider

Wrap your application or component tree with MetaProvider to enable head tag management via components like Title and Meta.

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


export default function Root() {
  return (
    <MetaProvider>
      <Title>Solid Docs</Title>
      <Meta name="description" content="Solid documentation" />
    </MetaProvider>
  );
}
```

--------------------------------

### Importing the Base component

Source: https://docs.solidjs.com/solid-meta/reference/meta/base

Import the Base component from the @solidjs/meta package.

```typescript

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

```

--------------------------------

### Configure MetaProvider for Server-Side Rendering

Source: https://docs.solidjs.com/solid-meta/getting-started/server-setup

Wrap the application with MetaProvider and use getAssets to inject head tags into the server-rendered HTML payload.

```javascript
import { renderToString, getAssets } from "solid-js/web";
import { MetaProvider } from "@solidjs/meta";
import App from "./App";


// ... within the context of a request ...
const app = renderToString(() => (
  <MetaProvider>
    <App />
  </MetaProvider>
));


res.send(`
  <!doctype html>
  <html>
    <head>
      ${getAssets()}
    </head>
    <body>
      <div id="root">${app}</div>
    </body>
  </html>
`);
```

--------------------------------

### useHead(tag: TagDescription): void

Source: https://docs.solidjs.com/solid-meta/reference/meta/use-head

Adds a custom head tag to the document. It requires a MetaProvider to be present in the component tree.

```APIDOC
## useHead(tag: TagDescription)

### Description
Adds a custom head tag from a TagDescription object to the document head. This function must be called within a component that is a descendant of a MetaProvider.

### Parameters
- **tag** (TagDescription) - Required - The configuration object for the head tag.

#### TagDescription Object
- **tag** (string) - Required - Tag name to render (e.g., 'link', 'script').
- **props** (Record<string, unknown>) - Required - Attributes and properties applied to the element.
- **id** (string) - Required - Identifier used for hydration.
- **setting** (Object) - Optional - Server-rendering options.
  - **close** (boolean) - Optional - If true, emits a closing tag.
  - **escape** (boolean) - Optional - If true, escapes children.
- **name** (string) - Optional - Label for the tag description.
- **ref** (Element) - Optional - Existing element reference.

### Return Value
- **void** - This function does not return a value.
```

--------------------------------

### Basic usage of Style

Source: https://docs.solidjs.com/solid-meta/reference/meta/style

Wrap the Style component within a MetaProvider to inject CSS rules into the document.

```jsx

import { MetaProvider, Style } from "@solidjs/meta";


export default function Root() {
  return (
    <MetaProvider>
      <Style>{`
          p {
            color: #26b72b;
          }
        `}</Style>
    </MetaProvider>
  );
}

```

--------------------------------

### Import Link component

Source: https://docs.solidjs.com/solid-meta/reference/meta/link

Import the Link component from the @solidjs/meta package.

```typescript

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

```

--------------------------------

### Importing the Style component

Source: https://docs.solidjs.com/solid-meta/reference/meta/style

Import the Style component from the @solidjs/meta package.

```typescript

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

```

--------------------------------

### Injecting head tags with MetaProvider

Source: https://docs.solidjs.com/solid-meta/getting-started/client-setup

Wrap the application in MetaProvider to enable head tag management. Components like Title, Link, and Meta can then be rendered anywhere in the component tree.

```javascript
import { MetaProvider, Title, Link, Meta } from "@solidjs/meta";


const App = () => (
  <MetaProvider>
    <div class="Home">
      <Title>Title of page</Title>
      <Link rel="canonical" href="http://solidjs.com/" />
      <Meta name="example" content="whatever" />
      // ...
    </div>
  </MetaProvider>
);
```

--------------------------------

### Importing the Title component

Source: https://docs.solidjs.com/solid-meta/reference/meta/title

Import the Title component from the @solidjs/meta package.

```typescript
import { Title } from "@solidjs/meta";
```

--------------------------------

### MetaProvider

Source: https://docs.solidjs.com/solid-meta/reference/meta/metaprovider

The MetaProvider component supplies the necessary context for head tag management. It must wrap components that use Title, Meta, or useHead.

```APIDOC
## MetaProvider

### Description
Supplies the context that Solid Meta components and `useHead` use to add head tags. It must be present in the component tree for these utilities to function.

### Props
- **children** (JSX.Element) - Optional - Content rendered inside the provider.

### Usage Example
```jsx
import { MetaProvider, Title, Meta } from "@solidjs/meta";

export default function Root() {
  return (
    <MetaProvider>
      <Title>Solid Docs</Title>
      <Meta name="description" content="Solid documentation" />
    </MetaProvider>
  );
}
```
```

--------------------------------

### Meta Component

Source: https://docs.solidjs.com/solid-meta/reference/meta/meta

The Meta component is used to add <meta> elements to the document head. It accepts standard HTML meta attributes and requires a MetaProvider to be present in the component tree.

```APIDOC
## Meta Component

### Description
Adds a `<meta>` element for metadata that is not represented by another HTML metadata element.

### Import
`import { Meta } from "@solidjs/meta";`

### Type
`const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>;`

### Props
Accepts all standard attributes for the HTML `<meta>` element (e.g., `name`, `content`, `charset`, `http-equiv`, `property`, `media`).

### Behavior
- Registers a `meta` tag with self-closing server rendering.
- Cascading identity uses `name`, `http-equiv`, `content`, `charset`, `media`, and `property` from the tag props.
- `property` is treated as `name` when Solid Meta builds the tag key.
- Requires `MetaProvider` in the component tree.

### Example
```jsx
import { MetaProvider, Meta } from "@solidjs/meta";

export default function Root() {
  return (
    <MetaProvider>
      <Meta charset="utf-8" />
      <Meta name="viewport" content="width=device-width, initial-scale=1" />
      <Meta name="description" content="Hacker News Clone built with Solid" />
    </MetaProvider>
  );
}
```
```

--------------------------------

### Meta Component Type Definition

Source: https://docs.solidjs.com/solid-meta/reference/meta/meta

The Meta component accepts standard HTML meta element attributes.

```typescript

const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>;

```

--------------------------------

### Base Component

Source: https://docs.solidjs.com/solid-meta/reference/meta/base

The Base component is a functional component that accepts standard HTML base attributes to define the document's base URL.

```APIDOC
## Base Component

### Description
Adds a `<base>` element to the document head to set the base URL for resolving relative URLs.

### Import
`import { Base } from "@solidjs/meta";`

### Type
`const Base: Component<JSX.BaseHTMLAttributes<HTMLBaseElement>>;`

### Props
Accepts all standard attributes for the HTML `<base>` element (e.g., `href`, `target`).

### Behavior
- Registers a self-closing `base` tag.
- Requires `MetaProvider` to be present in the component tree.
- Only one document-head element is added per active instance.

### Example
```jsx
import { MetaProvider, Base } from "@solidjs/meta";

function App() {
  return (
    <MetaProvider>
      <Base href="https://docs.solidjs.com/" />
    </MetaProvider>
  );
}
```
```

--------------------------------

### Base component type definition

Source: https://docs.solidjs.com/solid-meta/reference/meta/base

The Base component accepts standard JSX BaseHTMLAttributes.

```typescript

const Base: Component<JSX.BaseHTMLAttributes<HTMLBaseElement>>;

```

--------------------------------

### Title component type definition

Source: https://docs.solidjs.com/solid-meta/reference/meta/title

The type definition for the Title component.

```typescript
const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>;
```

--------------------------------

### Define TagDescription type

Source: https://docs.solidjs.com/solid-meta/reference/meta/use-head

The structure of the object required by useHead.

```typescript

type TagDescription = {
  tag: string;
  props: Record<string, unknown>;
  setting?: {
    close?: boolean;
    escape?: boolean;
  };
  id: string;
  name?: string;
  ref?: Element;
};


function useHead(tag: TagDescription): void;

```

--------------------------------

### Style Component API

Source: https://docs.solidjs.com/solid-meta/reference/meta/style

The Style component is used to register a <style> tag within the document head. It accepts standard style attributes and children to define the CSS rules.

```APIDOC
## Style Component

### Description
Adds a `<style>` element for CSS rules that apply to the document. Requires `MetaProvider` in the component tree.

### Import
`import { Style } from "@solidjs/meta";`

### Type
`const Style: Component<JSX.StyleHTMLAttributes<HTMLStyleElement>>;`

### Props
- **children** (JSX.Element) - Optional - Content rendered inside the style element.

### Example
```jsx
import { MetaProvider, Style } from "@solidjs/meta";

export default function Root() {
  return (
    <MetaProvider>
      <Style>{`
          p {
            color: #26b72b;
          }
        `}</Style>
    </MetaProvider>
  );
}
```
```

--------------------------------

### Link Component API

Source: https://docs.solidjs.com/solid-meta/reference/meta/link

The Link component is used to define relationships between the document and external resources by injecting <link> tags into the document head.

```APIDOC
## Link Component

### Description
Adds a `<link>` element to the document head. Requires `MetaProvider` to be present in the component tree.

### Import
`import { Link } from "@solidjs/meta";`

### Type
`const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>>;`

### Props
Accepts all standard attributes for the HTML `<link>` element.

### Behavior
- Registers a self-closing `link` tag.
- Non-cascading tags can add one document-head element per active instance.

### Example
```jsx
import { MetaProvider, Link } from "@solidjs/meta";

function App() {
  return (
    <MetaProvider>
      <Link rel="icon" href="/favicon.ico" />
    </MetaProvider>
  );
}
```
```

--------------------------------

### Style component type definition

Source: https://docs.solidjs.com/solid-meta/reference/meta/style

The component accepts standard StyleHTMLAttributes for the style element.

```typescript

const Style: Component<JSX.StyleHTMLAttributes<HTMLStyleElement>>;

```

--------------------------------

### Title Component

Source: https://docs.solidjs.com/solid-meta/reference/meta/title

The Title component registers a <title> tag in the document head. It supports cascading behavior where the most recent instance takes precedence.

```APIDOC
## Title Component

### Description
Adds a <title> element to the document head. Requires a `MetaProvider` to be present in the component tree.

### Import
`import { Title } from "@solidjs/meta";`

### Props
- **children** (JSX.Element) - Optional - Content rendered inside the title element.

### Behavior
- Registers a title tag with `close: true` and `escape: true`.
- Cascading keeps the latest active title instance in the document head and restores the previous instance when the latest one is removed.

### Example
```jsx
import { MetaProvider, Title } from "@solidjs/meta";

export default function Root() {
  return (
    <MetaProvider>
      <Title>Solid Docs</Title>
    </MetaProvider>
  );
}
```
```

--------------------------------

### Link component type definition

Source: https://docs.solidjs.com/solid-meta/reference/meta/link

The type definition for the Link component, which accepts standard link HTML attributes.

```typescript

const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>>;

```

--------------------------------

### MetaProvider Type Definition

Source: https://docs.solidjs.com/solid-meta/reference/meta/metaprovider

The MetaProvider component is defined as a ParentComponent.

```typescript
const MetaProvider: ParentComponent;
```
Tokens:
Raw