React Helmet（SEO対策）

React

React Helmetとは

Reactで作られたウェブアプリの各ページに対して、HTMLの<head>要素（タイトルやメタデータ等）を動的に制御するためのコンポーネント

なぜ必要なのか

ReactはSPAを作成するためのライブラリであり、そのページ内でのルーティングがJavascriptによって制御されるため、静的なHTMLの<head>要素では各ページの内容を正確に表現できません。

そのため、React Helmetを利用して動的に<head>要素を変更することが一般的です。

install

npm install react-helmet-async

エントリポイントのファイル

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>
);

各ページcomponent

import { HelmetProvider } from 'react-helmet-async';

function About() {
    return(
        <>
            <Helmet>
                <title>会社概要 | ooo株式会社</title>
            </Helmet>
            <div>
                <h2>会社概要</h2>
            </div>
        </>
    );
}
export default About;
BACK