【プラグイン】Contact form 7のreCAPTCHAは表示速度を優先させる場合はV2を使うという選択肢

お問い合わせフォームをホームページに実装する場合は、reCAPTCHAというスパム防止のツールを使うのがスタンダードです。

reCAPTCHAがないと、フォームを見つけては自動でフォームからスパムメールや攻撃を受けてしまうという危険な状態になってしまいます。

そういったこともあり、WordPressのお問い合わせフォームを作るためのプラグイン、Contact form 7にはインテグレーションというオプションから、Google reCAPTCHAを簡単に設定できるようになっています。

しかしながら、このGoogle reCAPTCHAはV3（バージョン3）のみ設定が可能ですが、V3の場合はサイト全体Google reCAPTCHAの表示が必要になってしまいます。

この理由については後ほど説明しますが、このGoogle reCAPTCHAというのは、表示をするときに割と負担がかかるツールで、Google Speed Insightでも速度面で引っ掛ける原因の一つでもあります。

今回は、このContact form 7のGoogle reCAPTCHAのV3をV2にするという選択肢とやり方について書いていきたいと思います。

Contact form 7のGoogle reCAPTCHAを設定する場合の速度

Contact form 7でGoogle reCAPTCHAを設定すると、画像のようにV3のサイトキーとシークレットキーが求められます。

この設定を行うとサイト全体で右下に、Google reCAPTCHAのマークが表示されます。

このGoogle reCAPTCHAのV3の良いところは、お問い合わせフォームではV2と違い、クリックをしたりパズルをする必要がない点です。

しかしながら、Google Page speed insightsで計測してみると、私の運営しているサイトではこのように1.6秒表示時間に影響を与えていることがわかります。

これがサイト全体に影響が出ているとしたら、割とスピード綿においてはクリティカルな問題です。

そのため、妥協案として、V3を使いつつお問い合わせページだけにGoogle reCAPTCHAを表示するという対策もありますが、この場合、サイト全体を使って閲覧者のスコアを計測することを想定しているV3としては、制度が落ちてしまうため、機能面でのトレードオフな感じが否めません。

また、プログラムを記述する必要があるため、WEB担当者の方やテンプレートをカスタマイズすることを避けている方にとっては、ハードルが高い対応になります。

Google reCAPTCHA V2を導入する

そういったことから、私の今のところの最適解は、V2を導入してお問い合わせフォームに設置するというものです。

では、ここからはContact form 7にGoogle reCAPTCHA V2を導入する方法をレクチャーしたいと思います。

reCaptcha v2 for Contact Form 7をインストール

reCaptcha v2 for Contact Form 7をプラグインインストール画面で検索したら、今すぐインストールをクリックして、有効化しましょう。

お問い合わせメニューの中に、reCaptcha Versionというメニューが追加されれているので、クリックします。

設定ページを開いたら、reCaptcha Version 2を選択して、Submitをクリックします。

Your reCaptcha settings have been updated.と表示されれば設定完了です。

サイトキーとシークレットキーの入力

次に、Google reCAPTCHAから取得したサイトキーとシークレットキーの設定をします。

お問い合わせメニューの、インテグレーションの中の、reCAPTCHAを探して、インテグレーションセットアップをクリックします。

画像ではすでにV3が設定されているので、チェックマークが入って、reCAPTCHA はこのサイト上で有効化されています。と書かれていますが、初めて設定する場合はチェックは入っていません。

V3ですでに設定している方も、このままインテグレーションセットアップをクリックします。

V3が設定されているので、キーの情報が表示されますが、V2でキーが変わるため、キーを削除をクリックします。

もし初めて設定する場合は、そのままキーを入力に進んでください。

キーを入力したら、変更を保存をします。

これで、reCAPTCHAのV2への切り替えが完了しました。

Contact form 7のフォームにGoogle reCAPTCHAを設置

V3の場合は、インテグレーションの設定さえすれば自動でGoogle reCAPTCHAが表示されますが、V2に設定した場合はContact form 7のフォーム設定画面で、[recaptcha]タグの設定が必要になります。

具体的に見ていきます。

フォーム作成画面をみると、reCaptchaというボタンが追加されているのがわかります。そして、reCAPTCHAボタンを表示したい位置にカーソルを合わせて、reCaptchaボタンをクリックします。

お好みの設定をして、タグ挿入をクリックします。

テキストが挿入されたのを確認して保存します。

無事、Google reCAPTCHA V2のボタンが表示されました。

もしこのときに、表示はされるが赤い文字でエラーが出ている場合は、V3のキーが残っている可能性があるので、V2のキーかどうか確認してみましょう。

まとめ

今回は、Contact form 7でGoogle reCAPTCHAを使う際、サイト全体の表示速度を優先してあえて「V2」を選択し、導入する方法を解説しました。

最新バージョンのV3はユーザーにパズルを解かせる手間（クリック等）がない分、お問い合わせまでがスムーズなのがメリットですが、サイト全ページで重いスクリプトが常に読み込まれてしまうため、SEOや表示速度の観点からは無視できないデメリットがあります。

「お問い合わせフォームのスパム対策は絶対に必要だけど、サイト全体の表示速度（PageSpeed Insightsのスコア）は絶対に落としたくない！」という方にとって、必要なフォームのページにだけピンポイントで設置できるV2へのダウングレードは、スピード重視な場合はおすすめです。

ご自身のサイトの目的や、SEOにおける速度の優先順位に合わせて、バージョンを選んで設定してみてください。