漫画の地球儀

Googleカスタム検索のサイト内設置方法!【メリット、埋め込み、デザインカスタマイズ、画像検索】

スポンサーリンク

Googleのカスタム検索をサイト内に設置する

f:id:rick1208:20200717162950p:plain
Googleのカスタム検索をサイト内に埋め込み、設置するメリットはどのような点と思いますか。まず最初は、Googleカスタム検索について解説します。

Googleの高精度の検索システムが無料で使える

f:id:rick1208:20200717163021p:plain
Googleのカスタム検索とは、ウェブサイトにGoogle検索エンジン(検索窓)を埋め込み設置可能な無料のシステムです。Googleの高精度の検索技術を使用して、サイト内の検索が可能になります。サイト全体を検索、もしくは一部から検索する設定や、検索エンジンや検索結果のデザインを自分自身好みにカスタマイズも可能です。
f:id:rick1208:20200717163000p:plain
上の画像がGoogle検索エンジン(窓)です。(イメージ)Google検索エンジンの高精度な点は、関連する検索結果から順に表示されるところと、かな表記とカタカナ表記をどっちでも検索してくれるところです。(例:スマホ、すまほ)

設置が簡単

f:id:rick1208:20200717163045p:plain
また、Googlカスタム検索を埋め込み設置する方法はとても簡単です。Googleアカウントを所持していれば、だれでも簡単にカスタム検索をサイトに埋め込み、設置可能です。また、Googleが企業向けに提供していた有料検索サービスのGoogle Site Serachが終了しましたが、Googleカスタム検索は継続して使用可能です。

Googleのカスタム検索を自分自身のサイト内に設置する方法

f:id:rick1208:20200717140656p:plain
では、Googleのカスタム検索を自分自身のサイト内に埋め込み、設置する方法を説明していきます。

カスタム検索エンジンの作成方法

まず最初は、Googleアカウントにログインしてから、「Googleカスタム検索」を開きます。そして、右上にある「カスタム検索エンジンの作成」を押します。(下の画像で赤枠部分)
f:id:rick1208:20200717163115p:plain
すると、カスタム検索作成画面に切り替わります。そして、検索エンジンを設置したいサイト名を記入します。(下の画像で黄色線部分)
f:id:rick1208:20200717163128p:plain
カスタム検索では、サイト内の検索したい箇所によってURLを変更して表記します。(上の画像で緑枠部分)個々のページを検索したい場合は「、page、html」を末尾につけます。サイトの一部を検索したい場合は、「、docs、*」か「、docs、」をつけます。ドメイン全体から検索したい場合は、 「*、example、com」と記入します。
f:id:rick1208:20200717163423p:plain
次に、「言語」では検索に使用する「日本語」を選びます。(画像赤枠部分)そして、検索エンジンに名前を付けます。(上の画像で黄色枠部分)カスタム検索での検索エンジン命名ルールは、「Google」と入れないこと、許可なく商標を使用しないこと、2~3語で短いものを使用することです。次に、「作成」を押し検索エンジンの作成終了です。(上の画像で青枠部分)

カスタム検索エンジンの埋め込み方法

f:id:rick1208:20200717110156p:plain
続けて、カスタム検索エンジンの埋め込み方法を開設します。Googleカスタム検索エンジン作成が終了したら、表示される画面から「コードを取得」を押します。(下の画像で赤枠部分)
f:id:rick1208:20200717163444p:plain
「コードを取得」画面が表示されます。そのページにある検索エンジンの〈script〉をコピーします。(画像はサンプルですが、下の青枠部分をコピー)
f:id:rick1208:20200717163453p:plain
コピーした検索エンジンのsprictコードを、埋め込みしたいサイトの箇所にペーストします。これで、Google検索エンジンが指定したサイトに埋め込みされました。

Googleのカスタム検索は表示デザインもOK

f:id:rick1208:20200717110832p:plain
また、Googleのカスタム検索は表示デザインもカスタマイズ可能です。検索エンジンのカスタム方法を解説します。

表示カラーや検索結果のレイアウト変更が可能

まず最初は、検索エンジンの表示カラーを変更します。カスタム検索の、「検索エンジンの編集」から「デザイン」を選び、「テーマ」のタブを押します。(下の画像で赤枠部分)「デフォルト」、「シンプル」、「エスプレッソ」、「グリーンスカイ」、「バブルガム」、「シャイニー」、「クラシック」の7種類の中から好みの検索エンジンのテーマを選びます。(下の画像で青枠部分)
f:id:rick1208:20200717163514p:plain
保存をクリックすると、検索エンジンの表示カラーが変更されました。(上の画像で黄色枠部分)次に、検索エンジンで検索した結果のレイアウト変更をしてみます。同じく、カスタム検索ページから「検索エンジンの編集」(下の画像赤枠)から「レイアウト」のタブ(下の画像黄色枠)を押します。
f:id:rick1208:20200717163523p:plain
レイアウトは、「オーバーレイ」、「2ページ」、「全幅」、「2列」、「コンパクト」、「結果のみ」、「Googleがホスト」の7種類があります。好きな検索エンジンのレイアウトを選びて、(下の画像では赤枠でオーバーレイを選択)「保存」を押します。(下の画像で青枠部分)
f:id:rick1208:20200717163532p:plain
これで検索エンジンのレイアウトが変更されました。

