今回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 を使うという手があります。
