Google™検索向けAdSense(AFS)とカスタム検索ユニット(CSE)とその他

Google™の検索ボックスといえば、
カスタム検索エンジンと検索向けAdSenseの検索ボックスが有名なところです。

しかしGoogleの検索ボックスの設置方法はそれだけではありません。
従来のHTMLによる設置方法なども利用することができ、
用途に合わせて選択することができます。

ここではそれぞれの検索ボックスの設置方法についてご紹介します。

はじめに

検索ボックスのいろいろな設置方法を調べるつもりはなかったのですが、
ちょっとWordPressプラグインを調べていて、
検索ボックスを利用した内部検索の仕組みや設置方法を調べることになりました。

結果として、Googleのカスタム検索エンジンに、
ここまで知らなかった機能があったのかと再認識するいい機会になりました。

Google検索ボックス設置方法

Googleの検索ボックスは他社の検索サービス同様にHTMLで設置することもできれば、
JavaScriptを利用して設置する現在の方法を採用することもできます。

こうした過去の設置方法も残してくれているのは本当にありがたいなと思います。

HTML

HTMLによる設置方法は非常にシンプルでフィールドをHTMLタグで設置して、
Googleのサーバーに対してキーワードを送信することで、検索を利用することができます。

しかし、この方法では検索結果は必ずGoogleのサイト上で表示されますので、
自身のサイトに検索ボックスを表示し検索を利用してくれると、
ユーザーさんが外部に離脱してしまう可能性が高くなります。

設置方法の例

HTMLを利用した検索ボックスの設置方法は以下でご紹介しています。
リンクの先ではサイドバーに実際にHTMLにて設置した検索ボックスが表示されます。
検索した際の動きを確認することができます。
(HTML)WordPressにGoogle™サイト内検索(カスタム検索エンジン)を設置する方法

カスタム検索エンジン表示

検索向けAdSense

検索向けAdSenseの検索ユニットはGoogle™AdSenseのアカウントを取得して、
Googleの収益化プログラムに参加している場合に、利用ができる検索ボックスです。

基本的には以下の「カスタム検索エンジン」と同じ仕組みですが、
検索向けAdSenseでは、検索結果に表示される広告より収益を得ることができる点と、
その広告のデザイン（スタイル）をカスタマイズすることができます。

設置方法の例

検索向けAdSenseを利用した検索ボックスの設置方法は以下でご紹介しています。

(サイドバー)WordPressにGoogle™AdSenseサイト内検索(カスタム検索エンジン)を設置する方法

(投稿前後)WordPressにGoogle™AdSenseサイト内検索(カスタム検索エンジン)を設置する方法

検索向けAdSense検索ボックス表示

検索向けAdSenseのカスタマイズ

検索向けAdSenseのユニットも様々なカスタマイズを行うことができます。
カスタマイズを行うことができる項目は以下でご紹介しています。

Google™AdSenseの検索向けユニット(サイト内検索・カスタム検索エンジン)の設定とデザイン

結果ページとイメージ広告表示

検索向けAdSenseには当然ながら広告に関する設定などが行えるのですが、

検索結果ページをiframeにて読み込んだり、
カスタム検索エンジン側で結果表示を行うページを自身のサイトに埋め込むことで、
検索結果ページに対してイメージ広告をさらに追加して表示することができるようになります。

Google™AdSense検索向けAdSense広告(カスタム検索エンジン)と検索結果ページへの広告表示について

この方法を利用すると当サイトで実際に検索を行った結果のように、
検索結果ページに対して、AdSenseのコンテンツ向け広告（イメージ広告）を１つ表示することができます。

カスタム検索エンジン(V2コード)

前述した「検索向けAdSense」もAdSense管理ページで取得できるコード以外に、
この「カスタム検索エンジン」の編集ページを利用して、
カスタム検索エンジンのコードを利用してサイトに設置することができます。

当然、AdSenseと連携していない純粋なカスタム検索エンジンはこの方法で設置します。

設置方法の例

カスタム検索エンジンの設置においては、さまざまなレイアウトを選択して導入を行うことができます。

カスタム検索エンジンレイアウトタブ