画像検索も設定可能

f:id:rick1208:20200717110219p:plain
カスタム検索では、画像検索も設定可能です。Googleカスタム検索での画像検索設定の方法をみていきましょう。まず、カスタム検索画面から「設定」を押し、「基本」タブを選びます。(下の画像で赤枠部分)
f:id:rick1208:20200717164222p:plain
画像検索の項目で、ボタンを「オン」にします。(下の画像で赤枠部分)すると自動で保存され、画像検索機能が追加されました。
f:id:rick1208:20200717164233p:plain

検索ボックスや検索ボタンもカスタマイズ

さらに、検索ボックスや検索ボタンの色もカスタマイズ可能です。「デザイン」の「カスタマイズ」タブを選びます。(下の画像で赤枠部分)

f:id:rick1208:20200717164245p:plain
検索ボックスの色を変更したい場合は、「検索ボックス」を選び、▼マークから色を選びます。矢印で指した箇所に、適用された色と検索ボックスの見本が表示されています。(下の画像の赤枠・矢印箇所)
f:id:rick1208:20200717164252p:plain
同様に、「検索ボタン」をクリックすると、検索ボックスの枠線の色、背景色、アイコンの色を選択可能です。(下の画像青枠・青線箇所)
f:id:rick1208:20200717164430p:plain
Googleブランド表示」を選び、「Googleブランドを無効にする」に設定すると、検索エンジンボックス内からGoogleのロゴが消えました。(下の画像で黄色枠部分)
f:id:rick1208:20200717164440p:plain
このように、細かい検索エンジンのデザイン設定までカスタマイズ可能です。

カスタム検索エンジンGoogle AdSenseに関連付け

f:id:rick1208:20200717024046p:plain
Googleカスタム検索エンジンGoogle AdSense(グーグルアドセンス)に関連付けることで、さらに利用者にメリットがあります。Google AdSense(グーグルアドセンス)とは、クリックすると報酬が得られる広告のことです。

自分自身のサイトに関連のある検索結果で収益UP

f:id:rick1208:20200716204224p:plain
Google AdSense(グーグルアドセンス)とは、ユーザーが広告を押しただけで数十円から数百円の報酬がもらえるアフィリエイト(成果報酬型広告)です。訪問者が、自分自身のサイトでカスタム検索を使うと、検索結果に関連のある広告が表示されます。その広告がクリックされると、サイト所有者の収益になるのです。
f:id:rick1208:20200717164511p:plain
まず、Google AdSense(グーグルアドセンス)を使用するには、アドセンス側からの設定が必要になります。Google AdSense(グーグルアドセンス)に必要な申請のやり方から説明します。

Google AdSense(グーグルアドセンス)ホームページを開いてください。そして、「お申込みはこちら」を選びます。(上の画像で赤枠部分)
f:id:rick1208:20200717164542p:plain
アドセンスを使用したいサイトのURLとGmailアドレスを記入します。(上の画像で赤枠部分)GoogleAdSense(グーグルアドセンス)を使用するには、独自のドメインを取得する必要があります。HPやブログを開設するツールには、無料のものと有料のものがあり、独自ドメインの有無も違いがありますので、気を付けてください。
f:id:rick1208:20200717164551p:plain
アドレスに情報を受け取るか否かを選び、(上の画像で赤枠部分)「保存して次へ」を押します。(上の画像で青枠部分)
f:id:rick1208:20200717164600p:plain
GoogleAdSense(グーグルアドセンス)の使用規約をチェックして、チェックボックスにチェックをし、「アカウントを作成」を押します。(上の画像で赤枠部分)
f:id:rick1208:20200717164608p:plain
続いて、「支払先住所の詳細」画面になります。名前と住所欄をすべて記入して、情報を「送信」します。すると、電話番号チェック画面になります。「電話番号」を記入し、チェックコード受け取り方法をSMSかメールか選びます。「チェックコード取得」を押します。
f:id:rick1208:20200717164619p:plain
選びた連絡先に届いた「チェックコード」を記入して「送信」します。次に、「サイトをAdSenseにリンク」の画面が表示されます。
f:id:rick1208:20200717164649p:plain
上の画像で赤枠部分のコードをコピーし、自身のHTMLのと<、head>タグの間にペーストます。ペースト終了したら、チェックボックスにチェックをつけて、「終了」を押します。(上の画像で青枠部分)
f:id:rick1208:20200717164656p:plain
これで申請が終わりました。あとは、アドセンスからの審査の合否結果を待ちます。通常は1日程度で審査結果が出ます。
f:id:rick1208:20200717164704p:plain
アドセンスの審査を通過したら、Googleカスタム検索側の設定をします。まず、「検索エンジンの編集」から「広告」のタブを選びます。そして、右下にある「検索エンジンの収益化」を「オン」に設定します。Googleカスタム検索からの設定はこれで終了です。

まとめ

f:id:rick1208:20200717164727p:plain

Googleカスタム検索は、無料で簡単に設置可能で高性能検索のため、自分自身のサイトに埋め込みすると便利な検索ツールです。検索エンジンのデザインもお好みでカスタマイズ可能ですし、カスタム検索とAdSenseアドセンス)と関連付けるとアフィリエイトで収益をUPすることも可能です。今回の記事を参考に、Googleカスタム検索を有効使用してみましょう。