ReactでMETAタグを設定してみた

ReactでtitleタグやdescriptionなどのMETAタグを指定してみました。

1. 事前準備

まずはreact-helmet-asyncというライブラリが必要なようです。インストールしてみます。「react-helmet」というものもあるようですが、こっちは使わないほうがよいみたいです。

yarn add react-helmet-async

2. 反映範囲を指定する

どこまで反映させるかを指定してあげるみたいです。App.tsxにこんな感じで入れてあげるみたいですね。これでどこにかいてもMETAタグとして反映するみたいです。

import './App.css';
import { Router } from "routers/Router";
import { HelmetProvider } from "react-helmet-async";

function App() {
  return (
      <HelmetProvider>
        <Router />
      </HelmetProvider>
  );
}

export default App;

2. METAタグを指定する

あとは好きなページ（router）にMETAタグを指定してあげればいいみたいですね。こんな感じです。

<Helmet>
  <title>タイトルタグ</title>
  <meta name="description" content="サイトの説明文です" />
</Helmet>

子コンポーネントでもOKみたいです。
重複して指定してしまった場合は子コンポーネント側が表示されました。

ちなみにOGPは無理そうです。そこまでやるならNext.jsとかを使うしかないっぽいですね。

今回は以上です！