頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

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

結果のみ

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

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

表示の例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17_検索クエリの設定

検索クエリの設定

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

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

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

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

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

19_検索クエリの設定変更

検索クエリの設定変更

結果のみスクリプト例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(注意事項)

この手法を利用するとカスタム検索エンジンに対して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 のコードをツールバーなどの何らかのソフトウェア アプリケーションに組み込むことも許可されません。

 

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

さいごに

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

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

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

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

参考

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

Results only



Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

プロモーション(btm)

Google or AdMax Promotion (it)

 - Google, 検索ボックス

  関連記事