Zenn
📓

【react-helmet-async】Reactでページタイトルを設定する方法

2024/08/24に公開
React
npm
初心者向け
JSX
コンポーネント
tech

はじめに

現在Reactのキャッチアップのため簡単な掲示板アプリを作っています。
Next.jsなどを使えばページタイトルを簡単に設定することができますが、
Reactでページタイトルを設定するための手順を調べる機会があったので備忘録として整理します。

Reactバージョン
18.3.1

目的


ルーティングしたページ毎にタイトルをつけます。
HTMLの<head>タグ内にある<title>タグで囲むやつをReactでどうやるの？ってやつです。

結論

  • react-helmet-async を使用することで、各ページに個別の <title> タグを設定することができます。
  • 各ページの Helmetコンポーネント 内で <title> を指定することで、そのページのタイトルを変更できます。

手順

1. react-helmet-async のインストール

まず、 react-helmet-async をプロジェクトにインストールします。

npm install react-helmet-async

2. HelmetProvider でアプリケーションをラップする

HelmetProvider を使用してアプリケーション全体をラップする必要があります。
エントリポイントになるファイルで行います。

import React from "react";
import ReactDOM from "react-dom";
import { HelmetProvider } from "react-helmet-async"; // <- インポートする
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <HelmetProvider>
      <App />
    </HelmetProvider>
  </React.StrictMode>
);

3. 各ページでタイトルを設定する

各ページコンポーネントで Helmetコンポーネント を使用してタイトルを設定します。

import { Helmet } from "react-helmet-async"; // <- インポートする

const Home = () => {
  return (
    <>
      <Helmet>
        <title>ホーム | React掲示板</title> // <- HTMLの<head>タグに設定するのと同じ
      </Helmet>
      <div>
        <h1>React掲示板へようこそ</h1>
      </div>
    </>
  );
};

export default Home;

他のページでも同様に、　<Helmet> 内に <title> タグを記述してページタイトルを設定します。

さいごに

Next.jsを使えば直感的にページタイトルを変更ができますが、素のReactだと一手間必要ですね🙄
各ページそれぞれ独自のタイトル設定することで、SEOやUX向上につながると思うので設定はしておきたいところです。

参考

https://github.com/staylor/react-helmet-async?tab=readme-ov-file#readme

https://zenn.dev/terass_dev/articles/3a1d59f4a3421b

Discussion