Googleカスタム検索を使ってサイト内検索を独自ドメインで実現する

CMS Designerを「こんな風に使ってます」等の活用事例や、自分なりのTIPS等のご報告をお待ちしています。
返信
webmaster
Site Admin
記事: 1447
登録日時: 2004年12月10日(金) 10:09

Googleカスタム検索を使ってサイト内検索を独自ドメインで実現する

投稿記事 by webmaster » 2007年11月14日(水) 17:55

本日お客様より、「Googleサイト内検索を使うと検索結果がGoogleのサイトに
飛んでしまい、デザインが合わない為に使えない」というご意見を頂きまして、
少し調べてみたところ、Google Custome Search Engineというものが提供
されていることを知りました。

これは、Googleのサイト内検索結果を、任意のページ中に埋め込むことができる
ものです。

既に弊社公式サイトのサイト内検索をこれに置き換えました。
http://cms.al-design.jp/

ページ上部の検索窓から検索をお試しください。

Google Custome Search Engineは英語サイトの為、以下に導入手順を
簡単にまとめてみました。

--------------------------------------------------------------
http://www.google.com/coop/cse/

※このサービスを受けるには、無料のGoogleアカウントかGMail
 アカウントが必要です。

「Create a Custom Search Engine」ボタンを押して、カスタム検索
の作成を開始します。

*Search engine name:
 このカスタム検索につける、管理上の名前のようです。
 今回は「CMS Designer公式サイト内検索」と入力しました。
 生成されるコードにも反映されることがあるようです。

*Search engine descriptin:
 このカスタム検索の説明文です。どこで使われるのか分かりませんでした。
 今回は「CMS Designer公式サイト中のコンテンツを、Google Custom Search
 Engineを使って検索します。」と入力しました。

*Seach engine keywords:
 カスタム検索に常に付加したいキーワードを指定するようです。
 弊社の例の場合は特に不要なので、空欄にしました。

*Search engine language:
 「Japanese」を選択しました。

*What do you want to search?
 検索対象は何ですか?

 [*] Only sites I select.
  (指定したサイトのみ)

 [ ] The entire web, but emphasize sites I select.
  (全てのウェブから検索するが、指定したサイトを強調する)

 [ ] The entire web.
  (全てのウェブ)

 今回はサイト内検索に用いたいので、「Only sites I select.」を選びました。

*Select some sites
 検索対象にしたいサイトを複数指定できるようです。
 弊社では、「cms.al-design.jp/*」としました。

*Select an edition
 スタンダード版かビジネス版かを選びます。
 
 スタンダード版は無料ですが、検索結果に広告が表示されます。
 但し、「Do not show ads on results pages」にチェックを入れると、
 非商用や大学、政府のサイトの場合に広告を非表示にできるようです。
 
 ビジネス版は年間100$が必要ですが、検索結果に広告が表示されません。

 弊社では、無料のStandard Editionを選択しました。

最後に「I have read and agree to the Terms of Service.」(使用条件
を読み、承諾しました)にチェックをつけて「Next」ボタンを押します。

Previewが表示されるので、検索ボックスに適当なキーワードを入れてみて、
検索結果を試します。問題なければ、「Finish」を押して完了してください。

すると、Googleアカウントの「Custom Search Engine」のページから、
このカスタム検索を管理できるようになります。

「Look and feel」で見た目を多少変えれます。

「make money」から、ご自分のAdSenseと関連付けることができます。
この設定を行うと、カスタム検索の検索結果の広告を、自分のAdSenseに
することができます。お客様で自分のサイトに広告が出るのに抵抗がある
方がいらっしゃいましたら、「AdSenseを使えば広告収入が得られます」
とご提案ください。(広告については非営利や学校、行政サイトでは非表示に
できますし、営利サイトでも年間100$で非表示にできます)

「Code」から、今回作成したカスタム検索の
 ・「検索ボックス」を埋め込む為のコード(Search box code)
 ・「検索結果」を埋め込む為のコード(Search results code)
を取得できます。

「Code」画面についてもう少し説明します。

*Search results hosting optiongs

検索結果の表示方法として、「グーグルのサイト以外のサイトに検索結果
を表示する」方法と、「グーグルのサイト上に検索結果を表示する」
方法が選べます。

今回はグーグルのサイト以外のサイトに結果表示したいので、
「Host results on a non-Google site using an:」を選びます。

ここでさらに、表示方法として iframe と overlay を選べます。
検索ボックスと検索結果表示ページを別のページにしたい場合にはiframe、
同じページにしたい場合にはoverlayを選ぶようです。

今回は別のページにしたいので、iframeを選びました。

*Specify search results details

検索結果表示の詳細を設定します。

検索結果表示ページを別にしたので、ここで検索結果ページのURLを入れます。
searchresult.htmlという名前にしたいので、その通り入力します。

広告表示場所も選べるので、Right、Top and Right、Top and Bottomの
うちから選びます。今回は Top and Bottomを選んでみました。
気に入らなかったら後で変えれます。

下に「検索ボックス表示用コード」と「検索結果表示用コード」が表示
されているので、これをコピー&ペーストします。
弊社の場合はindex.php(及び他の全てのページの上部)に検索ボックスを表示して、
searchresult.htmlに検索結果表示をしたいので、それぞれのページにそれぞれの
コードを貼り付けます。

弊社の場合ですと、index.php(及び他の全てのページ)の上部に検索ボックスを
配置しました(Dreamweaverのtemplateを使って一括更新しています)。
CSSやtableなどで多少レイアウトや見栄えを整えてあります。

また、弊社サイトはEUC-JPで構築されており、そのままだと日本語での
検索が通らなかった為、検索ボックスのコードに

コード: 全て選択

  <input type="hidden" name="ie" value="euc-jp" />
の行を加えてあります(UTF-8で構築している場合は不要です)。

下記公式サイトに実際に設置しましたので、お試しください。
http://cms.al-design.jp/

---------------------------------------------------------

以上、ご不明な点がございましたらご連絡ください。

返信