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



2つの方法があります。

  1. Programmable Searchから作成する
  2. Googleアドセンスから作成する

Programmable Searchから作成

Programmable Search – すべての検索エンジン

「追加」をクリックします。新規の場合でもやり方はさほど変わりません。

  1. 検索エンジンの名前は何でもOK
  2. 検索の対象は「特定のサイト」を選択してみました。サイトは複数選択可能
  3. 検索設定は、画像なども検索の対象に入れたければオンにします
  4. 最後に「私はロボットではありません」にチェックを入れて「作成」をクリック

検索エンジンが作成されました。

コードを貼る

表示されたコードを <body> 内に貼り付けます。

<script async src="https://cse.google.com/cse.js?cx=***"></script>
<div class="gcse-search"></div>

WordPress の場合はウィジェットを使ってコードを貼ると便利。

検索窓が表示されました。

Googleアドセンスに合格している場合

最初のページに戻り収益化したいドメインをクリック。
次のページで「AdSense」→「AdSenseの設定に移動」をクリックします。

検索エンジンの収益化をオンにします。

実際に検索してみた

上の方に広告、下の方に検索結果が表示されました。

Googleアドセンスから設置

  1. Googleアドセンス
  2. 広告
  3. 広告ユニットごと
  4. 「検索エンジン」をクリック

広告に名前をつけて右下にある「作成」をクリックします。検索の対象はお好みで。

コードをコピーして表示させたい場所に貼り付けます。

編集したい場合は、既存の広告ユニットから「編集」→「エディタを開く」をクリックすると Programmable Search が新しいタブで開きます。

編集(デザイン)したい場合は結局 Programmable Search を開くことになるので、最初から Programmable Search から設定した方が良いんじゃないかと思いました。

検索エンジンをデザインする方法

基本はこのように表示されます。

デザインの変更は Programmable Search – すべての検索エンジン の「デザイン」から行います。

当サイトではこのように設定してみました。

  • レイアウトはオーバーレイ
  • テーマはminimalist
  • Google ブランド表示は無効

Googleカスタム検索を削除したい場合

Programmable Search を開き、削除したい検索エンジンにチェックを入れて「削除」をクリックすると削除されます。

検索エンジンのサムネイルの表示がおかしい場合

思い切って検索エンジンを削除すると良いです。新しく作り直すと上手く表示されます。

Googleカスタム検索エンジンを自分のサイトに組み込むことはできなくなった模様