PostMaster

Edit

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

目次

このページの概要

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

目的

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

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

  • Cloudflare アカウント
  • GitHub アカウント
  • Prerender.io アカウント
  • 対象ドメインのDNSを Cloudflare DNS に変更すること
  • コマンド実行環境（Windows: PowerShell / macOS/Linux: ターミナル）

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

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

手順

  1. Prerender.io に登録し、APIトークンを取得
  2. Cloudflare にドメインを追加（ネームサーバー変更）
  3. GitHub に新しいリポジトリを作成（例: cf-prerender-multisite）
  4. 以下の 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"
  1. Cloudflare Pages に GitHub を接続して「空のWorker」としてデプロイ
  2. Cloudflare DNS の A レコードで ☁️（プロキシ）を ON にする
  3. Cloudflare の「SSL/TLS」を フル（Strict） に変更（リダイレクトループ回避）
  4. Cloudflare の対象ドメイン選択した中の Wokers＆Pages の編集で「リクエスト制限失敗モード」と「失敗オープン (続行)」に変更（504エラー対応）
  5. 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 の「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 公式のヘッドレスブラウザ機能。Cloudflare Workersと統合可能ですが、Prerender.ioよりやや設定が複雑です。
  • Rendertron Google製のオープンソースレンダラー。自前でデプロイが必要（Google Cloud 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サーバーをお名前ドットコムに戻した

前へ

STUDIOで制作したサイトがBingにインデックスされない問題