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 アカウント
  • 対象ドメインが 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 userAgent = request.headers.get("user-agent") || ""
    const isBot = /bot|crawl|spider|slurp|bing/i.test(userAgent)

    if (isBot) {
      const prerenderUrl = `https://service.prerender.io/https://${url.hostname}${url.pathname}${url.search}`
      return fetch(prerenderUrl, {
        headers: {
          'X-Prerender-Token': 'YOUR_API_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） に変更

デバッグ方法（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上で完結するため保守も簡単

その他の選択肢

  • Cloudflare Browser Rendering 公式のヘッドレスブラウザ機能。Cloudflare Workersと統合可能ですが、Prerender.ioよりやや設定が複雑です。
  • Rendertron Google製のオープンソースレンダラー。自前でデプロイが必要（Google Cloud Run などを使用）。
  • Firebase Hosting + SSR や Next.js の Incremental Static Regeneration（ISR）など、フレームワーク側でのSEO対策も手段の一つです。

前へ

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