



WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc




WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp









生徒博士、SEO施策の効果を検証したいんですけど、サーバーのコードを変更せずにテストできる方法はありませんか?



よーく聞くんだぞ。今日はEdge SEOを使ったA/Bテストについて詳しく解説するぞい!CDNレベルでSEO最適化をテストできるんじゃ!



そうなんですね!ぜひ教えてください!
SEO施策を実施する際、どの施策が実際に効果があるのかを検証することは非常に重要です。しかし、従来の方法ではサーバーサイドのコードを変更する必要があり、開発リソースや時間がかかります。
そこで注目されているのが、Edge SEO(エッジSEO)です。Edge SEOを活用すれば、CDNやエッジサーバーレベルでSEO最適化を実装でき、サーバーコードの変更なしにA/Bテストが可能になります。
本記事では、Edge SEOを使ったA/Bテストの実装方法を、Cloudflare Workers、Fastlyなどのプラットフォームを使った実装例とともに詳しく解説します。
「学習→就職」につなげた受講生のリアルな体験談も公開中!
働き方を変えたい方にも響くストーリーです。
吉池さん
Web制作を体系的に学びたいと考え、WithCodeに入会されました。卒業後は、WithCode経由で実案件を経験したほか、ご自身でも案件を獲得。今後はWeb系の業務に携わりたいという思いから転職活動を行い、受託開発の会社への転職を成功させました。
詳しくはこちらの記事をご覧ください。


吉池さんの主な制作実績はこちら


Edge SEO(エッジSEO)は、CDN(Content Delivery Network)やエッジサーバー上でSEO最適化を実行する技術です。従来のサーバーサイドSEOと異なり、コンテンツ配信の最前線(エッジ)で処理を行います。
Edge SEOでは、以下のような流れで処理が行われます。
| プラットフォーム | サービス名 | 特徴 | 料金 |
|---|---|---|---|
| Cloudflare | Cloudflare Workers | JavaScriptで実装、豊富なAPI | 無料枠あり |
| Fastly | Fastly VCL / Compute@Edge | VCL言語、高速処理 | 従量課金 |
| Akamai | EdgeWorkers | エンタープライズ向け、高機能 | 要問い合わせ |
| AWS | CloudFront Functions / Lambda@Edge | AWSエコシステムと統合 | 従量課金 |





SEO A/Bテストって、通常のA/Bテストと何が違うんですか?



SEO A/Bテストは、検索エンジンの評価を測定するから、期間が長く、統計的な分析が重要なんじゃ!
SEO A/Bテストは、検索エンジンでのパフォーマンス向上を目的としたA/Bテストです。タイトルタグ、メタディスクリプション、見出し構造、内部リンクなど、SEO施策の効果を定量的に測定します。
| 項目 | 通常のA/Bテスト | SEO A/Bテスト |
|---|---|---|
| 目的 | コンバージョン率の向上 | 検索順位・CTRの向上 |
| 測定対象 | ユーザーの行動 | 検索エンジンの評価 |
| テスト期間 | 数日〜2週間 | 2週間〜数ヶ月 |
| 分割方法 | ユーザー単位 | URL群単位または時間単位 |
| 評価指標 | CVR、直帰率など | 検索順位、CTR、オーガニックトラフィック |