こうした各設置方法と動作については以下で確認することができるようにしてあります。
実際に動かしてご検討されるといいと思います。

No	レイアウト	動作例
1	オーバーレイ	1-0
2	２ページ	2-0
3	全幅	3-0
4	２列	4-0
5	コンパクト	5-0
6	結果のみ	6-0
7	Goolgeがホスト	7-0

また、WordPressを利用したカスタム検索エンジンを利用した検索ボックスの設置方法は以下でご紹介しています。

WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法

オートコンプリートとプロモーション表示

カスタム検索エンジンのカスタマイズ

カスタム検索エンジンでは「検索向けAdSense」をAdSense管理ページで編集する場合と比べて、
はるかに細かなカスタマイズを行うことができます。

カスタム検索エンジンのカスタマイズの詳細については以下でご紹介しています。
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法

オートコンプリートの登録

カスタム検索エンジンのカスタマイズの一環として、
オートコンプリートによるキーワードサジェスト表示を行う
キーワードを登録する方法にXMLによるインポートが行えます。

Google™AdSenseサイト内検索(カスタム検索エンジンv2)にオートコンプリート設定しました

XMLによるカスタマイズ例

カスタム検索エンジンのカスタマイズの一環として、
XMLによるデータのエクスポートとインポート機能がありますが、
そのカスタム検索エンジンによるXMLデータの登録方法について以下でご紹介しています。

Google™サイト内検索(カスタム検索エンジンv2)で類義語をXMLで定義する
 Google™サイト内検索(カスタム検索エンジンv2)でオートコンプリートをXMLで定義する
 Google™サイト内検索(カスタム検索エンジンv2)でプロモーションをXMLで定義する

XMLファイルを編集する過程ではExcelを利用すると便利です。
Google™サイト内検索(カスタム検索エンジンv2)のXMLファイルをExcelで作成・編集する

カスタム検索エンジンの複数設置時の競合動作

カスタム検索エンジンでは様々なレイアウト動作を選択して導入することができますが、
それぞれの異なったレイアウト同士を設置した場合には、意図した動作をしない場合もあります。

そうした競合動作についても以下で実際に確認することができるようにしています。
実際の動作を確認し検討されてはいかがでしょうか。
１ページ上に複数のサイト内検索(カスタム検索エンジンv2)を配置する方法
 １ページ上に複数のGoogle™AdSense検索向けAdSenseユニットを配置する方法

テーマのスタイルが同一の場合

以下の例では、カスタム検索エンジンのテーマが未選択（デフォルトの銀色ボタン）の状態で複数設置しています。

2014/02/20：追記訂正

~~テーマが一致している場合には概ね想定した動作をします。~~
再度個々に確認しておりましたが、テーマが同一かつ、レイアウトが同一の場合には複数設置が可能という印象です。

オーバーレイの表示が競合する場合に、
正しくポップアップされない(全幅表示)場合が多く見受けられました。

複数設置の際には、テーマとレイアウトを揃えることをお勧めします。

テーマが未選択（デフォルトの銀色ボタン）
テーマ「未設定」デザイン

No	競合相手No	1	2	3	4	5	6	7
	レイアウト	1	2	3	4	5	6	7
1	オーバーレイ	1-1	1-2	1-3	1-4	1-5	1-6	1-7
2	２ページ	2-1	2-2	2-3	2-4	2-5	2-6	2-7
3	全幅	3-1	3-2	3-3	3-4	3-5	3-6	3-7
4	２列	4-1	4-2	4-3	4-4	4-5	4-6	4-7
5	コンパクト	5-1	5-2	5-3	5-4	5-5	5-6	5-7
6	結果のみ	6-1	6-2	6-3	6-4	6-5	6-6	6-7
7	Goolgeがホスト	7-1	7-2	7-3	7-4	7-5	7-6	7-7

テーマのスタイルが不一致の場合（デフォルトとデフォルト以外）

しかし以下の例では、カスタム検索エンジンのテーマが
デフォルト（未選択の青色ボタン）とグリーンスカイを選択し複数設置しています。
テーマが不一致の場合にはデザインが乱れた表示になってしまいます。

