Skip to main content

meta

React's extensions to <meta> are currently only available in React's canary and experimental channels. In stable releases of React <meta> works only as a built-in browser HTML component. Learn more about React's release channels here.

The built-in browser <meta> component lets you add metadata to the document.

<meta name="keywords" content="React, JavaScript, semantic markup, html" />

Reference ​

<meta> ​

To add document metadata, render the built-in browser <meta> component. You can render <meta> from any component and React will always place the corresponding DOM element in the document head.

<meta name="keywords" content="React, JavaScript, semantic markup, html" />

See more examples below.

Props ​

<meta> supports all common element props.

It should have exactly one of the following props: name, httpEquiv, charset, itemProp. The <meta> component does something different depending on which of these props is specified.

  • name: a string. Specifies the kind of metadata to be attached to the document.
  • charset: a string. Specifies the character set used by the document. The only valid value is "utf-8".
  • httpEquiv: a string. Specifies a directive for processing the document.
  • itemProp: a string. Specifies metadata about a particular item within the document rather than the document as a whole.
  • content: a string. Specifies the metadata to be attached when used with the name or itemProp props or the behavior of the directive when used with the httpEquiv prop.

Special rendering behavior ​

React will always place the DOM element corresponding to the <meta> component within the document’s <head>, regardless of where in the React tree it is rendered. The <head> is the only valid place for <meta> to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render <meta> components itself.

There is one exception to this: if <meta> has an itemProp prop, there is no special behavior, because in this case it doesn’t represent metadata about the document but rather metadata about a specific part of the page.

Usage ​

Annotating the document with metadata ​

You can annotate the document with metadata such as keywords, a summary, or the author’s name. React will place this metadata within the document <head> regardless of where in the React tree it is rendered.

<meta name="author" content="John Smith" />
<meta name="keywords" content="React, JavaScript, semantic markup, html" />
<meta name="description" content="API reference for the <meta> component in React DOM" />

You can render the <meta> component from any component. React will put a <meta> DOM node in the document <head>.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function SiteMapPage() {
  return (
    <ShowRenderedHTML>
      <meta name="keywords" content="React" />
      <meta name="description" content="A site map for the React website" />
      <h1>Site Map</h1>
      <p>...</p>
    </ShowRenderedHTML>
  );
}

Annotating specific items within the document with metadata ​

You can use the <meta> component with the itemProp prop to annotate specific items within the document with metadata. In this case, React will not place these annotations within the document <head> but will place them like any other React component.

<section itemScope>
  <h3>Annotating specific items</h3>
  <meta itemProp="description" content="API reference for using <meta> with itemProp" />
  <p>...</p>
</section>