reCAPTCHA v3のバッジを問い合わせページ以外で消す(CF7・Google公認の方法)

Contact Form 7でreCAPTCHA v3を有効にすると、問い合わせページだけでなく全ページの右下に「reCAPTCHA」バッジが表示されます。これはCSSで隠すだけだと規約違反になりますが、「フォームの無いページでは読み込まない+フォームのあるページでは規定の文言を表示してバッジを非表示」というGoogle公認の組み合わせで、サイト全体からバッジを消せます。この記事では、私が自分のサイトで実際に行った実装をそのまま紹介します。

背景: reCAPTCHA v3は「全ページ常駐」が仕様

reCAPTCHA v3はユーザーの操作を妨げない代わりに、行動をスコアリングするためスクリプトを広く読み込む設計になっています。WordPressのContact Form 7(以下CF7)でreCAPTCHAを連携すると、フォームが無いページも含めた全ページでスクリプトが読み込まれ、右下にバッジが常駐します。

ただ、トップページやブログ記事の右下にまでバッジが浮いているのは、デザイン上のノイズですし、読み込むスクリプトのぶんだけ表示もわずかに重くなります。

実装1: フォームの無いページではスクリプトごと読み込まない

CF7のreCAPTCHAスクリプトはwp_enqueue_scriptsで登録されるので、問い合わせページ以外ではdequeue(読み込み解除)します。テーマのfunctions.phpに次を追記しました。

/**
 * reCAPTCHA(v3)はお問い合わせページ以外では読み込まない(右下バッジを他ページに出さない)
 */
add_action( 'wp_enqueue_scripts', function () {
	if ( ! is_page( 'contact' ) ) {
		wp_dequeue_script( 'google-recaptcha' );
		wp_dequeue_script( 'wpcf7-recaptcha' );
	}
}, 100 );

ポイントは2つあります。

ハンドル名は2つ: Google本体のスクリプト(google-recaptcha)と、CF7側の連携スクリプト(wpcf7-recaptcha)の両方を止めます。片方だけだとバッジが残ります。
優先度100: CF7がスクリプトを登録した「後」に実行されないと解除できないため、優先度を遅らせています。

スコアリングの観点では全ページ読み込みのほうがリッチですが、フォームページ単体でもトークンは正常に発行され、スパム判定は機能します(後述の検証どおり)。

実装2: フォームのあるページはバッジ非表示+規定の文言

問い合わせページ自体にはスクリプトが必要なので、こちらはGoogleが公式に認めている代替表示を使います。バッジを隠す場合は、reCAPTCHAを利用している旨の文言をフォームに表示すること、というのが公式FAQに明記されている条件です。

まずCSSでバッジを非表示にします(display:noneではなくvisibility:hiddenにしています)。

/* reCAPTCHAバッジは非表示(規定の文言を送信ボタン下に表示することでGoogle公認の運用) */
.grecaptcha-badge { visibility: hidden; }

そして送信ボタンの下に、プライバシーポリシーと利用規約へのリンクを含む規定の文言を置きます。

<p class="recaptcha-note">このサイトはreCAPTCHAによって保護されており、Googleの<a href="https://policies.google.com/privacy" target="_blank" rel="noopener">プライバシーポリシー</a>と<a href="https://policies.google.com/terms" target="_blank" rel="noopener">利用規約</a>が適用されます。</p>

検証: 消えたことと、効いていることの両方を見る

この手の変更は「バッジが消えた」だけで安心せず、スパム対策が生きていることまで確認します。私は次の3点を確認しました。

トップページ・ブログ・プライバシーポリシーの各ページで、reCAPTCHA関連スクリプトの読み込みが0件になっていること
問い合わせページではgrecaptchaが読み込まれ、送信時にトークン(2,000文字超の文字列)が生成されていること
フォームが正常に送信できること

ハマりポイント: 「CSSで隠すだけ」は規約違反

検索するとまず出てくる「.grecaptcha-badge { display:none }を全ページに書く」だけの方法は、規定の文言表示とセットでない限り利用規約に反します。逆に言えば、文言さえ表示すれば非表示は公認です。「読み込み自体を絞る」「隠すなら文言を出す」の2段構えにすることで、規約・UX・パフォーマンスの三方を立てられます。

なお、誤判定(正当なユーザーがスパム扱いされる)が目立つ場合は、Cloudflare Turnstileなど別のCAPTCHAへの乗り換えも選択肢です。私のサイトでは今のところreCAPTCHA v3のままで問題は出ていません。

まとめ

CF7のreCAPTCHAバッジ対策は、①フォームの無いページではwp_dequeue_scriptで読み込みごと止める、②フォームのあるページではvisibility:hidden+規定文言のGoogle公認セットで消す、の2つで完了です。functions.phpとCSSの数行で、サイトの見た目とスパム対策を両立できます。同じCF7まわりでは、問い合わせフォームの種類を遷移元に合わせて自動選択する実装も紹介しています。

Webサイトの構築や、こうした設計のご相談は、SERVICESからお気軽にどうぞ。

← TECH-BLOG一覧へ