aN: デフォルト（未選択の青色ボタン）
テーマ「デフォルト」デザイン
bN: グリーンスカイ
テーマ「グリーンスカイ」デザイン

No	競合相手No	b1	b2	b3	b4	b5	b6	b7
	レイアウト	b1	b2	b3	b4	b5	b6	b7
a1	オーバーレイ	a1-b1	a1-b2	a1-b3	a1-b4	a1-b5	a1-b6	a1-b7
a2	２ページ	a2-b1	a2-b2	a2-b3	a2-b4	a2-b5	a2-b6	a2-b7
a3	全幅	a3-b1	a3-b2	a3-b3	a3-b4	a3-b5	a3-b6	a3-b7
a4	２列	a4-b1	a4-b2	a4-b3	a4-b4	a4-b5	a4-b6	a4-b7
a5	コンパクト	a5-b1	a5-b2	a5-b3	a5-b4	a5-b5	a5-b6	a5-b7
a6	結果のみ	a6-b1	a6-b2	a6-b3	a6-b4	a6-b5	a6-b6	a6-b7
a7	Goolgeがホスト	a7-b1	a7-b2	a7-b3	a7-b4	a7-b5	a7-b6	a7-b7

テーマのスタイルが不一致の場合（デフォルト以外とデフォルト以外）

cN: バブルガム（デフォルト以外のスタイル）
テーマ「バブルガム」デザイン
bN: グリーンスカイ（デフォルト以外のスタイル）
テーマ「グリーンスカイ」デザイン

No	競合相手No	b1	b2	b3	b4	b5	b6	b7
	レイアウト	b1	b2	b3	b4	b5	b6	b7
c1	オーバーレイ	c1-b1	c1-b2	c1-b3	c1-b4	c1-b5	c1-b6	c1-b7
c2	２ページ	c2-b1	c2-b2	c2-b3	c2-b4	c2-b5	c2-b6	c2-b7
c3	全幅	c3-b1	c3-b2	c3-b3	c3-b4	c3-b5	c3-b6	c3-b7
c4	２列	c4-b1	c4-b2	c4-b3	c4-b4	c4-b5	c4-b6	c4-b7
c5	コンパクト	c5-b1	c5-b2	c5-b3	c5-b4	c5-b5	c5-b6	c5-b7
c6	結果のみ	c6-b1	c6-b2	c6-b3	c6-b4	c6-b5	c6-b6	c6-b7
c7	Goolgeがホスト	c7-b1	c7-b2	c7-b3	c7-b4	c7-b5	c7-b6	c7-b7

検索向けAdSenseとカスタム検索エンジンの違いについて

検索向けAdSenseとカスタム検索エンジンの違いは、
検索向けAdSense接した時には、ん？どう違うんだこれ・・・と困惑しましたが、結局のところは同じものです。

設定する画面が別々で検索向けAdSenseには広告に関する機能が追加されていたりします。
しかし、検索向けAdSenseもカスタム検索エンジンとして、
さらにカスタマイズが行える点は意外と気づかれていない部分かもしれません。

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

カスタム検索エンジン(V1コード)

カスタム検索エンジン（検索向けAdSenseも同じ）にはV1コードという設置方法も用意されています。
通常はV2コードにて導入するのが一般的ですが、
JavaScriptに長けている方などにはCustom Search Element を直接操作して導入することで、
より自由度の高い設置方法が選択できます。

V1コードを利用した設置方法については、以下でご紹介しています。
WordPressにGoogle™サイト内検索(カスタム検索エンジンv1)を設置する方法

さいごに

さて、さまざまな設置方法を利用して、Googleの検索ボックスの設置方法が選択できますが、
みなさんはどの設置方法を選択されますか？

面倒くさくてついついV2コードや検索向けAdSenseにてサクッと設置してしまいがちではありますが、
Google™AdSense検索向けAdSense広告(カスタム検索エンジン)と検索結果ページへの広告表示について　で
ご紹介したようにAdSenseとうまく絡めることで、検索結果のページも十分に活用ができると思います。

お時間のある時にでもじっくりとカスタマイズに取り組んでみてはいかがでしょうか。

その時の為にでも、はてブでもいかがでしょうか。

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