通常のA/Bテストでは、
など、エンジニアの手が必ず入ります。
しかしEdge SEOでは、これらの作業をすべてバイパスできます。
エッジレイヤーでHTMLを書き換えるため、
といったSEO施策を、マーケターやSEO担当だけで完結させることが可能です。
これにより、
といったボトルネックが消え、
「思いついたら即検証」できる組織体制を作れます。
Edge SEOの最大の強みはスピードです。通常の実装フローでは、
企画 → 開発 → ステージング → 本番反映
という工程を踏むため、早くても数日〜数週間かかります。
一方Edge SEOでは、
というレベル感。
さらにテスト結果が悪ければ、
「ワンクリックで無効化」
これだけで即ロールバックできます。
つまり、
このPDCAがほぼリアルタイムで回るため、
SEO施策の試行回数を圧倒的に増やせます。
Edge SEOでは単純な50:50分割だけでなく、
といった条件付きA/Bテストが可能です。
これにより、
など、従来では実装が面倒すぎて諦めていた検証も現実的になります。
つまり
「全体最適」ではなく「セグメント最適」ができるようになるわけです。
Edge SEOはCDN(エッジサーバー)上でHTMLを書き換えます。
そのため、
という構造になります。
結果として、
につながりやすく、
「A/Bテストしてるのにサイトが遅くなる」問題を回避できます。
これはクライアントサイドA/Bツールではほぼ不可能なメリットです。
Edge SEOは「本体コードを一切触らない」ため、
といった事故が起きません。
仮に問題が出ても、
Edge側のルールをオフにするだけで
即・完全に元の状態へ復帰します。
つまり、
といった「リスクの高いテスト」を、
ほぼノーリスクで回せる環境が作れるわけです。


Cloudflare Workersは、JavaScriptでエッジ処理を実装できるプラットフォームです。無料枠もあり、初心者にも扱いやすいのが特徴です。
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
// オリジンサーバーからレスポンスを取得
const response = await fetch(request)
// HTMLのみ処理(画像やCSSは素通し)
const contentType = response.headers.get('content-type')
if (!contentType || !contentType.includes('text/html')) {
return response
}
// URLパスを取得
const url = new URL(request.url)
const path = url.pathname
// /articles/ 配下のみテスト対象
if (!path.startsWith('/articles/')) {
return response
}
// URL末尾の数字が偶数ならパターンA、奇数ならパターンB
const pathMatch = path.match(/\/articles\/(\d+)/)
if (!pathMatch) {
return response
}
const articleId = parseInt(pathMatch[1])
const isPatternA = articleId % 2 === 0
// HTMLを取得
let html = await response.text()
// タイトルタグを変更
if (isPatternA) {
// パターンA:キーワードを前方に配置
html = html.replace(
/([^<]+)<\/title>/i,
(match, title) => {
const newTitle = `【完全ガイド】${title}`
return `<title>${newTitle}`
}
)
} else {
// パターンB:数字を含める
html = html.replace(
/([^<]+)<\/title>/i,
(match, title) => {
const newTitle = `${title}|5つのポイント解説`
return `<title>${newTitle}`
}
)
}
// 変更したHTMLを返す
return new Response(html, {
headers: response.headers
})
}async function modifyMetaDescription(html, isPatternA) {
const metaRegex = //i
if (isPatternA) {
// パターンA:具体的な数字を含める
html = html.replace(metaRegex, (match, content) => {
const newContent = `【2026年最新】${content}|初心者でも5分で理解`
return ``
})
} else {
// パターンB:質問形式で興味を引く
html = html.replace(metaRegex, (match, content) => {
const newContent = `${content}を知っていますか?実践的な方法を徹底解説します。`
return ``
})
}
return html
}async function addStructuredData(html, articleData) {
const structuredData = {
"@context": "https://schema.org",
"@type": "Article",
"headline": articleData.title,
"author": {
"@type": "Person",
"name": articleData.author
},
"datePublished": articleData.publishedAt,
"image": articleData.coverImage,
"publisher": {
"@type": "Organization",
"name": "WithCode",
"logo": {
"@type": "ImageObject",
"url": "https://withcode.tech/logo.png"
}
}
}
const script = ``
// の直前に挿入
html = html.replace('', `${script}\n`)
return html
}

検索結果でのクリック率(CTR)向上を目的としたテストです。
サイト内の回遊性とクロール効率を改善するテストです。
コンテンツ構造の最適化を目的としたテストです。
ページ速度とユーザー体験の向上を目的としたテストです。
画像・動画の最適化によるSEO向上を目的としたテストです。
モバイルフレンドリーの向上を目的としたテストです。





