<title>

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

<title>My Blog</title>

リファレンス
- <title>
使用方法
- ドキュメントタイトルの設定
- タイトルでの変数の使用

リファレンス

`<title>`

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

<title>My Blog</title>

以下の例を参照してください。

プロパティ

<title>は、すべての共通要素プロパティをサポートします。

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

特殊なレンダリング動作

Reactは、`<title>コンポーネントに対応するDOM要素を、Reactツリー内のどこにレンダリングされていても、常にドキュメントの`<head>内に配置します。`<head>はDOM内で`<title>が存在できる唯一の有効な場所ですが、特定のページを表すコンポーネントがその`<title>自体をレンダリングできる場合、便利であり、構成可能性を維持します。

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

<title> タグが <svg> コンポーネント内にある場合、特別な動作はありません。このコンテキストでは、ドキュメントのタイトルではなく、そのSVGグラフィックのアクセシビリティ注釈を表しているためです。
<title> タグにitemProp プロパティがある場合、特別な動作はありません。これは、ドキュメントのタイトルではなく、ページの特定の部分に関するメタデータを表しているためです。

注意点

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

使用方法

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

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

フォーク

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>コンポーネントの子要素は、単一のテキスト文字列でなければなりません。(または、単一の数字、またはtoStringメソッドを持つ単一オブジェクト)。明白ではないかもしれませんが、このようにJSXの中括弧を使用すると

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

…実際には、<title>コンポーネントの子要素として2要素の配列(文字列"Results page"とpageNumberの値)が渡されます。これはエラーの原因となります。代わりに、文字列補間を使用して<title>に単一の文字列を渡してください。

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

前へ<style>

次へAPIs