AMPページにGoogle カスタム検索を設置する方法

Google カスタム検索エンジンは、特定のウェッブサイト、ブログ、運営する複数のサイトを検索対象として指定することのできるツール・機能です。CMSでは、WordPressをはじめとして検索機能を備えているのが通常ですが、Googleのカスタム検索は、Googleの強力な検索機能を利用でき、さらに検索対象サイトを指定することができるため、規模の大きいサイトを運営している場合は特に有効なツールとなります。

AMPにおけるGoogleカスタム検索の必要性

Googleカスタム検索は、Javaスクリプトを使用しているため、AMPではそのまま使用することはできません。通常ページでは、Googleカスタム検索を使用しているサイトでも、AMPページではWordPressなどのCMSが提供する検索機能を利用している場合が多いと認識しています。

AMPはモバイル端末からの検索で、Googleのキャッシュサーバー上に格納されたAMPページのデータが瞬時に表示される仕組みとなっています。ユーザーが検索経由で訪問したAMPページからサイト内の他のページを表示する場合は、通常のページが表示されることが一般的です。ユーザーのフローを考慮すると、AMPページでのGoogleカスタム検索を利用する需要・機会は少ないと推測します。

しかし、サイト内の全てのページをAMPとするネイティブAMPに対応したサイトでは、状況が異なります。ネイティブAMPでは、モバイルだけでなく、パソコンのブラウザーからアクセスしてもAMPで表示されます。

この度、ネイティブAMPに対応した関連サイト、ブロギングライフBLOGを立ち上げました。ブロギングライフBLOGは、立ち上げたばかりで記事数は少ないこともあり、検索の対象は、本サイトを含めた関連サイトとしたいと思いました。

Googleカスタム検索欄をAMPで設置する方法

AMPでもGoogleカスタム検索を利用できる方法がないか調べてみました。検索してみると、amp-formを使用して対応する方法が紹介されているのをstackoverflowのQ&Aで見つけました。以下、amp-formを使用してGoogleカスタム検索をAMPページに設置する方法を紹介します。

設定概要

カスタム検索エンジンは、https://cse.google.com/cseに検索エンジンID(cx)パラメーターを指定し、クエリを引数として渡すことで動作します。amp-formを利用して検索欄を設け、入力したクエリを検索エンジンIDを加えて、cse.google.com/cse/で表示させることで、カスタム検索を行うことができます。言い換えるとamp-formを使用して検索欄を設けて、入力内容に基づいてカスタム検索エンジンを実行する手法です。

検索エンジンIDの入手

Googleカスタム検索のサイトを訪問してGoogleアカウントにログインすると、カスタム検索のアカウントページが表示されます。用途に応じたカスタム検索エンジンを作成します。作成方法については以下のページをご覧下さい。

サイト内検索をGoogle カスタム検索にアップグレードする方法

既に作成済みの場合は、該当するカスタム検索エンジンの設定ページを表示します。設定ページから、カスタム検索エンジンIDをコピーします。

備考：
検索エンジンIDは、Public URLのパラメータcx=の後の引数、ブラウザーのアドレスバーにも表示されています。

amp-formの設置

以下のスクリプトをAMPページの<head>タグ内に設置します。

続いて、以下のコードをコピーして、検索欄を表示する場所（テキストウィジェットなどの中）に貼り付けます。cxの値は、入手した検索エンジンIDに置き換えてください。

以上で設置作業は完了です。

動作確認

AMPページを表示して、検索欄が表示されているか確認し、表示されている場合は、実際に検索を行います。適切に設定されていれば、Googleカスタム検索のドメインが表示され、検索結果が表示されます。

AMP バリデーションテスト

動作を確認後、AMPページのバリデーションテストを行います。機能は動作していても、エラーとなる場合があります。

備考：
ネイティブAMPのサイト、ブロギングライフBLOGではAMPテストも合格しました。しかし、同じ設定をブロギングライフで行なって動作はしたのですが、ブロギングライフではエラーとなってしまいました。設定自体は問題なくても、何らかの理由でエラーが発生することがあります。ブロギングライフBLOGでは必要な機能ですが、ブロギングライフではどうしても必要なわけではないので、現状、前者のみ設定しております。