React SPA SEO 改善方法 - Cloudflare WorkersでメタタグからSSRまで

Fri, 11 Sep 2026 13:01:00 +0000

概要

この記事は Cloudflare Workers 静的サイトガイド - デプロイからSEOまでシリーズの一部です。

Reactで作ったSPAを静的ホスティングに載せて使うケースが多いです。デプロイが単純で、サーバーがないので運用するものもありません。コストもほとんどかかりません。

ところが検索を気にし始めると、すぐに壁にぶつかります。サーバーが返す生のHTMLに、検索エンジンが読むものが一つもないからです。

この記事は、その問題をバックエンドサーバーを新しく立てずにCloudflare Workersだけで解いていった記録です。3つの段階に分けて扱います。後ろに行くほど得られるものが大きく、手間もかかります。

0段階 — 何もしない。 生のHTMLが空の殻です。ほとんどのSPAがここにいます。

1段階 — Workersでメタを埋める。 タイトル・説明・OG・構造化データがレスポンスのHTMLに入ります。作業量が少なく効果が明確です。

2段階 — Workersで本文まで描く。 実際の画面をサーバーでレンダリングして入れます。最も手間がかかりますが、クローラーが読む内容ができます。

この記事で扱うこと

GoogleがJSをレンダリングするのに、なぜ自分で入れる方がよいのか
Workersで <head> を埋める方法と、そのときの罠
entry-client / entry-server の分離と vite build --ssr
サーバーが受け取ったデータをブラウザに渡し、APIの往復を増やさない方法
実際に変わった数値と、踏んだ罠

扱わないこと

各メタ項目を何で埋めるか — SEO側のテーマです。SEO最適化の記事を参照
wranglerの使い方・リクエストの流れ・デプロイ — Cloudflare Workers 静的サイトホスティング - リクエストの流れと課金基準 · wrangler 使い方 - Cloudflare Workers のローカル開発とデプロイ
エッジキャッシュ・Tiered Cache — Cloudflare Workers キャッシュ設定方法 - エッジキャッシュとTiered Cache

前提

Cloudflareに静的サイトを載せたことがあり、wrangler でローカルにWorkerを立ち上げたことがあると仮定します。初めてなら、上のデプロイの記事を先に読む方がよいです。

問題 — 生のHTMLに検索エンジンが読む内容がない

ビルドされたSPAのHTMLをそのまま受け取ってみましょう。

1curl -s https://example.com/products/1234

 1<!doctype html>
 2<html lang="ko">
 3 <head>
 4 <title>My Service</title>
 5 <meta name="description" content="A generic site description" />
 6 </head>
 7 <body>
 8 <div id="root"></div>
 9 <script type="module" src="/assets/index-a1b2c3.js"></script>
10 </body>
11</html>

1.6KBほどの殻です。商品名も価格も説明もありません。すべてJSが実行され、APIのレスポンスが届いた後にはじめて作られます。

Ssr on plzhans blog

React SPA SEO 改善方法 - Cloudflare WorkersでメタタグからSSRまで

概要

この記事で扱うこと

扱わないこと

前提

問題 — 生のHTMLに検索エンジンが読む内容がない