サイト内検索を簡単に実装！Googleカスタム検索の設置方法とデザインのカスタマイズ

みなさんサイト内検索は使ってますか？
サイト内検索といえばヘッダーやサイドメニューの中にチョロっと設置されているような脇役的存在であり、
さらにサイト内検索サービスの、Google Site Searchがサービスを終了し、続いてYahoo!検索 カスタムサーチも2019年3月にサービスが終了となるなど、一見衰退の一途をたどってるかのよう。。

ですが、そんな流れとは裏腹に最近サイト内検索を大胆に使ったWEBサイトを目にするようになりました！

そこで今回は今改めてサイト内検索に注目し、簡単に実装出来る「Googleカスタム検索」について、
メリットやデメリット、設置方法やカスタマイズ方法などを解説していきたいと思います。

情報量の多いサイトのナビゲーション代わり

2018年のグッドデザイン賞に近畿大学のホームページが選ばれました。

サイトを見てある事に気がつきます。

「グローバルナビがない。そして検索BOXが大きい」

※正確にはグロナビは右下にハンバーガー状態でいました。

デザインの背景には、膨大なページ数の整理とユーザーが求める情報を的確に提供するというコンセプトがあったようです。

このサイトを見た時に、「いちいちメニューから探すの面倒くさいな〜」なんて思っているであろうミレニアル世代の学生が、スマホ片手にサイト内検索をしている姿が頭に浮かびました。

なんでも検索する時代。ナビゲーションメニューの代わりにサイト内検索を使うシーンは今後増えていくように思います。

グローバルナビゲーションについては下記の記事でも解説しています。

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

サイト内検索に可能性を感じたところで、早速ですが今回はGoogleカスタム検索を設置してみましょう。

今回はSEO情報、WEB制作のナレッジがたんまりと溜まってきたペコプラのコラムページに設置していきたいと思います！

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

ところでGoogleカスタム検索って何？という方の為に簡単に説明しますと、
Googleカスタム検索とは、Googleの検索エンジンを使いWEBサイト内検索が行える、Googleが提供している無料のサービスです。

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

このサービスを利用するメリットとしては大きく2つあります。

メリット1.Google検索エンジンと同様の検索が可能に

Googleの検索エンジンを使用するため、普段ググる時同様の柔軟な検索が可能になります。

例えばWordpressにデフォルトで使える、ウィジェットに設置するサイト内検索では、「アナリティクス」と検索をすると「Analytics」や「ｱﾅﾘﾃｨｸｽ」はひっかかりませんが、Googleカスタム検索では検索結果に表示されます。

メリット2.Googleアナリティクスと連動している

ふたつめのメリットは、Googleアナリティクスと連動しているという事。
アナリティクスで設定をしていれば、Googleカスタム検索を使ってサイト内検索を行ったユーザーデータを確認する事ができます。
これによりより細かいサイト分析でき、SEO対策にも生かす事ができます。

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

これはもうただ一つ。広告が表示されてしまう点です。

完成イメージ

完成型はこんな感じです。

今回の設置の要件は以下2点です

• 検索結果画面はサイト内で別ページに表示させる
• 検索BOXのデザインをオリジナルに

【準備】Googleアカウントはありますか？

Googleカスタム検索の設置には、Googleアカウントが必要です。もしアカウントを持っていない場合は事前に取得しておきましょう。

新規でGoogleアカウントを作成する

【設定】たったの3ステップ

1. Googleカスタム検索の設定画面を開いて「カスタム検索エンジンの作成」クリック
   
2. 必要箇所を入力(3箇所)
   • 「検索するサイト」に対象URLを入力
   • 言語を日本語に
   • 検索エンジン名を入力
3. 作成ボタン！

コードが生成されるのでコピーし、PHPファイルの表示させたいところにペーストすれば完了です！

こんな感じで表示されました！

って、ダサい….
しかもデフォルトだと検索結果がオーバーレイで出てきます。

Googleカスタム検索をカスタマイズ

ということで要件を満たすようにカスタマイズしていきましょう

検索結果画面はサイト内で別ページに表示させる

