Scribd
Upload
6 views5 pages

Meta - React

The document provides an overview of the built-in <meta> component in React, which allows users to add metadata to the document's head. It details the props that <meta> supports, including name, charset, httpEquiv, and itemProp, and explains how React handles the rendering of <meta> elements. Additionally, it describes the usage of <meta> for annotating documents and specific items within them.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views5 pages

Meta - React

The document provides an overview of the built-in <meta> component in React, which allows users to add metadata to the document's head. It details the props that <meta> supports, including name, charset, httpEquiv, and itemProp, and explains how React handles the rendering of <meta> elements. Additionally, it describes the usage of <meta> for annotating documents and specific items within them.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

20/02/2025, 18:32 <meta> – React

v19

API REFERENCE COMPONENTS

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

<meta name="keywords" content="React, JavaScript, semantic mark

Reference

<meta>

Usage

Annotating the document with metadata


Annotating specific items within the document with metadata

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.

https://react.dev/reference/react-dom/components/meta 1/5
20/02/2025, 18:32 <meta> – React

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

https://react.dev/reference/react-dom/components/meta 2/5
20/02/2025, 18:32 <meta> – React

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 i

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

App.js ShowRenderedHTML.js Reset

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 webs
<h1>Site Map</h1>
<p>...</p>
</ShowRenderedHTML>
);

https://react.dev/reference/react-dom/components/meta 3/5
20/02/2025, 18:32 <meta> – React

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> wit
<p>...</p>
</section>

PREVIOUS

<link>

NEXT

<script>

Copyright © Meta Platforms, Inc

uwu?

https://react.dev/reference/react-dom/components/meta 4/5
20/02/2025, 18:32 <meta> – React

Learn React API Reference

Quick Start React APIs

Installation React DOM APIs

Describing the UI

Adding Interactivity

Managing State

Escape Hatches

Community More

Code of Conduct Blog

Meet the Team React Native

Docs Contributors Privacy

Acknowledgements Terms

https://react.dev/reference/react-dom/components/meta 5/5

You might also like