ボット/スパム対策用 reCAPTCHAの導入方法と、ワードプレス(WordPress)のコンタクトフォームプラグイン Contact Form 7に設定する方法を解説します。
- reCAPTCHAの使い方と詳細な設定方法がわかる
- Contact Form 7にreCAPTCHAを設定する方法がわかる
reCAPTCHAで実現できること
reCAPTCHAはGoogleが提供する、ボット(自動プログラム)と人間とを区別するキャプチャを利用した無料のサービスで、スパム攻撃からブログやWebサイトを保護します。
現在の最新バージョン v3は画像認証ではなく、バックグラウンドで動作して人間とボットの判定をしています。
reCAPTCHAの導入方法
reCAPTCHAをWordPressのコンタクトフォームプラグイン Contact Form 7に設定する手順は下記のとおりです。
- Googleアカウントを使ってreCAPTCHAのキーを取得
- ①で取得したキーをContact Form 7に実装
以上の2ステップで完了します。
Googleアカウントは必須です。
reCAPTCHAはGoogleアカウントに紐づくため、所持していない場合はGoogleアカウントを作成する必要があります。
Contact Form 7の設定はこちらの記事を参考にしてください↓
Googleアカウントを使ってreCAPTCHAのキーを取得
先ずは下記のGoogleのreCAPTCHA登録画面にアクセスします。
https://www.google.com/recaptcha/admin/create
GoogleのreCAPTCHA登録画面下記の手順で登録します。
- ラベルには任意の文字を入力します。通常はドメイン名を入力します
- ドメイン名を入力します
- 利用規約の同意に✔を入れます
- 送信ボタンを押します
Google reCAPTCHAのサイトキーとシークレットキー↑この画面に表示されているサイトキーとシークレットキーをWordPressのContact Form 7に登録・実装します。
取得したキーをContact Form 7に実装
WordPressのダッシュボード(管理画面)↑WordPressのダッシュボード(管理画面)にある、お問い合わせ→インテグレーションを選択します。
WordPressのお問い合わせのreCAPTCHAのインテグレーション↑reCAPTCHAのインテグレーションのセットアップを押します。
WordPressの外部APIとのインテグレーションのreCAPTCHA キー入力画面↑Google reCAPTCHA登録時に取得したキーをコピーして貼り付けます。
- サイトキーを貼り付けます
- シークレットキーを貼り付けます
- 変更を保存を押します
WordPressのContact Form 7でreCAPTCHAが有効化↑reCAPTCHAの実装が完了すると、「reCAPTCHA はこのサイト上で有効化されています。」と表示されます。
以上で、WordPressのContact Form 7へのreCAPTCHAの実装と有効化は完了です。
問い合わせ画面でreCAPTCHAを確認
お問い合わせ画面に表示されたreCAPTCHAの保護マーク↑お問い合わせ画面の右端にreCAPTCHAのマークが表示されており、スパム攻撃から保護されていることが確認できます。
reCAPTCHAの保護マークを非表示にする方法
スマホの小さい画面にreCAPTCHAの保護マークが表示されると操作性と視認性が低下することがあります。
そういった時はWordPressの外観のカスタマイズの追加CSSに下記のCSSコードを入れることでreCAPTCHAの保護マークを非表示にすることができます。
.grecaptcha-badge { visibility: hidden; }
WordPressのダッシュボード画面の外観→カスタマイズ→追加CSS 画面WordPressのダッシュボード→外観→カスタマイズ→追加CSSの空欄にコードを入力し、公開します。
- ダッシュボード画面の外観→カスタマイズ→追加CSSの欄に前述のコードを入力
- 公開を押す
以上でreCAPTCHAの保護マークを非表示にすることができます。
reCAPTCHAの保護マークを非表示にした場合はGoogleの利用規約を表示する必要がある
reCAPTCHAの保護マークを非表示にした場合は、reCAPTCHAを利用していることとGoogleの利用規約を利用者に提示する必要があります。
WordPressのダッシュボード画面の”お問い合わせ”の”コンタクトフォーム”を編集して下記の文言を追加し、保存します。
このサイトはreCAPTCHAによって保護されており、Googleの<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と<a href="https://policies.google.com/terms">利用規約</a>が適用されます。
WordPressのダッシュボード画面の”お問い合わせ”の”コンタクトフォーム”を編集して文言を追加実際にreCAPTCHAを使った感想とメリットデメリット
実際にreCAPTCHAを使ってみた感じたメリットとデメリットです。
reCAPTCHAのメリット
お問い合わせフォームを利用したスパムメッセージを高い精度で防ぐことができ、ページスピードなどにも悪影響を及ぼさいことが大きなメリットです。
GoogleのreCAPTCHAの管理画面から不審なリクエストの総数などを確認できるので、効果を実感しやすいです。
reCAPTCHAのデメリット
デメリットはありません。reCAPTCHAの導入はメリットしかありません。
まとめ
reCAPTCHAはGoogleが提供している無料のスパム防止用のサービスなので、安心して利用できます。
最新バージョンのv3はバックグラウンドで動作しており、利用者の負担にならないので、reCAPTCHAを導入しないのはデメリットしかありません。
唯一の懸念点である、ページスピードの影響ですが、お問い合わせ画面にだけ、reCAPTCHAを有効にしているので、ページスピード低下の範囲を限定することができているので、SEOへの影響を必要最低限にすることが可能です。
reCAPTCHA導入後は、スパムをゴミ箱に入れる作業から完全に解放されるほど、非常に効果的です。
設定に掛かる時間は5分程と、費用対効果は抜群なので、おすすめです。
お問い合わせページ(フォーム)作成プラグイン「Contact Form 7」の設定方法はこちらの記事です↓
Contact Form 7の設定方法と使い方
