スパム対策に効果的！WordPressにGoogle reCAPTCHA v3を導入する方法

サイトに設置しているお問い合わせフォームから、スパムメールが大量に届くようになってしまい困っている方も多いのではないでしょうか。

そんなスパム対策に効果的なのが、Googleが提供しているreCAPTCHAになります。本記事では、現在の最新版となる「reCAPTCHA v3」をWordPressに導入する方法について、APIキーの取得の部分から詳しくご紹介します。

また、reCAPTCHAを導入するにあたって、把握しておきたいデメリットも併せて解説しますので、スパム対策にreCAPTCHAを検討している方は、参考にしてみてください。

reCAPTCHAとは

reCAPTCHAはGoogleが無料で提供しているサービスで、サイトにアクセスしているのが人間かbotかを判別し、自動でbotをブロックしてくれるものです。

導入することでフォームから送信されるスパムメールやスパムコメントを軽減することが可能になります。現在はreCAPTCHA v3が最新のバージョンです。

reCAPTCHAのv1～v3の違い

reCAPTCHAがリリースされてから現在まで4つのバージョンがあり、現在はv2、v2 invisible、v3の3つから選べます。
（画像出典元：reCAPTCHAヘルプ）

reCAPTCHA v1

2018年3月に提供終了しています。歪んだ英数字を入力することで、botを弾くというものでしたが、画像認識制度が向上したことで、reCAPTCHA v1が突破されるようになりました。

reCAPTCHA v2

「私はロボットではありません」と書かれたチェックボックスを表示するのがreCAPTCHA v2です。2021年5月の段階で、まだ広く使用されているので、見る機会の多いreCAPTCHAだと思います。
チェックボックスにチェックを入れた際に挙動パターンが分かれ、botかどうか疑わしいと判断された場合は、指定された画像を選択するアクションが必要です。この画像のチェックが煩わしく、ユーザビリティを損なうのがデメリットになります。

reCAPTCHA v2 invisible

reCAPTCHA v2の「私はロボットではありません」というチェックボックスを表示しないバージョンです。チェックボックスがない代わりに、送信ボタン等を押した際にbotかどうかの判断が行われます。

reCAPTCHAに人間だと判断されれば、ユーザーはreCAPTCHAの存在を意識することなく利用できます。botの疑いがあると判断された場合は、reCAPTCHA v2と同様に、指定された画像をチェックするというテストを行う必要があります。

reCAPTCHA v3

2021年5月時点で最新のバージョンがreCAPTCHA v3になります。こちらは、文字の入力やチェックボックスのチェック等のアクションが一切必要がないため、ユーザーに負担をかけないものとなっています。

設置したページでの人間の動作を機械学習して、人間かbotかを自動で判断してくれます。特別な理由がない限り、reCAPTCHA v3の導入がおすすめです。

無料で利用できる範囲

reCAPTCHAを無料で利用できる範囲は、1秒間に1000回。月間100万回のリクエスト量までとなります。それを超えるキーリクエストが発生するサイトの場合は、有料で高機能のreCAPTCHA Enterprise（エンタープライズ）に移行する必要があります。

詳しくは、下記reCAPTCHAのFAQに掲載があります。
https://developers.google.com/recaptcha/docs/faq

reCAPTCHAを利用するメリット・デメリット

最新バージョンのreCAPTCHA v3であれば、ユーザーにアクションが求められないため、ユーザービリティ等を損なわず、メリットの大きいものになります。

しかし、デメリットがないわけではありません。reCAPTCHAを導入するメリット・デメリットを見ていきましょう。

メリット

・スパムメール（迷惑メール）の避けられる
・コメント機能に対してのスパムを減らせる
・簡単に導入することができる

デメリット

・サイト（ページ）の表示速度が遅くなる
・ユーザビリティを損なう（v2）

v3を導入する場合の、唯一のデメリットは、サイトの表示速度が遅くなることです。「PageSpeed Insights」でreCAPTCHA v3の設置前後を比較すると、設置後の方が評価が悪くなります。

（参考）reCAPTCHA v3導入前後のページ表示速度の違い

実際にどのぐらいページの表示速度が遅くなるのか、「PageSpeed Insights」でreCAPTCHA v3の導入前後のスコアの違いを計測してみました。

導入前

導入後

