サイトマップ

React で構築した SPA のSEO対策一覧

今回WordPress Rest API とReactを用いてサイトを構築しました。
その際に行ったSEO対策についてメモしておきます。

URLに直接アクセスした時の対応

React は基本的にSPAなので、サーバーが全てのリクエストをReact アプリのエントリーポイントにリダイレクトするように設定する必要があります。

.htaccess に以下の記述をします。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^ /index.html [L]
</IfModule>

GA4 の設定

パッケージを用いる場合は react-ga4 を使ってみましょう。

私は Analytics.ts というファイルを作り、App.tsx に読み込ませました。

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import ReactGA from 'react-ga4';

const TRACKING_ID = 'G-yourcode'; // GoogleアナリティクスのトラッキングIDを設定

ReactGA.initialize(TRACKING_ID);

function Analytics() {
  const location = useLocation();

  useEffect(() => {
    // ページが変更されるたびにトラッキング情報を送信
    ReactGA.send({ hitType: 'pageview', page: location.pathname });
  }, [location]);

  return null; // UIに表示するものはない
}

export default Analytics;
function App() {
  return (
    <RecoilRoot>
      <Router>
        <Header />
        <Analytics />
        <Routes>
          <Route path="/" element={<top />} />
        </Routes>
      </Router>
    </RecoilRoot>
  );
}

メタタグとOGタグの設定

React-helmet だと現在の環境ではエラーの原因になります。react-helmet-asyncを使いましょう。

React で動的にメタ情報を設定するには react-helmet-asyncや@tankstack/react-head を使います。

以下はReact helmet-async を使った例です。

import React from 'react';
import ReactDOM from 'react-dom/client'
import './styles/index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <HelmetProvider>
      <App />
    </HelmetProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
import { Helmet } from "react-helmet-async";

function MyPage() {
  return (
    <div>
      <Helmet>
        <title>ページタイトル</title>
        <meta name="description" content="ページの説明文" />
        <meta property="og:title" content="ページタイトル" />
        <meta property="og:description" content="ページの説明文" />
        <meta property="og:image" content="画像URL" />
        <meta name="robots" content="index, follow" />
      </Helmet>
      <h1>コンテンツ</h1>
    </div>
  );
}

https://www.npmjs.com/package/react-helmet-async ←参考ドキュメント

Sitemap, robots.txt の設定

react-router-sitemap を使用して自動生成(node.js を使っている場合)
または手動で追加します。

手順を別記事にしました。

構造化データのマークアップ

JSON-LDを使う。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "ページタイトル",
  "description": "ページの説明文",
  "url": "https://example.com"
}
</script>

SSR サーバーサイドレンダリングの導入

Next.js などのフレームワークを使用して、SSRを実装する。

動的レンダリング

Rendertron, Prerender.io を使う。

↓ Google 検索セントラル公式のRedertron についての解説https://developers.google.com/search/blog/2019/01/dynamic-rendering-with-rendertron?hl=ja

Rendertron の軽い理解

Rendertron は、検索エンジンが JavaScript アプリケーションを正しくインデックスできるよう、静的 HTML を生成して提供するツールです。

1. ユーザーリクエスト

通常のユーザーリクエストは JavaScript アプリ(React アプリ)をそのまま提供します。

2. クローラーリクエスト

Googlebot や他のクローラーからのリクエストを検知し、Rendertron を使用して静的 HTML を生成して提供します。

SSG 静的サイト生成

コンテンツが更新されない場合は各ページのHTMLを事前に生成することができる。

Gatsby などの生成ツールを使うのが一つの手です。

もしくはreact 単体で動作させる場合は react-snap を使うという手があります。

coiai.netでは案件受付中です。
Vtuber、建築モデリング、EC構築、ネイティブアプリ制作、制服の制作(実は縫製業もメイン)、Vision Pro向けアプリ etc…
様々な制作開発を行っています。

ご気軽にご相談ください!

コイアイちゃんのアバター

この記事を書いたのは


Comments

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


Home
About
Blog
Works
Contact