１ページ上に複数のサイト内検索(カスタム検索エンジンv2)を配置する方法

2014/02/20 2014/11/22

「Google™カスタム検索エンジン」はGoogleの検索エンジンのパワーを簡単に借りることができ、
かつ、収益化の仕組みを取り入れることができる「検索向けAdSense」ユニットもあるという魅力的なパーツです。

簡単に設置ができる「カスタム検索エンジン（CSE）」ユニットですが、
１サイト上に複数の検索フィールドを設置する場合にはうまく動作しない場合もあります。
そうした設置例と対応策をご紹介します。

はじめに

前回「検索向けAdSense」のユニットを１ページ内に複数設置する方法をご紹介しました。
１ページ上に複数のGoogle™AdSense検索向けAdSenseユニットを配置する方法

この方法でも利用しましたが「カスタム検索エンジン」の編集画面から、
導入するソースを取得することで「検索向けAdSense」の管理画面からは
変更できないようなカスタマイズをおこなったり、複数設置することが可能になりました。

検索向けAdSenseのカスタマイズ機能は以下でご紹介しています。
Google™AdSenseの検索向けユニット(サイト内検索・カスタム検索エンジン)の設定とデザイン

また、カスタム検索エンジンからのカスタマイズ機能は以下でご紹介しています。
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法

そもそも「検索向けAdSense」と「カスタム検索エンジン」はどう違うのかという点については、
以下でご紹介しています。
Google™AdSenseの検索向けユニット（AFS）とカスタム検索ユニットの違い（CSE）

さて、「カスタム検索エンジン」の編集によって、１ページ内に複数設置することが可能にはなるのですが、
「カスタム検索エンジン」だからと言って、どんな表示方法でも簡単に複数設置が可能だとは言えません。

カスタム検索エンジンの設置例

一番簡単な設置例として、カスタム検索エンジンのデザインに標準的な設定を選択する場合です。

レイアウト：オーバーレイ
テーマ：デフォルト

カスタム検索エンジンレイアウト・テーマ設定

こうした標準的なオプションで１ページ内に複数設置すると、以下のように正しく動作します。

カスタム検索エンジンの検索エンジンIDの異なるユニットの複数配置

以下はCSEで取得した異なるユニットを複数設置して表示しています。

どちらもスタイルが設定されています。

検索向けAdSenseテスト・CSE異なるユニット複数

実際の表示

直接ウィンドウで開く場合：検索向けAdSenseテスト・CSE異なるユニット複数

実際に検索を行ってみるとどちらの検索ボックスからでも検索結果を表示することができます。

検索向けAdSenseテスト・CSE異なるユニット検索結果

しかし、こうした配置がうまくいかない場合も存在します。

複数設置の組み合わせ例

ネットを検索してみると
「１ページに対して、設置する検索エンジンIDは１つでなければならない」という情報を見かけることもあるかもしれません。

しかし、上記のように複数の検索エンジンIDが共存しても動作します。

問題となるのは「レイアウト」の不一致です。

また「テーマ」が不一致する場合も、体裁が乱れます。

動作検証の組み合わせパターンは以下でご紹介しています。
Google™検索向けAdSense(AFS)とカスタム検索ユニット(CSE)とその他

複数設置している場合にも「レイアウト」と「テーマ」が一致している場合には正しく動作します。

レイアウトが一致している場合でテーマが異なっている場合には、
適用されるテーマは、カスタム検索エンジンの読み込みタイミングによってまちまちとなりますが、
検索結果の表示に関しては動作します。

複数設置時の注意点

カスタム検索エンジンを複数設置する場合には以下の点に注意が必要です。

双方のレイアウト選択は同じにする
双方のテーマは同じにする
可能であればカスタム検索エンジンIDは同一にする

尚、以下でご紹介している複数設置の全パターンについては以下でご紹介しています。
Google™検索向けAdSense(AFS)とカスタム検索ユニット(CSE)とその他

