ブラウザ組み込みの <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 に配置します。このような場合のブラウザや検索エンジンの動作は定義されていません。

使用法