【Google】サイト内検索にGoogle検索を利用する【as_sitesearch】

こんにちは、ryohei(@ityryohei)です!

本記事では、サイト内検索にGoogle検索を利用する方法をご紹介しています。

キーワード入力後に検索ボタンを押すと、Google検索に移動して検索結果を表示させる方法はないかな?

上記の疑問にお答えします。

では、解説していきます。

サイト内のキーワード検索にGoogle検索を利用するには

フォームにas_sitesearchパラメータを持たせることでサイト内検索をGoogle検索で実行することが可能です。Google検索をフォームの送信先に指定し、as_sitesearchといくつかのパラメータ(検索キーワード、言語情報)を持たせることでGoogle検索でサイトを絞り込んだ状態で検索することができます。

フォームの実装例

自サイトから入力されたキーワードをGoogle検索をするには、フォームにいくつかパラメータを持たせて送信する必要があります。最低限必要なパラメータは下記の通りです。

  • https://www.google.com/search:フォームの送信先
  • as_sitesearch:検索サイトを指定
  • as_q:検索キーワードを指定
  • hl:言語を指定

実際にフォームに組み込むと下記のようになります。

<form class="form" method="get" target="_blank" action="https://www.google.com/search">
    <input type="text" name="as_q" value="">
    <input type="hidden" name="hl" value="ja">
    <input type="hidden" name="as_sitesearch" value="https://into-the-program.com/">
    <button>検索</button>
</form>

実行結果は下記の通りです。

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

上記例では、キーワードを入力して検索を実行するとGoogle側でブロックされます。GoogleはCodePenからのアクセスがブロックしているようです。実際にサイトに組み込んで検索したところ、問題なく動作したので一般利用に制限はなさそうです。

上記例では本サイトのURLを指定していますが、実際に組み込む場合は検索するサイトのURLに置き換えてご利用ください。

リンク形式の検索も可能

固定キーワードもしくはJavaScriptでhrefの値を操作することで、URLにキーワードを持たせた状態でGoogle検索をすることができます。下記のas_qの値に検索したいキーワードを持たせることでGoogleで絞り込むことができます。

<a href="https://www.google.com/search?as_q=ここにキーワードを入力&hl=ja&as_sitesearch=https%3A%2F%2Finto-the-program.com%2F">Googleで検索する</a>

入力されたキーワード検索の場合はフォーム、固定キーワード検索の場合はリンク、という使い分けが良さそうですね。

最後に

本サイトもサイト内検索にGoogle検索を利用していますが、こちらは埋め込み型のものでAdSenseの審査が必要です。AdSenseの審査は通過するのに時間がかかるため、公開直後のサイトには向いていません。

その点本記事でご紹介したフォーム形式のものであれば、これといった制限なくGoogle検索を導入することができます。またユーザーも使い慣れたUIで検索することができるため、双方にメリットがある方法ではないかと思います。

サイト内検索にGoogleを利用することを検討されている方の参考になれば幸いです!

以上、サイト内検索にGoogle検索を利用する方法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら