Reactでメタデータを追加する方法

1. react-helmetパッケージの使用: Reactアプリケーションでメタデータを追加するためには、まずreact-helmetパッケージをインストールする必要があります。次のコマンドを使用してインストールします:

npm install react-helmet

インストールが完了したら、以下のようにコード内でHelmetコンポーネントを使用してメタデータを追加できます:

import { Helmet } from 'react-helmet';
function MyApp() {
  return (
    <div>
      <Helmet>
        <title>ページのタイトル</title>
        <meta name="description" content="ページの説明" />
        <meta name="keywords" content="キーワード1, キーワード2, キーワード3" />
      </Helmet>
      {/* ページのコンテンツ */}
    </div>
  );
}

Helmetコンポーネント内部の<title>タグと<meta>タグに必要なメタデータを追加します。

2. Reactのコンポーネント内で直接メタデータを設定する: もう1つの方法は、Reactのコンポーネント内で直接メタデータを設定する方法です。以下は例です:

import { useEffect } from 'react';
function MyApp() {
  useEffect(() => {
    document.title = 'ページのタイトル';
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'ページの説明');
    }
    const metaKeywords = document.querySelector('meta[name="keywords"]');
    if (metaKeywords) {
      metaKeywords.setAttribute('content', 'キーワード1, キーワード2, キーワード3');
    }
  }, []);
  return (
    <div>
      {/* ページのコンテンツ */}
    </div>
  );
}

useEffectフックを使用して、コンポーネントがマウントされた後にメタデータを設定します。