オーバレイ設置の注意点

レイアウトで「オーバーレイ」を選択している場合には、
複数を設置してもそれぞれがオーバーレイ表示として検索結果が表示されます。
(オーバーレイ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

複数設置の実際の動作については以下で確認が行えます。
CSE競合設置検証(CASE1-1)

２ページ設置の注意点

レイアウトで「２ページ」を選択している場合には、検索結果コードが双方のIDで提供されます。
(２ページ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

その場合、検索結果ページに設置する検索結果表示エリアのタグ
「<gcse:searchresults-only></gcse:searchresults-only>」は、
１つのみ設定することで検索結果が複数表示されることを防ぐことができます。

複数設置の実際の動作については以下で確認が行えます。
CSE競合設置検証(CASE2-2)

全幅設置の注意点

レイアウトで「全幅」を選択している場合には、
検索結果の直下に対して検索結果が流し込まれます。
複数設置を行った場合でも、それぞれの検索フィールドの直下に対して検索結果が表示されます。

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

複数設置の実際の動作については以下で確認が行えます。
CSE競合設置検証(CASE3-3)

２列設置の注意点

レイアウトで「２列」を選択している場合には、
複数設置を行った場合でも、１つの検索フィールドしか表示されません。

その為、複数の検索フィールドを設置して２列レイアウトの表示を行うことはできません。

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

複数設置の実際の動作については以下で確認が行えます。
１つのフィールドと結果表示エリアしか動作していないことが以下で確認できます。
CSE競合設置検証(CASE4-4)

コンパクト設置の注意点

レイアウトで「コンパクト」を選択している場合には、
検索結果の直下に対して検索結果が流し込まれます。
複数設置を行った場合でも、それぞれの検索フィールドの直下に対して検索結果が表示されます。

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

複数設置の実際の動作については以下で確認が行えます。
CSE競合設置検証(CASE5-5)

結果のみ設置の注意点

レイアウトで「結果のみ」を選択している場合には、
カスタム検索エンジンの検索結果コードのみを設置することになります。
(結果のみ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

検索フィールドは任意のフィールドを設置する為、複数フィールドの設置は自由ですが、
検索結果ページに対して、複数の検索結果コードを設置しても重複するだけになってしまいます。
その為、結果のみを選択している場合には、必然的に設置するカスタム検索エンジンは1IDとなります。

複数設置の実際の動作については以下で確認が行えます。
CSE競合設置検証(CASE6-6)

Googleがホスト設置の注意点

レイアウトで「Googleがホスト」を選択している場合には、
複数を設置してもそれぞれがGoogleサイトによる表示として検索結果が表示されます。
(Googleがホスト)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

複数設置の実際の動作については以下で確認が行えます。
CSE競合設置検証(CASE7-7)

複数設置の意味

ここまででそもそも複数のカスタム検索エンジンを設置する必要性があるのか？
そういう疑問を持たれることと思います。

テーマは同じ、レイアウトも同じという状態なら、同じユニットを複数設置しても同じように感じます。

カスタム検索エンジンを単なるサイト内検索として利用する上では、
１つのユニットIDで複数設置すればいいでしょう。

しかし、カスタム検索エンジンを「検索向けAdSense」として利用する場合には状況が変わります。
設置した場所などによって、カスタムチャネルを割り当てる場合もあるでしょう。

場所を表示したカスタムチャネルを割り当てる場合には、
カスタム検索エンジンのIDをそれぞれに分けて設置する必要があります。

そうした場合に、異なったIDのカスタム検索エンジンを設定する必要が出てきます。

とはいえ、たかが検索ということで同じIDで設定しカスタムチャネルも同一としてしまうことで、
面倒な問題は回避されます。

さいごに

こうしてカスタム検索エンジンを複数設置する方法をご紹介してきましたが、
何かしらのご参考になれば幸いです。

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