More than 3 years have passed since last update.

Create-react-appのindex.htmlで条件分岐してmetaタグなどを入れる

Posted at 2020-11-15

#Create-react-appで環境毎にhtmlタグを変えたい時のメモ

本番環境と開発環境でmetaタグを変えたかった(開発環境にnoindexを入れたかった)ので、調べてみたらejsのテンプレートに対応してるみたいです。

参考：Conditional content in index.html

##ejsの文法

参考：ejs.co

とりあえず<% %>で囲った中はjs書いていいみたいです。変数をそのまま出力するときは<%=何でしょうか。今後使う時が来たら調べてみます。

index.html

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

##結論

自分は下記metaタグ入れたかっただけなので、結論こう書きました。環境変数とかもよく分かってないのでもっとちゃんとしたやり方あるかもしれないです。

ビルド時に本番環境サイトはREACT_APP_ENVにprod、開発環境サイトはREACT_APP_ENVにdevと入れています。

<meta name="robots" content="noindex" />

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- headに入れてるタグ色々 -->
    <% if(process.env.REACT_APP_ENV === "dev") { %>
    <meta name="robots" content="noindex" />
    <% } %>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up