SEO A/Bテストは、どのくらいの期間実施すればいいですか?



最低でも2〜4週間は必要じゃ!季節性や祝日の影響を排除するために、長めに設定するんじゃぞ!
テスト結果が統計的に有意かどうかを判定するには、サンプルサイズと信頼水準を考慮します。
必要サンプル数 = (Z^2 × p × (1-p)) / E^2
Z = 信頼水準に対応する値(95%信頼水準なら1.96)
p = 予想される割合(不明な場合は0.5)
E = 許容誤差(通常は0.05)
テストで検知できる最小の改善率を事前に設定します。





SEO A/Bテストで気をつけなきゃいけないことは何ですか?



SEO A/Bテストで最も重要な注意点は、クローキング(Cloaking)を避けることじゃ!
クローキングは、検索エンジンのクローラーとユーザーで異なるコンテンツを表示することです。Googleのウェブマスターガイドラインで明確に禁止されており、ペナルティの対象となります。
URLを2つのグループに分け、それぞれ異なるパターンを適用します。
// 良い例:URL末尾の数字で分割
if (articleId % 2 === 0) {
// パターンA
} else {
// パターンB
}
期間を区切って、異なるパターンを適用します。
// 良い例:2週間ごとに切り替え
const today = new Date()
const week = Math.floor(today.getTime() / (7 * 24 * 60 * 60 * 1000))
const isPatternA = week % 2 === 0
// ❌ 悪い例:Googlebotだけ異なるコンテンツ
if (userAgent.includes('Googlebot')) {
// 特別な処理(クローキング!)
}
// ✅ 良い例:すべてのユーザーに同じロジック
if (articleId % 2 === 0) {
// パターンA(Googlebotもユーザーも同じ)
}





A/Bテストの結果は、どうやって判断されるのですか?



A/Bテストの成否は、感覚ではなくデータで判断する。
どんなに良さそうに見える変更でも、数値として改善が確認できなければ「成功」とは言えぬ。ここでは、どこを見て、何を比較すればいいのかを順番に解説するぞ!





もし、トラブルが発生した時はどうすればよろしいでしょうか?



実装するにあたり、トラブルが発生することも少なくない。ここでは、原因と解決法について紹介していくぞい!
原因と解決法:
原因と解決法:
原因と解決法:



Edge SEOを使えば、サーバーコードを変更せずにSEOテストができるんですね!便利です!



その通りじゃ!まずは小規模なテストから始めて、効果を確認しながら展開するのがおすすめじゃぞ!クローキングには十分注意するんじゃ!



はい!次のプロジェクトでCloudflare Workersを使ったSEO A/Bテストに挑戦してみます!ありがとうございました!
本記事では、Edge SEOを使ったA/Bテストの実装方法について、実装例とともに詳しく解説しました。
重要なポイントは以下の通りです。
・Edge SEOの特徴:CDNレベルでSEO最適化を実行、サーバーコード変更不要
・実装プラットフォーム:Cloudflare Workers、Fastly、Akamai、AWS CloudFront
・6つのテスト領域:SERPスニペット、内部リンク、テンプレート、Core Web Vitals、メディア要素、モバイル最適化
・テスト期間:最低2〜4週間、推奨4〜8週間
・クローキング回避:URL群単位または時間単位でテスト、User-Agentで分岐しない
・統計的分析:サンプルサイズ計算、MDE設定、p値判定
WithCodeで学んだJavaScript・Web開発の基礎知識に、Edge SEOの技術を組み合わせれば、どんな実案件でもデータドリブンなSEO最適化ができます。
Edge SEOを活用したA/Bテストは、リスクを最小限に抑えながらSEO施策の効果を検証できる強力な手法です。ぜひ実際のプロジェクトで活用し、検索エンジンでのパフォーマンスを向上させてください。


副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?
未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!
公式サイト より
今すぐ
無料カウンセリング
を予約!