Meta
is a component that renders the meta
element on the server, and hydrates it on the client.
tsx
<Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="description" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="My site description" />
tsx
<Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="description" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="My site description" />
Usage
tsx
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
="en"> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
charset(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.charset?: string | undefined
="utf-8" /> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="viewport" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="width=device-width, initial-scale=1" /> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="description" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="Hacker News Clone built with Solid" /> </Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}
tsx
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
="en"> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
charset(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.charset?: string | undefined
="utf-8" /> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="viewport" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="width=device-width, initial-scale=1" /> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="description" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="Hacker News Clone built with Solid" /> </Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}
Adding a meta
tag for a specific page
tsx
export default function MyPagefunction MyPage(): JSX.Element
() { return (
<>
<Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="description" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="My site is even better now we are on MyPage" /> <h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
>My Super Cool Page</h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
> </>
);
}
tsx
export default function MyPagefunction MyPage(): JSX.Element
() { return (
<>
<Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="description" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="My site is even better now we are on MyPage" /> <h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
>My Super Cool Page</h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
> </>
);
}
Reference
The <Meta>
component represents metadata that cannot be represented by other HTML elements. It is a wrapper of the native meta
element and has the same properties. It is a re-export from @solidjs/meta
.
Meta
components may be placed in the Head
or can be added throughout the application to add additional metadata or override parents. Meta
tags are consider to be the same and are overridden if the name
attribute matches.