Thebuilt-in browser<meta> component lets you add metadata to the document.
<metaname="keywords"content="React, JavaScript, semantic markup, html"/>Reference
<meta>
To add document metadata, render thebuilt-in browser<meta> component. You can render<meta> from any component and React will always place the corresponding DOM element in the document head.
<metaname="keywords"content="React, JavaScript, semantic markup, html"/>Props
<meta> supports allcommon element props.
It should haveexactly 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 thekind 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 thenameoritemPropprops or the behavior of the directive when used with thehttpEquivprop.
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 anitemProp 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.
<metaname="author"content="John Smith"/>
<metaname="keywords"content="React, JavaScript, semantic markup, html"/>
<metaname="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>.
importShowRenderedHTMLfrom'./ShowRenderedHTML.js';exportdefaultfunctionSiteMapPage(){return(<ShowRenderedHTML><metaname="keywords"content="React"/><metaname="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 theitemProp prop to annotate specific items within the document with metadata. In this case, React willnot place these annotations within the document<head> but will place them like any other React component.
<sectionitemScope>
<h3>Annotating specific items</h3>
<metaitemProp="description"content="API reference for using <meta> with itemProp"/>
<p>...</p>
</section>