API Reference
コンポーネント

<title> - This feature is available in the latest Canary

Canary

React による <title> の機能拡張は、現在 React の Canary および experimental チャンネルでのみ利用可能です。React の安定版リリースでは、<title> は単なる組み込みのブラウザ HTML コンポーネントとして機能します。React のリリースチャンネルについてはこちらをご覧ください。

ブラウザ組み込みの <title> コンポーネントを利用することで、ドキュメントのタイトルを指定できます。

<title>My Blog</title>

リファレンス

<title>

ドキュメントのタイトルを指定するには、ブラウザ組み込みの <title> コンポーネントをレンダーします。任意のコンポーネントから <title> をレンダーでき、React は常に対応する DOM 要素をドキュメントの head 内に配置します。

<title>My Blog</title>

さらに例を見る

props

<title> は、一般的な要素の props をすべてサポートしています。

  • children: <title> は子としてテキストのみを受け入れます。このテキストがドキュメントのタイトルになります。それがテキストのみをレンダーする限り、カスタムのコンポーネントを渡すこともできます。

特別なレンダー動作

<title> コンポーネントが React ツリー内のどこでレンダーされていても、React は対応する DOM 要素を常にドキュメントの <head> 内に配置します。<head> は DOM 内で <title> が存在できる唯一の有効な場所ですが、ある特定のページを表すコンポーネントが自分自身で <title> コンポーネントをレンダーできれば有用であり、コンポーネントの組み合わせやすさが保たれます。

これには 2 つの例外があります。

  • <title> が <svg> コンポーネント内にある場合、特別な動作は発生しません。その文脈ではドキュメントのタイトルではなく当該 SVG グラフィックに対するアクセシビリティ用の説明を表すことになるからです。
  • <title> に props として itemProp がある場合、特別な動作は発生しません。その場合はドキュメントのタイトルではなく、ページの特定の部分に関するメタデータを表すことになるからです。

落とし穴

一度にひとつの <title> だけがレンダーされるようにしてください。複数のコンポーネントが同時に <title> タグをレンダーすると、React はそれらのタイトルをすべてドキュメントの head に配置します。このような場合のブラウザや検索エンジンの動作は定義されていません。

使用法

ドキュメントのタイトルを設定する

任意のコンポーネントから、テキストを children として持つ <title> コンポーネントをレンダーします。React は <title> DOM ノードをドキュメントの <head> に配置します。

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>
  );
}

タイトルに変数を使用する

<title> コンポーネントの children は、単一の文字列（あるいは単一の数値、または toString メソッドを持つ単一のオブジェクト）でなければなりません。気付きにくいかもしれませんが、以下のように JSX で波括弧を使用した場合：

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

…実際には、<title> コンポーネントは children として 2 つの要素（"Results page" という文字列と、pageNumber の値）を持つ配列を受け取ることになります。これはエラーを引き起こします。代わりに、文字列補間を使用することで <title> に単一の文字列を渡すようにしてください。

<title>{`Results page ${pageNumber}`}</title>
Previous<style>
NextAPI