メインコンテンツにスキップ

タイトルとメタタグ

titleタグの変更​

ソースHTMLファイルは、生成されたプロジェクトのpublicフォルダにあります。 その中の<title>タグを編集して、タイトルを「React App」から他のものに変更できます。

通常、publicフォルダ内のファイルを頻繁に編集することはありません。 例えば、スタイルシートの追加は、HTMLに触れることなく行われます。

コンテンツに基づいてページタイトルを動的に更新する必要がある場合は、ブラウザのdocument.title APIを使用できます。 Reactコンポーネントからタイトルを変更する必要がある、より複雑なシナリオの場合は、サードパーティライブラリであるReact Helmetを使用できます。

本番環境でアプリのカスタムサーバーを使用し、ブラウザに送信される前にタイトルを変更する場合は、このセクションのアドバイスに従ってください。 あるいは、各ページを静的HTMLファイルとして事前にビルドし、JavaScriptバンドルを読み込むこともできます。これはこちらで説明されています。

サーバーでの動的な<meta>タグの生成​

Create React Appはサーバーレンダリングをサポートしていないため、<meta>タグを動的にして現在のURLを反映させる方法が疑問に思うかもしれません。これを解決するには、次のようにHTMLにプレースホルダーを追加することをお勧めします。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta property="og:title" content="__OG_TITLE__" />
    <meta property="og:description" content="__OG_DESCRIPTION__" />
  </head>
</html>

次に、サーバー上で、使用するバックエンドに関係なく、index.htmlをメモリに読み込み、__OG_TITLE__、__OG_DESCRIPTION__、およびその他のプレースホルダーを現在のURLに応じた値に置き換えることができます。補間された値は、HTMLに埋め込むために安全であるように、サニタイズしてエスケープしてください！

Nodeサーバーを使用する場合は、クライアントとサーバー間でルートマッチングルジックを共有することもできます。ただし、基本的なケースでは、複製しても問題ありません。

サーバーからページへのデータの挿入​

前のセクションと同様に、グローバル変数を挿入するHTMLにプレースホルダーを残すことができます。たとえば、次のようにします。

<!doctype html>
<html lang="en">
  <head>
    <script>
      window.SERVER_DATA = __SERVER_DATA__;
    </script>

次に、サーバー上で、レスポンスを送信する直前に__SERVER_DATA__を実際のデータのJSONに置き換えることができます。その後、クライアントコードはwindow.SERVER_DATAを読み取って使用できます。 クライアントに送信する前にJSONをサニタイズしてください。アプリがXSS攻撃に対して脆弱になる可能性があります。