サイト内検索をGoogleカスタム検索にしてAdSenseと関連付ける

先日、「WordPressのサイト内検索にGoogleのカスタム検索を使う方法」という記事を書きましたが、Google主催のAdSense実践セミナーでカスタム検索とAdSenseIDを関連付ける事ができる事を学んだので実践してみます。

正直クリックはあまり期待できないと思いますが、サイト内検索としてGoogle検索を利用するのであれば、AdSenseと関連付けた方が良いと思います。

Googleカスタム検索とAdSenseのIDを関連付ける方法

»Googleカスタム検索にアクセス

カスタム検索エンジンの作成をクリックします。事前にAdSenseアカウントでGoogleにログインしておくと良いかもしれません。

カスタム検索エンジンを設置するサイト名やURLなどを入力します。

デザインを選択します。後ほど変更する事も可能ですので、この時点ではデフォルトで良いと思います。

コードが発行されますが、おそらくこれをそのまま貼る人はいないと思うので、先にAdSenseとの連携を行いましょう。

AdSenseに登録してあるメールアドレスや郵便番号を入力します。分からない場合にはAdSenseの管理画面に行きましょう。

アカウント設定の個人設定に登録情報が記載されています。これを先ほどの画面で入力します。

入力後、送信をクリックして、この画面が表示されればカスタム検索とAdSenseとの連携作業は完了です。次にAdSenseの管理画面で連携の許可をします。

カスタム検索とAdSenseの関連付け作業を行った後にAdSenseの管理画面にログインするとこのような文章が表示されますので、「こちら」をクリックします。

アクセスを有効にするをクリックすれば、作業は全て完了となります。

カスタム検索エンジンのデザイン変更

カスタム検索エンジンのトップページにある「既存の検索エンジンを管理する」をクリックします。

デザインを変更したい検索エンジンのコントロールパネルをクリックします。

次のページで、サイドバーの「デザイン」を選択すると、デザイン変更画面になります。

カスタム検索エンジンを設置する場所にあわせてレイアウトを選択してください。上記の選択にすると、Google仕様の検索結果が別ページで表示される形になります。

表示されたコードを検索窓を設置したい場所に貼り付ければ作業は全て完了です。

個人的には、検索結果がサイト内に表示されるか、Google仕様で表示されるかのどちらかが良いと思います。画面が切り替わらず、窓の下に検索結果が表示される形でも良いのですが、あまり好きではありません。

サイト内のページとして検索結果を表示する

※検索向けAdSenseの検索結果ページには、コンテンツ向けAdSenseを設置してはならないという制限がありますので、サイト内ページとして表示する場合はご注意ください。(検索向けAdSenseを設置する際の注意点

サイト内検索結果は、サイト内のページとして表示したいという方も多いと思います。当サイトもそのデザインを使用しています。

2ページを選択すると、検索結果を好きなページに表示する事が出来ます。

検索結果を表示したいページのURLを入力し、上のコードを検索窓を設置したい場所に貼り、下のコードを検索結果を表示したいページに貼り付けます。サイズは自動的にそのページの横幅の100%に広がります。コード内の100%の数字を変更すると横幅が調整できます。

当サイトではこの様な感じになります。悪くないですね。

ちなみに当サイトはWordPressで構築しており、検索結果ページを固定ページとして作成し、検索窓をウィジェットとして挿入しています。

検索窓や検索結果をCSSで修正する

検索窓や検索結果ページはCSSで調整する事が可能です。知識のある人は、Google ChromeのデベロッパーツールやFirefoxのFirebugで出力されたHTMLソースを見ればすぐに分かると思います。

CSSでtableやtdなどの大きなくくりで指定している場合、窓や検索結果の表示が崩れる可能性がありますので、調整した方が良いでしょう。この部分を修正するのはNGってことないですよね?コードをいじるわけではなくCSSの調整なのでOKですよね・・・

検索窓

検索窓はこのようなHTMLになっています。

<div id="cse-search-form">
<div class="gsc-control-searchbox-only gsc-control-searchbox-only-ja">
<td class="gsc-input">
<div class="gsc-input-box " id="gsc-iw-id1">
<table class="gstl_0 ">
<td class="gsib_a">
<td class="gsc-search-button">
<td class="gsc-clear-button">

なぜこんな複雑な作りにしているのかわかりませんが、divとtableが大量に組み込まれています。

「gsc-input-boxが検索窓」、「gsib_aが入力部分」、「gsc-search-buttonがボタン」ですので、このあたりをCSSで調整すればデザインが整えられると思います。

検索結果ページ

この部分は、検索窓と同じ作りになっています。

これが検索結果のHTMLです。

「gsc-table-resultが1つのタイトル、スニペット、URLの全体」です。「gs-titleがタイトル」、「gs-bidi-start-align gs-snippetがスニペット」、「gs-bidi-start-align gs-visibleUrl gs-visibleUrl-longがURL」です。

この部分はかなり細かい作りになっていますので、デベロッパーツールで確認する事をオススメします。

サイト内検索で広告をクリックする人はあまりいないですし、クリック単価が低いので大した収益にはならないのですが、デメリットが無いので関連付けておいて損はないと思います。サイト内検索ではなくGoogle検索にすれば良いという話もあるのですが、一般的なサイトでGoogle検索を利用したいと感じる人なんてほとんどいませんよね。

関連記事

タグ


公開日:2011年9月16日
最終更新日:2012年3月27日

コメント/トラックバック(0) |

カテゴリー:アフィリエイト

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

※スパムと判断したコメントは削除しています。

このページの先頭へ