Cloudflare Workers + Prerender.io で CSRサイトを SEO 対応する方法

Sat, 19 Apr 2025 00:09:27 +0900

このページの概要

Javascriptを多用したサイトや、ノーコードツールで制作したサイトがGoogle Search ConsoleではGoogleにインデックスされましたが、Bing Webmaster Toolsに登録してもBingにインデックスできないことが多々あります。Bingでは最初は空ページで、Javascriptが後からコンテンツを読み込んでくるページは認識しないみたいです。そこで、事前にレンダリングされた静的ページのキャッシュを用意し、検索エンジンのクローラーからのアクセスはそのキャッシュに誘導してページコンテンツを認識させるといった方法があったのでメモ。

目的

- クライアントサイドレンダリング（CSR）で動作するJavaScriptサイトを Google や Bing にインデックスさせる
- クローラー（bot）にだけ静的HTMLを返す仕組みを構築する

必要なもの（すべて無料で始められます）

- [Cloudflare](https://www.cloudflare.com/) アカウント
- [GitHub](https://github.com/) アカウント
- [Prerender.io](https://prerender.io/) アカウント
- 対象ドメインのDNSを Cloudflare DNS に変更すること
- コマンド実行環境（Windows: PowerShell / macOS/Linux: ターミナル）

ざっくりとした仕組みの流れ

Prerender.ioで静的ページのキャッシュを作成し、CloudFlareのWorkersを使って検索ボットのアクセスはPrerender.ioのキャッシュに誘導し、それ以外のアクセスは通常サイトが配信されるようにします。これを行うためにはCloudFlare Workersに登録するスクリプトをGitHubまたはGitLabに置き、それを読み込ませます。

手順

- Prerender.io に登録し、APIトークンを取得
- Cloudflare にドメインを追加（ネームサーバー変更）
- GitHub に新しいリポジトリを作成（例: `cf-prerender-multisite`）
- 以下の 2 ファイルを作成して GitHub に push

src/index.js

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url)
    const pathname = url.pathname
    const userAgent = request.headers.get("user-agent") || ""
    const isBot = /bot|crawl|spider|slurp|bing/i.test(userAgent)

    // .xml や .txt で終わるパスは除外（Prerender.ioを経由させない）
    const isStaticFile = pathname.endsWith(".xml") || pathname.endsWith(".txt")
    if (isStaticFile) {
      return fetch(request)
    }

    const token = "YOUR_API_TOKEN"

    if (isBot) {
      const prerenderUrl = `https://service.prerender.io/https://${url.hostname}${url.pathname}${url.search}`
      return fetch(prerenderUrl, {
        headers: {
          'X-Prerender-Token': token
        }
      })
    }

    return fetch(request)
  }
}

wrangler.toml

name = "prerender-multisite"
main = "src/index.js"
compatibility_date = "2024-04-15"

[[routes]]
pattern = "example.com/*"
zone_name = "example.com"

- Cloudflare Pages に GitHub を接続して「空のWorker」としてデプロイ
- Cloudflare DNS の A レコードで ☁️（プロキシ）を ON にする
- Cloudflare の「SSL/TLS」を フル（Strict） に変更（リダイレクトループ回避）
- Cloudflare の対象ドメイン選択した中の Wokers＆Pages の編集で「リクエスト制限失敗モード」と「失敗オープン (続行)」に変更（504エラー対応）
- Cloudflare Caching 構成 で Crawler Hints を ON にする（Index Now 対応）

デバッグ方法（PowerShell / ターミナルで実行）

- Googlebot になりすましてHTMLを取得

curl -A "Googlebot" https://example.com/

- ヘッダーのみを取得してステータス確認

curl -A "Googlebot" -I https://example.com/

- Prerender.io に直接アクセスしてHTMLを確認

curl -H "X-Prerender-Token: YOUR_API_TOKEN" "https://service.prerender.io/https://example.com/"

- Cloudflare ダッシュボードの「Workerログ」でリクエスト確認
- Chromeのデベロッパーツールで User-Agent を Googlebot に変更して動作確認
- [Prerender.io Dashboard](https://prerender.io/dashboard) の「Recently Cached Pages」を確認

成功時のレスポンス例

HTTP/1.1 200 OK
Server: cloudflare
X-Prerender-Requestid: xxxxxxxx
X-Prerender-External-Lb: haproxy-private-cache

まとめ

- Cloudflare Worker + Prerender.io の組み合わせで SEO に強い構成が実現
- 通常ユーザーには動的なSTUDIOサイト、Botには高速なHTMLを返す
- すべて無料で始められ、Cloudflare上で完結するため保守も簡単

結果

Bing検索のインデックスに成功しました。トータルで約1週間ほどかかりました。経過として、この方法でBing Webmaster Toolsで改めて「URL検査」メニューから「インデックス作成を要求」を実行して、4～5日後にステータスが「正常にインデックスが付きました」に変わりました。しかし、すぐにはBing検索の結果に表示されず、それから約3日後に検索結果として表示されるようになりました。

その他の選択肢

- 
  [Cloudflare Browser Rendering](https://developers.cloudflare.com/browser-rendering/)  
  公式のヘッドレスブラウザ機能。Cloudflare Workersと統合可能ですが、Prerender.ioよりやや設定が複雑です。

- 
  [Rendertron](https://github.com/GoogleChrome/rendertron)  
  Google製のオープンソースレンダラー。自前でデプロイが必要（[Google Cloud Run](https://cloud.google.com/run) などを使用）。

- 
  Firebase Hosting + SSR や Next.js の Incremental Static Regeneration（ISR）など、フレームワーク側でのSEO対策も手段の一つです。

その後の実験

無事にBingに登録されましたが、登録後にDNSサーバーを元に戻し、Cloudflare WorkersとPrerender.ioの仕組みを外した場合、Bingボットが改めてページをクロールしたらどうなるか実験したいと思います。数ヶ月かかるかもしれないので、履歴を書いておきます。

2025-04-25　Bing Webmaster ToolsのURL検索で表示が「正常にインデックスが付きました　URL は Bing に表示できます」となった
2025-04-26　Bing検索で検索結果に表示されたのを確認
2025-04-28　DNSサーバーをお名前ドットコムに戻した

Prerender.io on qwerty.work