Googelの検索結果内に検索フォームを表示させる方法

Google とかで検索した際に、大きいサイトだと企業名のしたによく検索フォームが表示されているのをよく見かけると思います。

zozo.jpの場合

大きな主要サイトだと、Googleが良きに計らってくれて表示させてくれているようですが、

小さなサイトだとなかなかやってくれないようなので、
自分で”もし良かったら、こんな感じでフォーム表示してもらってもいいですか？”的に設定が可能です。

下記より実装方法になります。

実装方法

今回の実装サンプルでは、Ruby on Rails で chema.org と JSON+LDを使っています。

common/_semantic_web.html.erb

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://www.example.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.example.com/search?keyword={keyword}",
    "query-input": "required name=keyword"
  }
}
</script>

＊　https://www.example.com/の部分はご自分のサイトURLに変更してください

＊　https://www.example.com/search?keyword={keyword}は自分のサイトの検索用URLを指定してください。

＊　"query-input": "required name=keyword"は検索フォームに入力されてワードを**keyword**という変数名定義します。そして、**required** をつけることで必須ですよと設定しています。必須でなくても問題ないようであれば、requiredは削除してください。

あとは、共通レイアウト等でrenderして読み込んでください。

layouts/application.html.erb

  (略)

  <%= render('common/semantic_web') %>

  </body>
</html>

まとめ

比較的簡単に設定ができて、SEOにも効果があると思うので、設定してもよいのではないでしょうか。
しかも、検索結果に表示された時にインパクトもありますしね。

参考サイト

今回の実装にあたり参考にしたサイトです。

Goolge 公式

Google ウェブマスター向けブログ

https://developers.google.com/structured-data/slsb-overview

schema.org

http://schema.org/WebSite

http://schema.org/SearchAction

http://schema.org/docs/actions.html