<title>Link for this heading

January 6, 2025 · View on GitHub

The built-in browser <title> component lets you specify the title of the document.

<title>My Blog</title>

Reference
- <title>
Usage
- Set the document title
- Use variables in the title

Reference Link for Reference

`<title>`Link for this heading

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

<title>My Blog</title>

See more examples below.

Props Link for Props

<title> supports all common element props.

children: <title> accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text.

Special rendering behavior Link for Special rendering behavior

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

There are two exception to this:

If <title> is within an <svg> component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an accessibility annotation for that SVG graphic.
If the <title> has an itemProp prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page.

Pitfall

Only render a single <title> at a time. If more than one component renders a <title> tag at the same time, React will place all of those titles in the document head. When this happens, the behavior of browsers and search engines is undefined.

Usage Link for Usage

Set the document title Link for Set the document title

Render the <title> component from any component with text as its children. React will put a <title> DOM node in the document <head>.

App.jsShowRenderedHTML.js

App.js

ResetFork

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function ContactUsPage() {
  return (
    <ShowRenderedHTML>
      <title>My Site: Contact Us</title>
      <h1>Contact Us</h1>
      <p>Email us at support@example.com</p>
    </ShowRenderedHTML>
  );
}

Use variables in the title Link for Use variables in the title

The children of the <title> component must be a single string of text. (Or a single number or a single object with a toString method.) It might not be obvious, but using JSX curly braces like this:

<title>Results page {pageNumber}</title> // 🔴 Problem: This is not a single string

… actually causes the <title> component to get a two-element array as its children (the string "Results page" and the value of pageNumber). This will cause an error. Instead, use string interpolation to pass <title> a single string:

<title>{`Results page ${pageNumber}`}</title>

Previous<style>

NextAPIs

no uwu plz

uwu?

Logo by@sawaratsuki1004

<title>Link for this heading

Reference Link for Reference

`<title>`Link for this heading

Props Link for Props

Special rendering behavior Link for Special rendering behavior

Pitfall

Usage Link for Usage

Set the document title Link for Set the document title

Use variables in the title Link for Use variables in the title

On this page

react@19

react-dom@19

Rules of React

React Server Components

Legacy APIs