このサイトは、これまでWordpressデフォルトの検索機能を使っていました。
ただ、Search Meter（検索キーワード記録）プラグインなどで見ていると、最近検索数も多くなってきて、負荷も高くなってきているのではないかと思います。なので、検索機能は、Googleにアウトソーシングでまかせてしまうことにしました。
ついでに、アドセンスから、検索ボックスを作成することで、広告つきのものを作成してみたいと思います。
今回作成するのは、こんなやつ。
検索結果は以下のようになります。
ということで、今回は、アドセンスのカスタム検索を設置する方法の紹介です。
photo by Jon Russell
目次
主な手順
アドセンスのカスタム検索を設置するには、主に以下の手順を行います。
- Google AdSenseに登録＆ログイン
- Google AdSenseから「カスタム検索エンジン」の設定
- カスタム検索エンジンのコードをサイトに貼り付ける
- CSSでスタイルを整える
アドセンスに登録＆ログイン
まずは、アドセンスのカスタム検索を作成するには、AdSenseに登録してある必要があります。
以下では、アドセンスには登録してあるということで説明していきます。
まずは、AdSenseからログインして管理画面に入ってください。
検索広告の設定
管理画面のメニューバーから「広告の設定」をクリックしてください。
すると以下のような画面が表示されると思うので、サイドメニューから「検索」を選択します。
以下のように表示されるので、「新しいカスタム検索エンジン」ボタンをクリックします。
ボタンを押すと、以下のような設定画面にページ遷移します。
以下で、1つ1つ詳しく説明していきます。
基本設定
まずは、基本となる情報を入力します。
通常サイトの場合、以下のように入力するとお勧めです。
名前
後で簡単に見つけて設定を編集できるよう、検索ボックスに覚えやすくわかりやすい名前をつけます。この名前は外部に表示されないため、自分で管理しやすいように設定します。
アドセンス上で設定を識別するための名前を入力してください（なんでもOK）
検索の対象
この検索ボックスでユーザーが検索可能なウェブサイトを選択します。WEB上のすべてのサイトを検索できるように設定するか、特定のウェブサイトだけを検索できるように設定することができます。
今回は、サイト内検索なので、以下のように「選択するサイトのみ」を選択後、URLを指定して特定のウェブサイトだけを検索します。
入力ボックスに複数のURLを指定することで、複数サイトを横断検索できる検索ボックスを作ることもできます。
キーワード
キーワードは、検索エンジンの検索結果に最も関連性の高い広告とページを表示する目的で使用されます。良いキーワードとは、検索エンジンのトピックや宣伝するページのコンテンツを説明する単語や短いフレーズです。
通常サイトの場合は、特にキーワードを設定する必要はないと思います。
詳しくは以下を参照してください。
参考 検索向け AdSense 用のキーワードを追加する – AdSense ヘルプ
セーフサーチ
Googleのセーフサーチでは、アダルトサイトや性的なコンテンツを含むサイトを識別し、検索結果に表示されないようにします。フィルターが100％確実であることを保証することはできませんが、GoogleのフィルタではGoogle独自の高度な技術を使用してキーワードやフレーズ、URL、Open Directoryのカテゴリを確認しています。
アダルトサイト運営でない限りは、「セーフサーチを使用する」をオンしておいた方が良いかと思います。
国または地域
検索ボックスで検索する際に、どの国のGoogle検索を使用するかを指定します。例えば、google.com、google.co.jp、google.frなどから検索結果を表示することができます。
サイトの対象者が日本人向けなら、「日本」にします。
サイトの言語
サイトの主要言語です。
主に日本語で書かれたサイトなら、日本語に設定します。
文字変換
検索エンジンで音訳を有効にした場合、サイトの訪問ユーザーが別の言語のクエリを英語の発音で表現して入力すると、そのクエリが意図した言語に変換して表示されます。
音訳を有効にした場合の設定です。特に不要なので、何も選択しません。
詳しくは以下を参照してください。
人気クエリ
「人気クエリを使用」にチェックを入れると、アドセンス検索向け広告ユニットで検索された結果に応じて、よく利用されるキーワードリンクのタグがデフォルトで10個表示されます。（表示数は変更することができます。）
後からでも追加することができるので、最初は検索実績がたまるまで、オフにしておいても良いかと思います。（設定を変更した場合は、後から新たなコードを貼り付ける必要はあります。）
カスタムチャネル
カスタムチャネルを使用すると、希望の分類（サイズやページでの掲載位置など）で広告ユニットを組み合わせてまとめることができます。これによりカスタムチャネルごとにパフォーマンスをトラッキングできるほか、カスタムチャネルの設定で、広告主が広告のターゲットとして指定出来る広告プレースメントにすることもできます。
簡単に説明すると、カスタムチャネルを設定することで、広告ごとのパフォーマンスを計測できます。後からでも再設定できるので、作成時に必ず設定する必要はありません。
詳しい方法は以下を参照してください。
参考 カスタム チャネルで広告のパフォーマンスをトラッキングする – AdSense ヘルプ
検索ボックスのスタイル
検索ボックスの際は、サイトのデザインに合わせて変更してください。
通常の白地のページの場合は、デフォルトの設定でOKかと思います。
以下でも、デフォルトの設定にしてあることとして、スタイルの設定を行います。
広告スタイル
広告のデザインを選択します。
特にこだわりがない場合は、デフォルトのものを選択するのをお勧めします。
詳しくは以下を参照してください。
参考 テキスト広告スタイルの作成、編集、適用 – AdSense ヘルプ
カスタム検索
検索結果の表示方法を選択します。新しいタブに検索結果を表示する場合は「新しいウィンドウのGoogleページに表示」を選択します。
あとは、個別ロゴに関する設定です。検索結果ページのデザインにも、こだわりたい場合は、ロゴなどを設定します。
設定の確定
最後に「保存してコードを取得」ボタンを押せば、設定が保存され、コードが表示されます。
コードをサイトに貼り付ける
「保存してコードを取得」ボタンを押すと以下のようなダイアログが表示されます。「検索ボックスのコード」を選択してコピーします。
このコードは、アドセンスの設定画面からいつでも取得することができます。
WordPressでサイドバーに貼り付けるには
例えば、Wordpressでサイドバーなどに貼り付けるには、Wordpress管理画面から「外観→ウィジェット」を選択します。
テキストウィジェットを表示したい箇所にドロップします。
あとは、先程コピーしたコードを貼り付けて保存するだけです。
スタイルシートの設定
最後に、設定したコードの表示を確認します。
例えば、Wordpressにデフォルトで入っているTwenty Fifteenで確認すると以下のように表示されます。
これだと、入力ボックスと、検索ボタンが上下段違いになっています。例えば、これを1列に表示したければ、以下のようにスタイルシートをstyle.cssなどに記入します。
/**************************************
** Googleカスタム検索用
**************************************/
/*入力ボックス*/
#cse-search-box input[type="text"]{
width: calc(100% - 70px);
}
/*サブミットボタン*/
#cse-search-box input[type="submit"]{
width: 66px;
}
/*入力フォーム全体*/
#cse-search-box input {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 34px;
}すると、スタイルが適用されて以下のように表示されます。
テーマによっては、表示は変わってくるかもしれませんが、上記のCSSセレクターなどを参考に、好みのスタイルに変更してください。
動作確認
当サイトの場合は、以下のような検索ボックスになりました。
検索をすると、以下のように広告込みの検索結果が新しいタブに表示されます。
思い通りの動作になりました。
まとめ
今回の設定を行うことで、自サイトに手軽に広告つきのGoogleカスタム検索を設置することができます。
WordPressのデフォルト検索でも良いのですが、検索速度は格段にこちらの方が速いです。加えて、検索結果画面もGoogleライクでなじみがあるので、訪問者にも見やすいのではないかと思います。（広告は邪魔かもしれませんが）
アドセンスのカスタム検索は1ページに2つまで設定することができます。通常のアドセンスユニットよりも、表示回数はかなり少ないとは思いますが、多少の広告報酬アップも図れるのではないかと思います。
窓の杜のように表示順の選択肢を付ける方法はありますか？