Googleカスタム検索でサイト内検索を設置しよう

2024年 2月26日　Posted　碓井(フロントエンドエンジニア)

近年では当たり前のように見ることが増えてきたサイト内検索。しかし、CMSを使っていないサイト、もしくはCMSの種類によっては導入が難しいケースがあるかと思います。そういった時に、Googleが用意している「googleカスタム検索」を使用することで簡単にサイト内検索を導入することができます。今回はその設定方法について、解説していきたいと思います。

準備

事前にGoogleアカウントの用意が必要になります。企業サイトで使う場合、企業用のアカウントをご用意されることをオススメします。

googleカスタム検索のサイトに飛ぶ

googleカスタム検索のサイトに行き、「使ってみる」のボタンを押してみましょう。

最初の画面

「使ってみる」のボタンを押しますと、下記の管理画面に入ることができますので赤枠で囲った「追加」のボタンを押してみましょう。

検索設定1

「追加」ボタンを押しますと、下記の画面になります。

任意のエンジン名を設定します。後から他のサイト内検索を追加することを想定して、分かりやすい名前にすることをオススメします。
サイト内検索で対象とするURLの設定をします。
「特定のサイトまたはページを検索」に選択がされていることを確認し、その下の入力項目にサイト全てを対象に含める場合は「https://xxx.yy/*」、もしブログページなど対象を限定する場合は、「https://xxx.yy/blog/*」といった形式でURLを入力します。
入力が完了したら、「私はロボットではありません」にチェックを入れましょう。
必要な項目が入力完了すると「作成」ボタンがアクティブ状態になりますので、「作成」ボタンを押します。

土台の完成

「作成」ボタンを押しますと、サイト内検索の土台は完成となります。このまま、この画面に表示されたコードをサイト内検索の検索窓を設置したい箇所に貼りつけることで使用することも可能です。

この状態で埋め込んだサイト内検索はデフォルト設定の物のため、もしもう少し細かい設定をしたい場合は「カスタマイズ」ボタンを押して、続きをご覧ください。

検索設定2

「カスタマイズ」ボタンを押しますと、下記の画面が表示されます。

色や出力する項目などの設定を行います。
* 色の設定はCSSで設定することも可能ですので、ご自身のスキルに応じて使い分けてください。
管理メンバーの管理・設定を行います。デフォルトでは作成者のアドレスが入っています。
googleカスタム検索は検索結果に広告が入る仕様になっています。この広告を表示させたくない場合は、説明内のリンクで設定を完了することでAPIキーが発行されるため、そのAPIキーをこの項目に入力することで非表示にすることが可能です（要課金）。

検索設定3

少し下にスクロールさせると、続けて下記の画面が表示されますので「すべてのデザインの設定」ボタンを押してください。

検索設定4

下記のような画面が表示されます。これは、サイト内検索の入力後、結果表示のされ方を設定する項目です。

今回は、少しやり方に少しだけ手間のかかる「2ページ」を選択して、話を進めてみます。「2ページ」は入力完了後、別ページに遷移して検索結果を表示する設定です。

検索設定5

続けて、少し下にスクロールさせますと下記の画面が表示されます。

このエリアでは検索入力、結果のデザインを変更することができます。あらかじめCSSでデザインを設定していた場合は特にいじる必要はありません。変更内容は「プレビュー領域」から確認できます。
* 自サイトで設定したCSSはこの画面では反映されません。

検索設定6

下にスクロールさせると下記の画面が表示されます。

検索入力フォーム内にGoogleロゴを表示させるか否かの設定が可能です。
検索結果画面のリンク文字色の設定や結果一覧に表示させる項目を選択することが可能です。好みになりますが、URLを表示させるのが一番オーソドックスかもしれません。

検索設定7

最後に検索結果一覧にサムネイルを表示させるか否かの設定が可能です。サムネイルは「112×112」であらかじめ作成し、PageMap、またはthumbnailのメタタグを使用することで設定されます。詳細はGoogleのヘルプページから確認することができます。

サムネイルをthumbnailのメタタグで設定する方法

こちらのやり方は非常にシンプルです。下記のcontent内の値を正しい画像のパスに変更し、headタグ内に記述すれば対応は完了です。

<meta name="thumbnail" content="https://sample.com/img/sample.jpg">

サムネイルをPageMapで設定する方法とPageMapについて

PageMapは、Googleが開発した構造化データ形式で、HTML内に書かれた情報を検索クローラーに伝えるためのものです。コードは下記のように記述をします。PageMapタグをコメントアウトタグで囲む点に注意が必要です。

<!--
	<PageMap>
		<DataObject type="thumbnail">
		<Attribute name="src" value="https://sample.com/img/sample.jpg"/>
		<Attribute name="width" value="120"/>
		<Attribute name="height" value="120"/>
		</DataObject>
	</PageMap>
-->

widthやheightを指定しなかった場合、デフォルトの104pxが設定されます。（2023年9月時）

最後に保険の「保存」

基本的に自動保存ですが、事故防止のため、一度上までスクロールし、「保存」ボタンで変更を決定してください。

コードを発行してページに設置

ページ左上にあるナビゲーションの「概要」を選択しますと、該当するエリアにページ内リンクします。「コードを取得」を選択します。

下記のウインドーが表示されます。

検索フォーム（入力フォーム）の発行ボタンです。検索ボックスを表示させたい場所にコードをペーストします。
検索結果画面の発行ボタンです。検索結果を表示させたい場所にコードをペーストします。
検索結果を表示するURLを設定してください。

以上で全設定が完了です。