最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
みなさんサイト内検索は使ってますか?
サイト内検索といえばヘッダーやサイドメニューの中にチョロっと設置されているような脇役的存在であり、
さらにサイト内検索サービスの、Google Site Searchがサービスを終了し、続いてYahoo!検索 カスタムサーチも2019年3月にサービスが終了となるなど、一見衰退の一途をたどってるかのよう。。
ですが、そんな流れとは裏腹に最近サイト内検索を大胆に使ったWEBサイトを目にするようになりました!
そこで今回は今改めてサイト内検索に注目し、簡単に実装出来る「Googleカスタム検索」について、
メリットやデメリット、設置方法やカスタマイズ方法などを解説していきたいと思います。
2018年のグッドデザイン賞に近畿大学のホームページが選ばれました。
サイトを見てある事に気がつきます。
「グローバルナビがない。そして検索BOXが大きい」
※正確にはグロナビは右下にハンバーガー状態でいました。
デザインの背景には、膨大なページ数の整理とユーザーが求める情報を的確に提供するというコンセプトがあったようです。
このサイトを見た時に、「いちいちメニューから探すの面倒くさいな〜」なんて思っているであろうミレニアル世代の学生が、スマホ片手にサイト内検索をしている姿が頭に浮かびました。
なんでも検索する時代。ナビゲーションメニューの代わりにサイト内検索を使うシーンは今後増えていくように思います。
グローバルナビゲーションについては下記の記事でも解説しています。
サイト内検索に可能性を感じたところで、早速ですが今回はGoogleカスタム検索を設置してみましょう。
今回はSEO情報、WEB制作のナレッジがたんまりと溜まってきたペコプラのコラムページに設置していきたいと思います!
ところでGoogleカスタム検索って何?という方の為に簡単に説明しますと、
Googleカスタム検索とは、Googleの検索エンジンを使いWEBサイト内検索が行える、Googleが提供している無料のサービスです。
このサービスを利用するメリットとしては大きく2つあります。
Googleの検索エンジンを使用するため、普段ググる時同様の柔軟な検索が可能になります。
例えばWordpressにデフォルトで使える、ウィジェットに設置するサイト内検索では、「アナリティクス」と検索をすると「Analytics」や「アナリティクス」はひっかかりませんが、Googleカスタム検索では検索結果に表示されます。
ふたつめのメリットは、Googleアナリティクスと連動しているという事。
アナリティクスで設定をしていれば、Googleカスタム検索を使ってサイト内検索を行ったユーザーデータを確認する事ができます。
これによりより細かいサイト分析でき、SEO対策にも生かす事ができます。
これはもうただ一つ。広告が表示されてしまう点です。
完成型はこんな感じです。
今回の設置の要件は以下2点です
Googleカスタム検索の設置には、Googleアカウントが必要です。もしアカウントを持っていない場合は事前に取得しておきましょう。
コードが生成されるのでコピーし、PHPファイルの表示させたいところにペーストすれば完了です!
こんな感じで表示されました!
って、ダサい….
しかもデフォルトだと検索結果がオーバーレイで出てきます。
ということで要件を満たすようにカスタマイズしていきましょう
※検索結果用のページは事前に作成しておいてください
wordpressであれば固定ページで新規に作成し、専用テンプレートの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"> 〜
検索結果画面を別ページに表示させることが出来ましたか?
最後にデザインを整えていきましょう!
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カスタム検索について、弊社サイトを例に実装の手順をまとめました。
今後サイト内検索はどうなっていくのか、制作側としてユーザーへの快適なナビゲーションとなるような設計が出来るかなど、動向を見極めながらうまく使っていきたいと思います。