---
meta: ""
---
The [built-in browser `` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) lets you add metadata to the document.
```js
```
---
## Reference {/*reference*/}
### `` {/*meta*/}
To add document metadata, render the [built-in browser `` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). You can render `` from any component and React will always place the corresponding DOM element in the document head.
```js
```
[See more examples below.](#usage)
#### Props {/*props*/}
`` supports all [common element props.](/reference/react-dom/components/common#common-props)
It should have *exactly one* of the following props: `name`, `httpEquiv`, `charset`, `itemProp`. The `` component does something different depending on which of these props is specified.
* `name`: a string. Specifies the [kind of metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name) 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 {/*special-rendering-behavior*/}
React will always place the DOM element corresponding to the `` component within the document’s ``, regardless of where in the React tree it is rendered. The `` is the only valid place for `` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `` components itself.
There is one exception to this: if `` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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 {/*usage*/}
### Annotating the document with metadata {/*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 `` regardless of where in the React tree it is rendered.
```html
```
You can render the `` component from any component. React will put a `` DOM node in the document ``.
```js src/App.js active
import ShowRenderedHTML from './ShowRenderedHTML.js';
export default function SiteMapPage() {
return (
Site Map
...
);
}
```
### Annotating specific items within the document with metadata {/*annotating-specific-items-within-the-document-with-metadata*/}
You can use the `` 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 `` but will place them like any other React component.
```js
Annotating specific items
...
```
---
## Sitemap
[Overview of all docs pages](/llms.txt)