Googleカスタム検索のサイト内検索を設置する方法

Googleカスタム検索とは？

Googleカスタム検索のイメージ
Googleが提供している無料のサービスです。
Googleの検索エンジンを使い、クエリで自サイト内のページ検索を行えます。

本Tipsでは基本的な設置方法をご紹介します。
実装にはGoogleアカウントが必要です。

Googleカスタム検索を設置する

コードを取得する

Googleカスタム検索（ https://cse.google.com/cse/ ）にアクセスし、画面右上の カスタム検索エンジンにログイン をクリックします。
Googleアカウントにログインするよう求められた場合は、別途ログインを行います。
新しい検索エンジンの登録画面が開きます。
下記項目を入力します。
 
  • 検索するサイト　Googleカスタム検索を設置したいサイトのURLを入力します。
  • 言語　日本語を選択します。（日本語サイトの場合）
  • 検索エンジンの名前　サイトURLが自動反映されます。任意で変更も可能です。
     
利用規約を確認し、作成 をクリックします。
コードを取得 をクリックします。
取得したコードは、後ほどbingo!CMSのページ編集画面で使用します。
コードをコピーしてください。

以下はコードの生成例です。 
<script async src="https://cse.google.com/cse.js?cx=ユニークな文字列"></script>
<div class="gcse-search"></div>
※コードの取得画面には『次のコードをコピーして、検索ボックスと検索結果の両方をレンダリングしたいサイトの <body> セクションの <div> 要素に貼り付けます。』とありますが、bingo!CMSではscriptタグとdivタグをそれぞれ別の場所に貼り付けます。

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

bingo!CMSの管理画面にログインし、Googleカスタム検索を実装したいページのページ編集画面を開きます。
画面右上の このページ用の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>

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

ページ編集画面を再読み込みして更新します。

※操作方法はご利用のブラウザにより異なります。

Googleカスタム検索が設置できました。

Googleカスタム検索の動作をテストする

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

サイトをまだ公開していないなど、Googleカスタム検索でサイト内検索を行えず、動作確認が出来ない場合は、一時的にウェブ全体を検索する設定へ切り替えることでテストが可能です。

bingo!CMSにGoogleカスタム検索を設置した状態で、Googleカスタム検索のメニューから 設定 をクリックします。
 

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

『ウェブ全体を検索』を オン にし、Googleカスタム検索を設置したページで検索のテストを行います。
テスト終了後は、サイト公開前に『ウェブ全体を検索』を オフ にしてサイト内検索に戻してください。

Googleカスタム検索について

検索結果が表示されない

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

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

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

非営利団体、学校、政府機関の場合はGoogleカスタム検索の広告なしバージョンを申し込むと広告を削除できます。
その他の団体は、クエリ1,000件につき5ドルでJSONAPIを利用できます。
詳細はGoogleカスタム検索のヘルプページ（ https://support.google.com/customsearch/answer/4542011?hl=ja ）をご覧ください。

Googleアナリティクスと連携したい

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

その他のTips

ページトップ