Googleカスタム検索の検索結果をサイト内に表示する方法は?

      2017/03/13

定期的にサイトのデザインや機能を見直しているんですが、WordPressの機能で設置できる「サイト内検索」の使い勝手があまり良くないことに今さら気づきました。。

というのも、WordPressだけの話ではありませんが、Googleの検索機能と違い、一字一句合ってないと検索結果に表示されないからです。

Googleカスタム検索のメリット

ということで、「Googleカスタム検索」に変更してみたんですが、やっとGoogleカスタム検索のメリットに気づきました。

それは、入力する文字が一字一句合っていなくても検索できることです。

例えば、Amazon関連の記事を探したい時、「amazn」で検索してしまうと、通常の検索機能なら検索結果に表示されません。

でも、Googleカスタム検索なら、Googleの検索エンジンを利用しているため、「amazn」でも「amzon」でも検索することができます

Googleアドセンスなどと同様に、自分で設置する必要がありますが、ユーザビリティを高めるためにも、サイト内検索はGoogleカスタム検索に変更した方がいいと思います。

Googleカスタム検索の設置方法

では、ここから、Googleカスタム検索をサイトに設置する方法をご紹介します。

デザインによって設置方法が若干違いますが、今回は、「2ページ」というデザインを選んだ場合の設置方法です。

Googleカスタム検索を作成する

まず、Googleカスタム検索のページにアクセスし、画面右上の「カスタム検索エンジンの作成」をクリックします。

 

  1. 自分のサイトのドメインと「/*」を入力
  2. 言語を「日本語」に変更

その後、「作成」をクリック。

 

これでカスタム検索エンジンの作成が完了したので、「コントロールパネル」をクリックします。

カスタム検索エンジンの設定変更

「基本」タブでは、「画像検索」をオンにするだけでいいと思います。

 

次は、「広告設定」のタブ。「検索エンジンの収益化」をオンにします。

 

オンにすると、自動でGoogleアドセンスのIDと関連付けられます

デザイン変更

画面左側のメニューの中にある「デザイン」をクリックし、「2ページ」を選択、「保存してコードを取得」をクリックします。

検索ボックスの設置

「検索結果の詳細」をクリックし、検索結果を表示するページのURLを入力し、左側のコードをすべてコピーします。

POINT
  1. 入力するURLは、自分のサイトのトップページのURLではありません(ここでつまづきました…笑)
  2. 検索結果を表示するページのURL(スラッグ)は、なんでもいいですが、自分のサイトでまだ使われていないURLにする必要があります(後述します)
  3. 入力するURLの最後に「/」は必要ありません。(サイトの設定によっては必要な場合もあるかもしれません)

 

検索ボックスを設置したい場所に、コピーしたコードを貼り付けます。

「ウィジェット」で追加してもOKですが、自分のサイトの中に「searchform.php」がある場合は、その中のコードと置き換えてください。

▼当サイトはこんな感じになりました。

検索結果を表示するページを作成する

テーマの中にある「page.php」を複製し、ファイル名を任意の名前に変更。(search.php以外)

page.phpを複製したファイルの先頭に、下記のコードを追加します。「Templete Name」は任意の名前に変更可。

<?php
 /*
 Template Name: 検索結果
 */
?>

 

Googleカスタム検索の画面に戻り、「次へ:検索結果コードの取得」をクリック。

先程と違うコードが表示されるので、コードをすべてコピーします。

 

page.phpを複製したファイルの中にコピーしたコードを貼り付けます。

テーマによって貼り付ける場所が違いますが、<main>〜</main>の中に貼り付ければいいかと思います。

 

  1. WordPressの管理画面内で「固定ページ」を新規追加
  2. タイトルを入力
  3. パーマリンク(URL)を「検索結果の詳細」で入力したものと同じにする
  4. 「Templete Name」に入力した名前(今回の例では「検索結果」になる)のテンプレートを選択

その後、「公開」します。(「順序」は任意で大きい数字にしましょう)

動作確認

これでGoogleカスタム検索を設置できたので、実際に確かめてみましょう。

 

▼「amazn」と入力ミスしたまま検索。

 

▼しっかりと「amazon」というキーワードで検索結果が表示されていることがわかります。

検索ボックスの表示がおかしい場合

当サイトだけかもしれませんが、Googleカスタム検索の検索ボックスの表示がおかしかったため、下記のコードをスタイルシートに追加しました。

/* Googleカスタム検索入力前 */
td#gs_tti50.gsib_a {
 padding: 0 8px;
}
/* Googleカスタム検索入力後 */
td#gs_tti51.gsib_a {
 padding: 0 8px;
}
/* 記事タイトル高さ修正 */
.gs-title {
 height: 1.4em !important;
}

Googleアナリティクスとの連携方法

必ずやらなければいけないことではありませんが、

  • どんなワードで検索されているか
  • どのくらいサイト内検索をされているか

などのデータを収集するために、Googleアナリティクスと連携することをおすすめします。

連携方法はとても簡単で、

  1. Googleアナリティクス管理画面左下の「管理」
  2. ビューの設定

と進み、サイト内検索のトラッキングを「オン」にし、クエリパラメータをコード取得時のクエリと同じにするだけです。(デフォルトでは「q」)

まとめ

以上、Googleカスタム検索をサイト内に設置する方法でした!

普通の検索機能を使っている方は、ユーザービリティを高めるためにも、設置してみてはいかがでしょうか?

(`・ω・´)ゞ

カテゴリー WordPressカスタマイズ

注目 【dマガジン】初回31日間無料で180誌以上の雑誌が読み放題!

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

注目 失敗なし!au・docomoからmineo(マイネオ)へのMNP方法!

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人:

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!

コメントを残す

CAPTCHA