1. 「検索エンジンの編集」>「デザイン」>「レイアウト」>「2ページ」をクリックし、「保存してコードを取得」
   
2. 検索ボックスコードの取得検索結果の詳細」をクリックし、検索BOXを置くページのURLを入力し、コードを取得
3. 検索結果コードの取得「検索結果の詳細」をクリックし、検索結果を表示させるページのURLを入力、コードを取得

   ※検索結果用のページは事前に作成しておいてください
   wordpressであれば固定ページで新規に作成し、専用テンプレートのphpを作成します。

   

4. 取得したコードをそれぞれのページの表示させたい箇所にペースト！
   【検索ボックス：archiveのphpへ】

   〜
   <!--Googleカスタム検索ボックス-->
    <div class="slabel">SEOやWEB制作に関する情報を検索する</div><!--←見出しをつけてわかりやすく-->
    <script async src="https://cse.google.com/cse.js?cx=ここはご自身の検索エンジンIDを入力 "></script>
    <div class="gcse-searchbox-only"></div>
   <!--↑コラム一覧の前に設置する-->
   <ul class="archive_column">
   〜
   

   【検索結果：新規作成した固定ページ用のphpへ】

   〜
   <!--検索結果表示-->
   <script async src="https://cse.google.com/cse.js?cx=ご自身の検索エンジンIDを入力"></script>
    <div class="gcse-searchresults-only"></div>
   <!--Googleカスタム検索ボックス-->
    <div class="slabel">他のキーワードで検索する</div<!--←ここは見出しをつけてわかりやすく-->>
    <div class="gcse-searchbox-only"></div>
   <!--↑カテゴリ検索の前に設置する-->
    <div class="catenav archivecate">
   〜
   

検索BOXのデザインをオリジナルに

検索結果画面を別ページに表示させることが出来ましたか？

最後にデザインを整えていきましょう！

Googleカスタム検索のコントロールパネルの中にデザインをカスタマイズ出来る場所があるのですが、
線やボタンの色など基本的な部分しかカスタマイズ出来ないので、今回は自動生成されるタグを拾いCSSを上書きしていく方法で調整しました。

単純にCSSで上書きしただけですが、もし使えそうでしたらコピペで使ってください。
※出力されるタグが違う場合や、他のstyleとの兼ね合いでうまくいかない場合があります。サイトに合わせてご調整お願いします。

/*googleカスタム検索用*/
#___gcse_0,
#___gcse_1{
    margin-bottom: 50px;
}
.gsc-input-box {
    border: none!important;
}
td#gs_tti50,
div#___gcse_1{
    border: 5px solid #eee;
    padding: 20px 10px;
    border-radius: 30px;
}
.cse .gsc-search-button-v2,
.gsc-search-button-v2{
    padding: 18px 21px!important;
    border: none!important;
    border-radius: 0!important;
    -moz-border-radius:  0!important;
    -webkit-border-radius: 0!important;
    border-color: none!important;
    background-color: none!important;
    background-image: none!important;
    background: none!important;
    position: absolute;
    right: 55px;
    bottom: 3px
}
.under_3col_side .gsc-search-button-v2{
    right: 18px;
}
#___gcse_1 .gsc-search-button-v2{
    bottom: -17px;
}
.gsc-search-button-v2 svg {
    fill: #aaa!important;
    width: 25px;
    height: 25px;
}
td.gsc-search-button{
    position: relative;
    width: 0;
}
.slabel {
    padding-left: 20px;
    margin-bottom: 10px;
}
.gsc-search-box-tools .gsc-search-box .gsc-input{
    padding-right: 0;
}

完成です！
SEOの最新情報盛りだくさんの弊社コラムで、是非サイト内検索を使い必要な情報を探してみてください！

まとめ

サイト内検索を簡単に設置できるGoogleカスタム検索について、弊社サイトを例に実装の手順をまとめました。

今後サイト内検索はどうなっていくのか、制作側としてユーザーへの快適なナビゲーションとなるような設計が出来るかなど、動向を見極めながらうまく使っていきたいと思います。