【Google】Googleカスタム検索の設置

No.73

自分のサイトにGoogleカスタム検索を設置しよう

Googleカスタム検索に登録

　やり方は簡単。下記のページにアクセスして自分のサイトを登録するだけで利用できる。

　Googleアカウントは既存のものでも新規作成してもOKだが、Google Adsenceと連携させたい場合はGoogle Adsenceを利用しているGoogleアカウントでGoogleカスタム検索にもログインしよう。設定ひとつで関連付けが可能だ。

　登録する内容は下記の3つだけ

検索するサイト
言語
検索エンジンの名前

カスタマイズ

　登録後に「検索エンジンの編集」メニューから各種カスタマイズができる。

　説明中に記載のある「自分の検索エンジンID」は各広告の「設定」メニューの「基本」タブ中の「検索エンジンID」をクリックすることで取得可能。

Google Adsence との連携

　「広告設定」タブ中にある「検索エンジンの収益化」を「ON」にすればよい。

　なお、「検索エンジンの収益化」をONにした場合、Googleの検索結果に影響を及ぼすことと、広告の誤クリックの元になるので、Googleは自分では検索ボックスを使わないことを推奨している。

自分のサイトの検索向け AdSense ボックスを使用して検索する

コードの取得

　「デザイン＞レイアウト」ページ下部の「保存してコードを取得」ボタンを押すとサイトに貼り付けるコードを取得することが出来る。

　レイアウトによって取得できるコードが違うことに注意

検索ページに貼り付けるコード
検索結果ページに貼り付けるコード

　前者はJavascriptで画面内に結果を表示するか、Googleサイトに移動して結果を表示するかのタイプが多い。

<script>
  (function() {
    var cx = '自分の検索エンジンID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

　後者の「検索結果に貼り付けるコード」は、サイト側に検索フォームを自分で設置し、そのフォームの移動先のページに貼り付けるためのモノとなる。

　検索フォームはHTMLフォームで設置可能。

HTMLフォームを使用した検索ボックスの作成

<form id="cse-search-box" action="http://google.com/cse">
   <input type="hidden" name="cx" value="自分の検索エンジンID" />
   <input type="hidden" name="ie" value="UTF-8" />
   <input type="text" name="q" size="31" />
   <input type="submit" name="sa" value="Search" />
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

　なお、画面上に「Googleカスタム検索」のロゴは必ず表示しなければならないが、それをフォームの入力欄内に表示することも許可されている。その場合は最終行のロゴ画像リンクを下記のように書き換える。

<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">
　↓
<script type="text/javascript" src="//www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>

　参考までに結果のみ表示させるデザインで、結果画面のHTMLに貼り付けるコードは以下となる。

<script>
  (function() {
    var cx = '自分の検索エンジンID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

　このあたりは自分のサイトに設置しつつ納得できるまで試行錯誤するしかなさそうだ。