検索エンジン広告をサイト内検索として設置する方法

ブログを運営する中で調べたこと・やってみたことシリーズ
今回は「ブログの中にGoogleAdsenseの検索エンジン広告を設置したい」というもの。

と思って、実際にサイドバーに追加してみたので、実施手順についてまとめました。
※PCでの作業想定です。

GoogleAdsenseの検索エンジン広告をサイト内検索で利用する方法

今回やりたいことは

「GoogleAdseneの検索エンジン広告をサイト内検索として設置する」

ということ。

イメージはこんな感じ。

Cocoonだと、サイト内検索のウィジットが用意されているのですが、検索エンジン広告でも同じことはできそうです。

ただし、前提条件として、GoogleAdsenseで「検索エンジン広告が利用できるようになっている」必要があります。

利用できるかどうかは、Adseのページで分かります。
「検索エンジン」というユニットが表示されていれば使えます。

解放条件は公開されていないのですが、私のサイトも気づいたら出るようになっていました。

手順

ざっくり手順としては、3STEP。

GoogleAdsenseで広告枠を作成→検索エンジンをカスタマイズ→サイトに検索ボックスを埋め込むという流れです。

GoogleAdseneで検索エンジン広告を作成

まずはAdsenseにアクセスして、検索エンジン広告を作ります。

サイドメニューの[広告]→[広告ユニットごと]タブ→[検索エンジン]を順にクリックして開きます。

検索エンジンの広告ユニットの編集画面が開くので、設定していきます。

①広告ユニット名を入力して、②検索の対象：「選択するサイトのみ」を選択した後、③[作成]ボタンを押します。

「広告が作成しました」と表示されたら、成功。

一応この時点でコードをサイトに埋め込めば、サイト内検索はできるようになっています。

例えばサイバーに検索窓を設置したときはこんな感じ。

そのまま設置するとサイトになじみにくかったり検索結果が見にくいので、カスタムしていきます。

検索ボックスをカスタムする

検索ボックスをカスタムします。

カスタムは、プログラム可能な検索のコントロールパネル「Programmable Search」から行うことができます。

コントロールパネルを開く

まず、コントロールパネルを開きましょう。

検索エンジンユニットの作成完了画面の「プログラム可能な検索のコントロールパネル」を押します。

作成完了画面を閉じてしまっている場合は、Adsenseの広告ユニットの一覧から、編集したい検索エンジン広告のユニット名の[編集ボタン]を押します。

「エディタに移動」を押します。

コントロールパネルが開きます。

環境によってはデザインが違うこっちの新しいデザインの画面がでてくるかもしれません。

「以前のコントロールパネルに戻る」を押すと、デザインが戻ると思います。

どちらでもメニュー項目は同じものがあるんですが、新しいコントロールパネルから元のコントロールパネルを呼び出しているだけのようなので、元のコントロールパネルを使うのでいいかなと思います。

検索ボックスのデザインを編集

編集する検索ボックスのデザインを編集していきます。

ここでは最低限のレイアウト変更とGoogleロゴのオフのみを行っていますが、検索ボックスやボタンの色も変更してもOKです。

まず、レイアウトを変更します。

コントロールパネルのサイドメニューから「デザイン」を押します。

レイアウトタブでレイアウトを「２＋２」に変更して、[保存]ボタンを押します。

つづいて、Googleロゴをオフにします。

カスタムタブの「Googleブランド表示」を選んで、「向こうにする」を選んで[保存]ボタンを押します。

検索ボックスと検索結果のコードを取得する

検索ボックスと検索結果のコードを取得します。

コントロールパネルの[設定]を開き、[コードを取得]を押します。

[検索結果の詳細]を開きます。

検索結果ページのURLを指定して、[保存]ボタンを押す

検索ボックスコードのコード欄の内容をコピーして、メモ帳などに貼り付けて保管しておきます。

続いて、[検索結果コードの取得]ボタンを押して、検索結果コードの画面を開き、同じようにメモ帳などに貼り付けて保管しておきます。

これで、コントロールパネルでの設定は終わりです。

サイトに埋め込む

続いてサイトに埋め込んでいきます。

WorPressで作業します。まず結果ページから作っていきましょう。

固定ページを作成する。

固定ページで検索結果ページを作ります。

WordPressの画面で、新規固定ページ作成画面を開きます。

カスタムHTMLボックスを作って、「検索結果コードの取得」で保管していたコードを貼り付けます。

検索結果ページに、検索ボックスと検索結果にする場合は、貼り付けたコードの2行目の部分を変更します。

固定ページのURLは、コントロールパネルで検索結果のURLに設定した値と同じ値を設定します。

設定できたら、固定ページを公開します。

これで検索結果側のページは終わり。
続いて、検索ボックス側の設定をします。

検索ボックスを設置

検索ボックスを置きたいところに、カスタムHTMLを設置します。

今回は、サイドバーに置きたいので、サイドバーにWordPressのカスタムHTMLウィジット置いていきます。

「検索ボックス コードの取得」でコピーしておいたコードを貼り付けます。
必要に応じて、表示設定を調整して、[完了]ボタンを押します。

これで、検索ボックス側の設定も終わりです。

サイドバーに検索ボックスができて、検索してみると結果ページは別ページに飛ぶようになるはずです。

まとめ