Google Search(グーグル検索)

Googleカスタム検索①

Googleのカスタム検索を導入してみたので、

そのメモ書きです。

 

まず、
以下のサイトにアクセスしてください。
http://www.google.com/cse/manage/create?hl=ja

 

すると、
検索エンジンの設定画面が開きます。
Googleカスタム検索_検索エンジンの設定

必須項目である「名前」「検索するサイト」を入力します。
「名前」はそのサイトに合ったものを適当に入力してやります。
「検索するサイト」は実際にサイト内検索を行いたいサイトのURLを入れてください。

 

今回は取り敢えず、
名前:サンプルサイト
検索するサイト:google カスタム検索

としておきます。

 

で、
「エディション」を選択して、
利用規約を読んだ上で「次の利用規約を読んだうえで同意します」にチェックを入れてから、
「次へ」ボタンをクリックします。

 

 

※この際、広告を表示させたくない場合には「エディション」で有料版の「Site Search」の方を選択してください。

 

 

次に、
テスト画面へ移動します。
Googleカスタム検索_テスト

検索結果をテストしたい方は、ここでテストしてみてください。

 

今回はテストは飛ばします。

 

で、

さらに「次へ」ボタンをクリックすると、コードの取得画面へ遷移します。

Googleカスタム検索_コードの取得

 

今回だと、

<!-- Put the following javascript before the closing </head> tag. -->
<script>
(function() {
var cx = '001963001459958428322:icpwdrhhguc';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>

<!-- Place this tag where you want both of the search box and the search results to render -->
<gcse:search></gcse:search>

こんなソースを取得できるので、

これをサイト内のどこかにそのまま貼り付けます。

するとこんな感じでユーザー側には表示されます。

google カスタム検索_参考

デザインなんかはいろいろカスタマイズできるので、

興味がある方は勉強してみてください。

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. ドメインについて
  2. WP:WordPress(ワードプレス)
  3. URL設計(URLデザイン)
  4. URL「ディレクトリ名」と文字アンダースコア(_)とハイフン(-)
  5. SEO対策(外部ファイルの読み込み)
  6. URL リダイレクト
  7. インデックスされない
  8. 内部対策は必要?
  9. CMS(シーエムエス)
  10. SEO業者は必要?

Twitter

アーカイブ

PAGE TOP