Meta reference

Meta

Edit this page

The <Meta> component represents metadata that cannot be represented by other HTML elements. It is a wrapper for the native meta element and has the same properties.

import { 
const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
Meta } from "@solidjs/meta";


<
const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
Meta 
JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
name="description" 
JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
content="My site description" />;

Meta components can be placed in the MetaProvider or added throughout the application for additional metadata or override parents. Meta tags are considered the same and will be overridden if name attributes match.

Usage

Adding meta tag

import { 
const MetaProvider: ParentComponent
MetaProvider, 
const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
Meta } from "@solidjs/meta";


export default function 
function Root(): JSX.Element
Root() {
  return (
    <
const MetaProvider: ParentComponent
MetaProvider>
      <
const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
Meta 
JSX.MetaHTMLAttributes<HTMLMetaElement>.charset?: string | undefined
charset="utf-8" />
      <
const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
Meta 
JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
name="viewport" 
JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
content="width=device-width, initial-scale=1" />
      <
const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
Meta 
JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
name="description" 
JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
content="Hacker News Clone built with Solid" />
    </
const MetaProvider: ParentComponent
MetaProvider>
  );
}
Report an issue with this page