プログラム可能な検索エンジンを使ってサイト内検索を設置する方法
(Googleカスタム検索)

プログラム可能な検索エンジン(Googleカスタム検索)とは?

Googleカスタム検索の設置イメージ

Googleが提供している無料のサービスです。
Googleの検索エンジンを自サイトに埋め込み、自サイト内のページ検索を行えます。
かつては「Google カスタム検索」と呼ばれていましたが、現在は「プログラム可能な検索エンジン」という名称になりました。
本Tipsでは基本的な設置方法をご紹介します。
はじめに利用規約をご確認ください。

・プログラム可能な検索エンジン利用規約
https://support.google.com/programmable-search/answer/1714300?hl=ja

なお、実装にはGoogleアカウントが必要です。
お持ちでない場合は、あらかじめGoogleアカウントを取得してください。

・Google アカウントの作成 - Google アカウント ヘルプ
https://support.google.com/accounts/answer/27441?hl=ja

プログラム可能な検索エンジンを設置する

コードを取得する

プログラム可能な検索エンジン( https://programmablesearchengine.google.com/about/ )にアクセスし、使ってみる をクリックします。
Googleアカウントにログインするよう求められた場合は、別途ログインを行います。

すべての検索エンジン画面が開きます。
過去にプログラム可能な検索エンジンを作成したことがある場合は、ここに一覧が表示されます。

新しく作成するときは、画面内の追加をクリックします。

新しい検索エンジンの作成画面が開きます。
下記をご参考に設定してください。

  • 検索エンジンの名前を入力する
    検索エンジン名を入力します。
    ここに入力した名前は「すべての検索エンジン」画面に表示されます。
  • 検索の対象を指定する
    「特定のサイトまたはページを検索」あるいは「ウェブ全体を検索」から選択できますが、今回は自サイト内の検索が目的なので前者を選びます。
    「次のいずれかを追加できます」を参考に、サイトまたはページを入力欄に入力します。
  • 検索設定
    画像検索とセーフサーチを有効にする場合は、ボタンをクリックして有効にします。

「私はロボットではありません」にチェックを入れ、作成 をクリックします。

「新しい検索エンジンが作成されました」の画面とともに、プログラム可能な検索エンジンのコードが表示されます。
このコードは後ほどbingo!CMSの管理画面で使用しますので、コピーしてメモに貼り付けるなど、いつでも使える状態にしておくと便利です。

以下はコードの作成例です。

<script async src="https://cse.google.com/cse.js?cx=ユニークな文字列"></script>
<div class="gcse-search"></div>

bingo!CMSにコードを保存する

bingo!CMSの管理画面にログインし、プログラム可能な検索エンジンを実装したいページの、ページ編集画面を開きます。
画面右上の このページ用のcssとjavascriptの設定 をクリックします。

CSS・JS設定画面が開きます。
コピーしたコードのうち、scriptタグのみを貼り付けて保存します。
保存が完了したら、画面右上の × をクリックし、CSS・JS設定画面を閉じます。
※bingo!CMS1.7.2以上の場合、PC・タブレット用とスマートフォン用で入力欄が別になっているため、必要があればそれぞれに入力してください。

以下はscriptタグの入力例です。

<script async src="https://cse.google.com/cse.js?cx=ユニークな文字列"></script>

任意のコンテナにHTML v17をドラッグ&ドロップで配置します。

HTML v17の ユニット編集 をクリックし、ユニットの編集画面を開きます。

ご注意
これ以降の操作を行うと、場合によってはユニット編集画面を保存しページ編集画面へ戻ったときに、一時的にユニットが消えたように見えることがあります。
その場合は、ページ編集画面を再読み込みして更新すると表示されます。
※操作方法はご利用のブラウザにより異なります。

htmlの入力欄にコピーしたコードのうち、divタグのみを貼り付けて保存します。

以下はdivタグの入力例です。

<div class="gcse-search"></div>

スマートフォンからもプログラム可能な検索エンジンを使用できるようにする場合は、ユニット編集画面の SP タブをクリックし、スマートフォン表示用の設定画面に切り替えます。
PCの内容をコピー をクリックすると、先ほど入力したdivタグが反映されますので、保存 をクリックします。

ページ編集画面に戻ったときにHTML v17が一時的に消えてしまった場合は、ページ編集画面を再読み込みして更新すると表示されます。
※操作方法はご利用のブラウザにより異なります。

プログラム可能な検索エンジンが設置できました。

プログラム可能な検索エンジンの動作をテストする

Googleカスタム検索設定画面のイメージ

サイトをまだ公開していないなど、プログラム可能な検索エンジンでサイト内検索の動作確認ができない場合は、一時的にウェブ全体を検索する設定へ切り替えることでテストが可能です。

bingo!CMSにプログラム可能な検索エンジンを設置した状態で、すべての検索エンジンの一覧から当該検索エンジン名をクリックします。

Googleカスタム検索『ウェブ全体を検索』機能をオンにする操作イメージ

概要 - 検索機能の中にある「ウェブ全体を検索」のボタンをクリックして 有効 にします。
設定の変更はリアルタイムで反映されますので、プログラム可能な検索エンジンを設置したページのプレビューを開いて、検索ができるかお試しください。
テスト終了後は、サイト公開前に「ウェブ全体を検索」のボタンを 無効 にして、サイト内検索に戻してください。

プログラム可能な検索エンジンについて

検索結果が表示されない

プログラム可能な検索エンジンのサイト内検索は、Googleの検索エンジンを使用しGoogleにインデックスされた自サイトのページを検索します。
そのため、インデックスされていないページは検索結果に表示されません。
bingo!CMSにおいては、次の場合にページが表示されないことがあります。

  • サイトにnoindexを設定している
  • ページにnoindexを設定している
  • サイトを非公開にしている
  • ページを非公開にしている
  • 無料お試し版サイトを使用している

検索結果の広告を非表示にしたい

非営利団体、学校、政府機関の場合はプログラム可能な検索エンジンの広告なしバージョンを申し込むと検索エンジンから広告を削除できます。
その他の団体は、プログラム可能な検索のElement Paid APIまたはJSON APIを使用することでクエリ1,000件につき5ドルで広告を削除できます。
詳細はプログラム可能な検索エンジンのヘルプページ( https://support.google.com/programmable-search/answer/4542011?hl=ja )をご覧ください。

どんな検索クエリ(キーワード)で検索されたか確認したい

Google アナリティクス アカウントをお持ちの場合は、アナリティクスのサイト内検索レポートを設定することができます。
詳細はプログラム可能な検索エンジンのヘルプページ( https://support.google.com/programmable-search/answer/2715510?hl=ja )をご覧ください。

その他のTips

ページトップ