(結果のみ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

2014/02/19 2014/11/22

Google™カスタム検索エンジン(CSE)のデザインを行う際には、
様々なレイアウトを選択し、検索結果を表示するように選択することができます。

ここでは「結果のみ」レイアウトの実際の動作を確認できるように例示しておきます。
また導入方法についてもご紹介しておきます。

結果のみ

自分の検索ボックスを使用して、サイト上のページに検索結果を表示します。

実際に「結果のみ」の表示方法の確認は以下の投稿でご紹介しています。
CSE単独設置検証(CASE6-0) – 結果のみ

表示の例

WordPressなどのCMSを利用している場合、標準の検索機能が備わっていると思います。
そうした標準検索で表示される検索結果ページをGoogleカスタム検索エンジンに置き換えて表示を行う方法です。
WordPressなどの標準検索機能については以下でご紹介しています。
WordPressのサイドバーにサイト内検索フィールド(ボックス)を設置する方法(標準)

カスタム検索エンジン側では、カスタム検索エンジンの結果表示用のタグが提供され、
WordPressなどのCMSが利用する「検索クエリパラメータ」をカスタム検索エンジンに対して設定して利用します。

またWordPressなどのCMSが検索結果ページとして表示するテンプレート(search.phpなど)に対して、
カスタム検索エンジンから提供されるタグを設定します。

「結果のみ」表示ではGoogleの検索フィールドは利用しませんので、
ここでは自身のサイトに対して要求を行うフィールドとボタンを設置しています。

  <form method="get" class="searchform" action="http://algorhythnn.jp/blg/" target="_blank">
    <label for="s" class="assistive-text">Search for:</label>
    <input type="text" class="field" name="s" id="s" value="Search" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
    <input type="submit" class="submit" name="submit" id="searchsubmit" value="Search">
  </form>

<label for="s" class="assistive-text">Search for:</label>

</form>

検索フィールドに対してキーワードを入力し検索を実行します。

レイアウト「結果のみ」検索ボックス

検索キーワードが指定したURL（http://algorhythnn.jp/blg/）に対してクエリパラメータにて渡され、
検索結果ページに対して設定されたカスタム検索エンジンのタグ位置に検索結果が表示されます。

レイアウト「結果のみ」検索結果表示

このようにして検索結果ページを独自ページに埋め込むことができます。

検索フィールドを独自のものを利用せず、Googleの検索フィールドを利用する場合には、
レイアウトで「２ページ」を選択して設置を行います。
(２ページ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

「結果のみ」スクリプト例

（注意）
このタイプを選択した場合には、検索クエリパラメータを別途指定するボタンが表示されます。
※このタイプでは検索ボックスは表示されません。

また自身のサイト内検索パラメータとカスタム検索に指定する検索パラメータが、
一致していない場合には検索結果も表示されません。

コードを取得する際に最初に検索ボックスのコードが表示されます。
このタイプを選択している場合には上部に[検索結果の詳細]ボタンが表示されます。

結果のみ・検索結果の詳細

[検索結果の詳細]ボタンをクリックするとクエリパラメータ文字列が表示されます。

検索クエリの設定

ここではWordPress標準ウィジェットのサイト内検索を利用した例でご紹介します。
WordPressのサイドバーにサイト内検索フィールド(ボックス)を設置する方法(標準)

標準ウィジェットでサイト内検索を行った場合の検索パラメータを確認します。
WordPressではクエリパラメータに「s」が利用されています。

独自サイト内検索クエリの確認

[検索結果の詳細]ボタンをクリックしクエリパラメータに対して「ｓ」を設定します。

検索クエリの設定変更

結果のみスクリプト例

<script>
  (function() {
    var cx = '01xxxxxxxxxxxxxxxxx31:l_lrxxxxxyy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

(function() {

var cx = '01xxxxxxxxxxxxxxxxx31:l_lrxxxxxyy';

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

'//www.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>

<gcse:searchresults-only></gcse:searchresults-only>

検索結果を表示すると標準の検索ボックスの検索結果表示と、
Googleカスタム検索エンジンの検索結果が表示されます。

カスタム検索エンジン・結果のみ

検索結果ページ(search.php)の編集例

WordPressの検索結果テンプレート(search.php)を修正して、
検索結果にカスタム検索エンジンの結果を表示するように変更を行います。
（表示するだけのやっつけですみません、検索結果なしの場合など別途対応は必要です）

検索結果テンプレート(search.php)の検索結果出力部分を、
カスタム検索エンジンの結果挿入部のタグに置き換えます。

WordPress検索結果テンプレート編集

サイドバーに設置していた検索結果挿入部のタグを削除します。
※この場合画面表示を行うソースはなくなりますので、タグはページ末尾などに移動しても構いません。
ここでは便宜上サイドバーのままにしています。

サイドバー設置ソースの変更

変更したテンプレートを利用して検索結果を表示すると、
検索結果表示がカスタム検索エンジンによる検索結果の表示になります。

カスタム検索エンジン・結果のみ

（注意事項）

この手法を利用するとカスタム検索エンジンに対してAdSenseを割り当てている場合に、
サイト上の独自に指定した位置に対して検索結果を表示できることができます。

既にコンテンツ向け広告を設置している場合にはポリシーに準拠する必要があります。

AdSense プログラムポリシー – AdSense ヘルプ　（抜粋引用）

プロダクト別のポリシー

コンテンツ向け AdSense: コンテンツ向け AdSense の広告ユニットは 1 ページに 3 つまで配置できます。ただし、これら 3 つの広告ユニットのうち、300×600 のサイズを使用できるのは 1 つのみです。300×600 以外であれば各ページに同じサイズの広告を複数掲載できます。また、3 つのコンテンツ向け AdSense の広告ユニットに加え、リンクユニットを 3 つまで、検索ボックスを 2 つまで各ページに配置することも可能です。これらのポリシーは、PC 向けとハイエンド携帯端末向けのどちらのサイトでも同じです。

検索向け AdSense: Google 検索向け AdSense の検索ボックスは各ページに 2 つまで表示できます。また、検索向け AdSense の検索結果ページには、リンクユニットかイメージ広告のどちらかを 1 つだけ表示できます。検索クエリは、個々のエンドユーザーが検索ボックスに直接データを入力することによって実行されるものとします。サイト側で変更することはできません。検索語の事前入力や検索結果ページへの直接リンクをハードコーディングすることは、サイト側での変更に当たります。また、検索向け AdSense のコードをツールバーなどの何らかのソフトウェアアプリケーションに組み込むことも許可されません。

ポリシーを確認すると、１つだけ設置可能との明記があることからイメージ広告は設置可能なようです。
詳細は以下でご紹介しています。
Google™AdSense検索向けAdSense広告(カスタム検索エンジン)と検索結果ページへの広告表示について

さいごに

カスタム検索エンジンはこのデフォルト設定で設置されていることが多いように思いますが、
様々なレイアウトを選択して設置することができますので、
デフォルトにこだわらず自身のサイトにあったレイアウトを選択されるといいでしょう。

No	レイアウト	動作例
1	オーバーレイ	(オーバーレイ)Google™サイト内検索のレイアウト導入方法と実際動作
2	２ページ	(２ページ)Google™サイト内検索のレイアウト導入方法と実際動作
3	全幅	(全幅)Google™サイト内検索のレイアウト導入方法と実際動作
4	２列	(２列)Google™サイト内検索のレイアウト導入方法と実際動作
5	コンパクト	(コンパクト)Google™サイト内検索のレイアウト導入方法と実際動作
6	結果のみ	(結果のみ)Google™サイト内検索のレイアウト導入方法と実際動作
7	Goolgeがホスト	(Googleがホスト)Google™サイト内検索のレイアウト導入方法と実際動作

カスタム検索エンジンのデザイン設定については以下で戻れます。

Google™サイト内検索(カスタム検索エンジンv2)のデザイン設定

参考

Custom Search Element Control API – Custom Search — Google Developers#layout

Results only

Search via URL

Search via search box

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。