サイト内に組み込む形でGoogleカスタム検索を設置する方法

当サイトなどでは以下のように、サイト内検索用に「Googleカスタム検索」を利用しています。

これまで、キーワードで検索した場合は、以下のような検索結果が別窓（別タブ）で開かれていました。

ただ先日、「サイト内に組み込んで利用することが出来るよ」と教えていただいたので、やってみたら何かと便利でした。

実物は以下のように、「サイトのメインカラムにGoogleカスタム検索結果を組み込む形」で利用することができます。

自分のサイト内に検索結果出るのは、難しいこと抜きでなんかいい。

ということで今回は、その「Googleカスタム検索をWordPressに組み込んで設置する方法」を自分用のメモ目的含めて紹介です。

主な手順

今回のカスタム検索ボックスの設置は、細かな設定を行わないのであれば、それほど難しくはありません。

主な手順はこちら。

1. カスタム検索エンジンの追加
2. カスタム検索エンジンの編集
3. 検索ボックス用のコードの貼り付け
4. 検索結果用のコードの貼り付け
5. 検索結果ページのURLを指定する

簡単に説明すると、「カスタム検索用のタグ」を2ヶ所貼り付けて、「検索結果ページのURL」を指定するといった感じです。

カスタム検索エンジンの追加

まずは、Googleにログインした状態でカスタム検索 – 検索エンジンの編集にアクセスします。

ログイン - Google アカウント

cse.google.co.jp

ページを移動したら「追加」ボタンを押します。

以下の情報を入力して「作成」ボタンを押します。

1. 検索するサイト：カスタム検索を利用するURLを入力
2. 言語：サイト言語を入力（日本語サイトの場合は日本語）
3. 検索エンジンの名前：識別しやすい任意の名前を入力

検索エンジンが作成されると、以下のような画面が表示されます。

通常のカスタム検索であれば、このコードを取得するだけです。

ただ「サイト組み込み式の検索エンジン」を利用するには、このあとちょっとした設定が必要になります。

カスタム検索エンジンの編集

設定を行うには「検索エンジンの編集」メニューから「デザイン」項目を選択してください。

「レイアウト」設定画面が表示されるので「2ページ」を選択し「保存してコードを取得」ボタンを押してください。

検索ボックス用のコードの貼り付け

すると、以下のような検索ボックス用のコードが表示されるのでコピーします。

これをWordPressのウィジェット設定画面（外観→ウィジェット）から、サイドバーはエリア等に「カスタム HTML」ウィジェットを利用して設置します。

検索結果用のコードの貼り付け

次に、検索結果用のコードを取得するために「次へ：検索結果コードの取得」ボタンを押します。

検索結果コードの取得

検索結果用のコードをコピーしておきます。

固定ページにコードを貼り付け

次に、WordPress側で検索結果用の「固定ページ」を作成します。

僕は以下のような手順で作成しました。

1. 固定ページタイトルに「Google検索結果」と入力
2. 「フォーマット」から「カスタム HTML」ブロックを設置
3. 検索結果用のコードを貼り付ける
4. パーマリンクのスラッグを「search-results」として公開

旧エディターの場合

旧エディターを利用している場合は、ソースコードに貼り付けるだけとかでもOKです。

検索結果ページのURLを指定する

次にGoogle側で「検索結果ページの設定」をする必要があります。

「検索結果の詳細」ボタンを押してください。

ダイアログが表示されるので、先程作成した「固定ページのURL」を入力して「保存」ボタンを押します。

これですべての設定が完了しました。

動作確認

今回、WordPressサイトのサイドバーに「カスタム検索ボックス」を表示させました。

キーワードを入力して検索を行うと、

以下のように自分のサイト内に組み込まれる形で、「作成した固定ページ」に検索結果が表示されます。

この時点で動作をチェックして、検索結果ページに表示させたくないものはCSSで非表示にする必要があるかもしれません。
以下は投稿IDを含めたCSSの一例ですが、必要なコードはテーマやプラグイン等によって変わってくると思います。

まとめ

こんな感じで、組み込み検索を設置することが可能です。

個人的には概ね満足。

良かった点

今回行った「組み込み式のGoogleカスタム検索」の利点はこちらかと思います。

• 同一ドメイン内でカスタム検索を使える
• 自分のサイトと検索結果にデザインの統一感が出る
• CSSで検索結果のスタイルの変更も可能（※ポリシー遵守）
• 検索がどのくらい利用されているかアクセス解析からある程度分かる

この、「検索結果ページをアクセス解析出来る」というのは結構ありがたい。

例えば、僕の他の運営サイトの場合、毎日200～300回ぐらい検索されているというのがざっくりと分かります。

全体の利用状況からしても、「全サイト内で8番目に利用されているんページなんだな」と分かったりするのも今後の活用方針を決める上での参考になるかと思います。

こういったことから「ある程度需要があるんだな」ということは分かります。

難点

反面、難点はこちらかなと。

• タグを2ヶ所貼り付ける必要があり通常よりは多少設置は面倒くさい
• 不要な要素を非表示にしたりとCSSをいじる必要性があるかも
• 収益化を無効にしても広告は結構出る（※これは組み込み式に限らないけど）

「検索結果ページ上の余計なものをCSSで消す」というのがちょっとハードルがあるかも。

いずれにせよ使い方次第

で、結局のところサイトに合わせた使い方次第になっちゃうかと思います。

検索結果で別窓が開いてGoogleサイトに行っちゃうのがなぁ…

検索結果ページも自分のサイトに合わせたものを表示したい。

検索結果を自分のサイトに合わせてスタイリングしたい。

なんて人には、良い機能かと思います。

サイト カスタム検索 – 検索エンジンの編集

カスタム検索を試してみるならこちら。