全ページにreCAPTCHAのロゴを表示している状態でのテストになります。サイトの状況によって結果は異なりますので、導入前後の表示速度の違いは参考程度にしてください。

reCAPTCHAのAPIキーを取得する手順

reCAPTCHAを利用するには、Googleアカウントにログインした状態で、Google reCAPTCHAのサイトにアクセスし、APIキーを取得する必要があります。

1、Googleアカウントへログインする（アカウントが無い場合は取得する）

2、Google reCAPTCHAのサイトにアクセスする
https://www.google.com/recaptcha/admin/create

3、各項目を入力する

4、reCAPTCHA の種類を選ぶ

5、送信をクリック

6、サイトキーとシークレットキーの2つのキーを保存する

上記1～6を行い、reCAPTCHAを使用する準備を済ませておきましょう。

reCAPTCHA v3をWordPressのContact Form7に導入する方法

WordPressに設置しているContact Form7に、reCAPTCHAを実装します。Contact Form7のプラグインがインストールされていることが前提になります。

1、WordPressサイドバーのお問い合わせから「インテグレーション」をクリック

2、reCAPTCHAの「インテグレーションのセットアップ」をクリック

3、先ほど取得したサイトキーとシークレットキーを入力して、「変更を保存」をクリック

4、サイトを表示した際に、reCAPTCHAの保護マーク（バッジ）が表示されているのが確認できれば設定完了

【Google公認】reCAPTCHAのロゴを非表示にする方法

reCAPTCHAを実装すると、保護マーク（バッジ）が常にサイトの右下に表示されるようになります。

デザイン的に気になる場合や、メニュー等へ干渉してしまうこともあると思うので、ここではGoogleが公式に許可をしている、reCAPTCHAのロゴを非表示にする方法を見ていきましょう。

非表示にするために必要な記載項目

reCAPUTCHAを使っていることを、サイトユーザーに通知する必要があるため、勝手に削除や隠したりするのは規約違反になります。

しかし、下記のGoogle公式のページでは、次のテキストを掲載すれば非表示にすることができると記載されています。

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Google公式のFAQのページ（英語）
https://developers.google.com/recaptcha/docs/faq

日本語なら、フォーム入力のあるページに下記のような一文を記載することで、ロゴを非表示にすることができます。

「本サイトはreCAPTCHAによって保護されています。Googleのプライバシーポリシーと利用規約が適用されます。」

非表示にするためのCSS設定

ロゴを非表示にする際は、下記のCSSを使用するようにと、こちらもGoogle公式のFAQページに記載があります。

.grecaptcha-badge { visibility: hidden; }
reCAPTCHAで保護されている旨を、Googleのプライバシーポリシーと利用規約へのリンクを張ったうえで掲載し、上記CSSでロゴを非表示にしましょう。

reCAPTCHAのロゴの位置を変える方法

reCAPTCHAのロゴが、スマホのフローティングメニューに被ったり、「上に戻る」ボタンと干渉してしまうことがあります。

そういった際に、reCAPTCHAのロゴを非表示にするのではなく、位置を調整する方法をご紹介します。

cssでロゴの位置を調整する

cssファイルに下記を記載します。

.grecaptcha-badge { bottom: 90px!important; }
数字を増やすとロゴを上へと動かせるので、よい位置になるように調整しましょう。

reCAPTCHAの管理画面

reCAPTCHAを設置後は、管理画面から不審なリクエスト数や割合、リスクの高いアクションがどのぐらいあるのかなどを確認することができます。

また、新しくreCAPTCHAを設置したいサイトを登録する際も、この管理画面から登録・作成が可能です。

Google reCAPTCHAの管理画面
https://www.google.com/recaptcha/admin?hl=ja

お問い合わせフォームからのスパム対策にreCAPTCHAを導入しよう

サイト内のお問い合わせフォームは、ユーザーと接点を持つうえでとても重要になるものですが、フォームから届くスパムメールに悩まされているサイト運営者も多いのではないでしょうか。

放置しておくと、重要なメールを見逃してしまうばかりか、ウイルス感染のリスクも増します。また、フォームを不正に利用されることで、スパムの踏み台とされてしまい、結果的に不正に加担してしまうことにもなりかねません。

特に利用者の多いContact Form7は、狙われやすい傾向にあるため、reCAPTCHAを導入することで、セキュリティーを強化するようにしましょう。