【最新版】reCAPTCHA v3の導入方法とContact Form 7に設定する方法【スパム防止｜WordPress】
※本ページにはプロモーションが含まれている場合があります。
・「reCAPTCHA v3」って何？
・WordPressをスパムから守りたい！
・WordPressやContact Form 7のお問い合わせフォームにreCAPTCHA v3を導入したい！
WordPressでブログを運営する方が是非とも行っておきたいセキュリティ対策の1つがログインフォームやお問い合わせフォームのスパムの防止。
WordPressは決してセキュリティがしっかりしているとは言えないので、自分でしっかり対策する必要があります。
今回は、無料で使えるGoogleのスパム防止システムである「reCAPTCHA v3」をWordPressに導入してスパムを防止する方法をご紹介します。
お問い合わせフォームのプラグイン「Contact Form 7」に設定する手順も合わせて解説します。
本記事の内容
- Googleのスパム防止システム「reCAPTCHA v3」について
- reCAPTCHA v3の導入手順とContact Form 7の設定
- 認証バッジの表示や位置のカスタマイズ
本記事を読むと、「Contact Form 7」のお問い合わせフォームやログインフォームなどをスパムから守る方法がわかります。
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
目次
「Google reCAPTCHA v3」とは
reCAPTCHAの機能：問い合わせやログインフォームのスパム防止
reCAPTCHA v3とは、Googleが無料で提供しているスパム防止のための認証システムです。
ログインフォームやお問い合わせフォームなどの様々なフォームで、ロボットによる不正な操作を防いでくれます。
と書かれた以下のようなマークが、reCAPTCHA v3で保護されている証です。
↑お問い合わせフォームでの例
↑ログインフォームでの例
最新版の「reCAPTCHA v3」とは
お問い合わせフォームやログインフォームをスパムから守ってくれるシステムは正確には「reCAPTCHA」という名前で、「reCAPTCHA v3」とはその中の最新のバージョンです。
後ほど具体的に紹介しますが、以前は
- 歪んだ数字や英語を読み取って入力して認証するもの
- 「私はロボットではありません」にチェックを入れて、指定された画像を選択するもの
などが主流でしたが、現在では「reCAPTCHA v3」という今回導入するバージョンが最新版になります。
reCAPTCHA v3の最大の特徴は、認証のためにユーザーが何か操作をする必要が一切なくなったことです。
チェックを入れたり画像を選択する必要が一切なく、
サイト上でのユーザーの行動を自動的にAIが分析してスコアを算出し、その行動のスコアに基づいて自動的にロボットか人間かを判断してくれる仕組みです。
reCAPTCHAの種類
reCAPTCHA v1
reCAPTCHA v1は上記のように、歪んだ数字や英語を読み取って入力するものです。
最近ではAIの画像認識能力が向上してきて、この認証ではロボットを完全に防げません。
reCAPTCHA v1の提供は2018年3月に終了しており、現在では使えません。
reCAPTCHA v2
reCAPTCHA v2は現在でもよく見かける認証方法で、
- 「私はロボットではありません」にチェックを入れる
- ロボットの可能性があるとみなされた場合は、画像から指定されたものを選択する認証が求められる
という認証方法です。
行動から完全に人間だと判断されている場合はチェックを入れただけで認証が完了します。
行動から、ロボットの可能性が多少あると判断された場合は画像の認証を求められます。
この画像認証が人間でも難しいこともあり、それが原因でユーザーが離脱することもあるのがreCAPTCHA v2のデメリットでした。
Invisible reCAPTCHA(v2)
これはreCAPTCHA v2と同じ画像認証を使いますが、
「私はロボットではありません」というチェックが不要であることがreCAPTCHA v2との違いです。
Invisible reCAPTCHA(v2)ではユーザーの行動から自動的に人間かロボットかを判断され、ロボットの可能性がある場合はreCAPTCHA v2と同様の画像による認証が求められます。
reCAPTCHA v3
今回導入する最新のバージョンであり、2018年10月29日から利用可能になったreCAPTCHA v3は、先述の通りユーザーが一切操作をしなくても勝手に人間かロボットかを判断してくれることが特徴です。
難しくて面倒な画像認証もなくなり、ユーザビリティが損なわれないのでユーザーが離脱しにくいというメリットがあります。
reCAPTCHAをWordPressに導入するメリット・デメリット
reCAPTCHA v3の導入方法を解説する前に、簡単にメリットとデメリットをまとめておきます。
| メリット | ・botによる不正を防止できる ・スパムメールを防止できる ・ユーザービリティが損なわれない(v3) ・簡単に導入できる(v3) |
|---|---|
| デメリット | ・設定が面倒(v1・v2) ・ユーザーからすると認証が面倒(v1・v2) ・よって離脱する可能性がある(v1・v2) |
reCAPTCHA v3の導入手順①Google reCAPTCHAでAPIキーを取得する
それでは、ここからはreCAPTCHA v3をWordPressに導入する方法を解説していきます。
reCAPTCHA v3を導入するには以下の2ステップで行います。
- Google reCAPTCHAにサイトを登録して、APIキーを取得する
- 取得したAPIキーをContact Form 7で設定する
まずはこの章では、手順①の
について解説します。
Google reCAPTCHAにサイトを登録してAPIキーを取得する
まずはGoogle reCAPTCHAの公式サイトにアクセスして、画面右上の「v3 Admin Console」をクリックします。
サイトの登録画面になるので、上の画像を参考に以下のように設定しましょう。
設定する項目
- ラベル：ドメインやサイト名などを入力。(設定のタイトルみたいなものです。誰にも見えないので自分がわかればOK。)
- reCAPTCHAタイプ：「reCAPTCHA v3」を選択
- ドメイン：reCAPTCHAを利用するサイトのドメインを入力(「https://」やドメインの後ろの「/」は不要)
- 「reCAPTCHA 利用規約に同意する」：チェックを入れる
上記を設定できたら、「送信」ボタンをクリックすればサイトの登録が完了です。
「登録されました。」というメッセージと共に、サイトキーとシークレットキーが表示されます。
自分のサイトでreCAPTCHAを使うための認証コードのようなもの。これらのコードを自分のサイトから設定することで、ここで登録した情報と認証されてreCAPTCHAを使えるようになります。
この2つのキーは次のステップで使うので、画面を開いたままにしておきましょう。
次のステップに進む前に
Google reCAPTCHAの設定と管理画面について以下の3つの補足を解説します。
補足①：後から登録情報を変更する方法(ラベル・ドメイン等)
登録したラベル名やドメインなどを後から変更したい場合は次の手順で変更することができます。
Google reCAPTCHAの公式サイトにアクセスし、画面右上の「v3 Admin Console」をクリックします。
設定を変更したいGoogleアカウントにログインしていることを確認します。
続いて変更したいドメインが選択されていることを確認します。
画面右上付近の歯車マークをクリックします。
最初にサイト登録を行った時と同じ画面が開かれるので、この画面で自由に変更しましょう。
変更が完了したら、画面下部の「保存」ボタンで変更を保存すれば登録内容の変更が完了です。
補足②：AMP対応している場合の設定
WordPressをAMP対応させている方は必須・それ以外の方は不要な設定です。
AMP対応されている方は、AMPページでもreCAPTCHAが動作するように設定する必要があります。
まずは「補足①：後から登録情報を変更する方法(ラベル・ドメイン等)」を参考に、reCAPTCHAの設定画面を開きましょう。
設定画面の下の方に「このキーがAMPページで動作するようにする」という項目があるのでチェックを入れ、
チェックを入れたら「保存」ボタンをクリックすれば完了です。
補足③：reCAPTCHAの管理画面(アナリティクス)
reCAPTCHAの管理画面には上の画像のようアナリティクスが用意されており、不審なリクエストや不審なトラフィックがどれくらいあるかを確認することができます。
自分のサイトがどれくらい不正なアクセスや操作で狙われているか確認することができるので、たまに確認してみるのもおすすめです。
アナリティクスは以下のリンクからアクセスできます。
>> Google reCAPTCHAのアナリティクスページ
reCAPTCHA v3の導入手順②Contact Form 7で設定する
次はWordPressで実際にreCAPTCHA v3を設定していきます。
お問い合わせフォームのプラグインである「Contact Form 7」を使うので、まだContact Form 7を導入していない方は導入しておきましょう。
お問い合わせフォームを設置せずに、ログインフォームやコメント欄にだけreCAPTCHA v3を設定したい場合は「Invisible reCaptcha for WordPress」を使いましょう。
>> 【最新版】Invisible reCaptcha for WordPressの導入方法｜reCAPTCHA v3でスパム対策
Contact Form 7のインテグレーションにAPIキーを設定する
「お問い合わせ」→「インテグレーション」をクリックします。
「reCAPTCHA」の欄の「インテグレーションのセットアップ」をクリックします。
上の画像を参考に、手順①でGoogle reCAPTCHAで取得した以下の2つのキーをコピペしましょう。
- サイトキー
- シークレットキー
キーを入力したら「変更を保存」をクリックすればreCAPTCHA v3の導入が完了です。
ブログでページを適当に開いてみると、画面右下にこのようなバッジが表示されています。
↑reCAPTCHA v3の表示のサンプル
これでreCAPTCHA v3の導入が完了し、ロボットによるスパムを自動的に排除してくれます。
reCAPTCHA v3の導入自体は一旦完了ですが、注意点が2つあるので次の見出しもご覧ください。
注意点①：全ページにreCAPTCHAのバッジが表示される
ここまでの手順でreCAPTCHA v3の設定を完了しただけでは、フォームがないページも含めてサイトの全ページにreCAPTCHA v3のバッジが表示されてしまいます。
reCAPTCHA v3が必要になるのはお問い合わせフォーム・コメント欄・ログインフォームなど何かしらの入力フォームがあるページです。
不要なページにreCAPTCHA v3のバッジが表示されないように、次の章「reCAPTCHA v3のバッジの非表示・位置の調整方法」で解説する方法で非表示にしたり適用するページを限定させましょう。
注意点②：reCAPTCHAのバッジが他のボタンと重なる場合がある
デフォルトの状態ではreCAPTCHA v3は画面の右下に表示されるようになっています。
・トップへ戻るボタン
など、何かしらのボタンを画面右下に設置している場合はreCAPTCHA v3のバッジと重なることがあるので、次の章「reCAPTCHA v3のバッジの非表示・位置の調整方法」で解説する方法でバッジの位置を調整しましょう。
reCAPTCHA v3のバッジの非表示・位置の調整方法
Contact Form 7でreCAPTCHA v3を設定しただけでは、全ページにreCAPTCHA v3が表示されていたりボタンと表示がかぶっていることがあります。
これらを解決するために、reCAPTCHA v3のバッジを非表示にしたり位置を調整する方法など以下の3つを解説します。
CSSでreCAPTCHAのバッジを非表示にする方法(Google公認)
CSSを使って、全ページでreCAPTCHAのバッジを非表示にする方法です。
全ページでreCAPTCHAの認証を適用したまま、見た目だけバッジを消すことができます。
reCAPTCHAのバッジをCSSで非表示にするだけだと規約違反になる
You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.
Frequently Asked Questions | reCAPTCHA | Google Developers
Google reCAPTCHAの公式サイトには上のように記載されています。
要点を解説すると、
・Googleが指定する文章を記載した場合だけ、reCAPTCHAのバッジを非表示にしても良いよ！
ということが書かれています。
CSSでreCAPTCHAのバッジを非表示にするGoogle公認の方法
CSSでreCAPTCHAのバッジを非表示にする前に、まずはGoogleが指定する文章をサイトのフッター部分に設置します。
具体的には、以下の文章を上の画像のようにフッターに設置します。
以下のHTMLタグを全てコピーして、自分のサイトのフッターに追加しましょう。
本サイトはreCAPTCHAによって保護されています。Googleの<a href="https://policies.google.com/privacy" rel="noopener nofollow " target="_blank">プライバシーポリシー</a>と<a href="https://policies.google.com/terms" rel="noopener nofollow " target="_blank">利用規約</a>が適用されます。上記のコートを追加したら、次はCSSでreCAPTCHAのバッジを非表示にします。
.grecaptcha-badge { visibility: hidden; }「外観」→「カスタマイズ」→「追加CSS」の欄に上のCSSコードをコピペすれば完了です。
上記のCSSは、HTMLコードの存在を残したまま見た目だけ削除するCSSです。
つまりreCAPTCHAのシステムは残したまま、画面上から見た目だけ削除することができます。
CSSがうまく反映されない場合は以下の記事で解説しています。
>> WordPressのCSSが反映されない4つの原因と12のチェックリスト
reCAPTCHA v3を特定のフォームだけに適用させる方法
続いては、reCAPTCHA v3の認証を全ページではなく、ログインフォームやお問い合わせフォームなど指定したフォームの場所にだけ適用・表示する方法です。
>> Invisible reCaptcha for WordPress
任意のフォームにのみreCAPTCHA v3を適用させるには、「Invisible reCaptcha for WordPress」というプラグインを使います。
このプラグインで以下のようなことができます。
- 任意のフォームのページにだけreCAPTCHA v3を適用・表示することができる
- reCAPTCHA v3のバッジの位置を画面の右下ではなく、フォームのすぐ下などに変更できる
reCAPTCHA v3を使うページを限定できるだけでなく、以下のようにフォームの下にバッジを表示できるのも便利なポイントです。
↑お問い合わせフォームの例
↑ログインフォームの例
プラグインInvisible reCaptcha for WordPressの使い方とおすすめの設定方法は以下の記事で詳しく解説しています。
>> 【最新版】Invisible reCaptcha for WordPressの導入方法｜reCAPTCHA v3でスパム対策
reCAPTCHAのバッジの位置を調整する方法
最後は、reCAPTCHAのバッジの位置をCSSで調整する方法です。
Contact Form 7でreCAPTCHA v3を設定しただけだと、上の画像のように「目次へ戻るボタン」などと重なることがあります。
こんなときは、以下のCSSを使うだけでreCAPTCHA v3のバッジを上に少しずらすことができます。
.grecaptcha-badge {
bottom: 100px!important;
}「外観」→「カスタマイズ」→「追加CSS」 に上記のCSSをコピペすればバッジを上方向に少しずらすことができます。
CSSがうまく反映されない場合はこちら。
>> WordPressのCSSが反映されない4つの原因と12のチェックリスト
バッジの位置を上に少しずらすだけではなく、フォームの下にバッジを設置したい場合は以下の記事をご覧ください。
>> 【最新版】Invisible reCaptcha for WordPressの導入方法｜reCAPTCHA v3でスパム対策
Contact Form 7にreCAPTCHA v3を設定してスパムから守ろう！
WordPressのコメントやログインフォーム・Contact Form 7のお問い合わせフォームなどにreCAPTCHA v3を適用してスパム対策する方法を解説しました。
WordPressはセキュリティがしっかりしているとは言えないので、自分でしっかり対策をしておきましょう。
reCAPTCHA v3のバッジを特定のフォームのみに表示させたり、フォームの下に位置を変えたい場合は以下の記事をご覧ください。
>> 【最新版】Invisible reCaptcha for WordPressの導入方法｜reCAPTCHA v3でスパム対策
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
