googleの検索結果にサイト内検索の窓を表示しよう。

2015-08-21

グーグルの検索結果にサイト内検索の窓が出ることがあるんですってね。「価格.com」とか検索してみると確かに出てます。なんだかリッチな感じでとっても素敵なので、うちのサイトでも対応してみました。検索結果に反映されるのはしばらく先かな。

これに対応させるのにはschema.orgのSearchActionとやらを使うそうです。WebSiteってのに埋め込んで使うみたい。このWebSiteってやつはJSON-LDとかいう形式を使わないといけないそうな。 JSON-LDはまあ難しいことを考えなければただのjson形式で、scriptタグを使って書くらしい。

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "name": "BlankTar",
    "url": "http://blanktar.jp",
    "author": {
        "@type": "Person",
        "name": "MacRat",
        "url": "http://blanktar.jp/about.html"
    },
    "potentialAction": {
        "@type": "SearchAction",
        "target": "http://blanktar.jp/search?q={query}",
        "query-input": {
            "@type": "PropertyValueSpecification",
            "valueName": "query",
            "valueRequired": "http://schema.org/True"
        }
    }
}
</script>

うちのサイトだとこんな感じ。

@contextは最初に一つだけ、あとは@typeを各階層に付けてschema.orgのアイテム名（とかいう呼称で良いのか？）を書くみたい。それぞれの要素はそのまま要素名をキーにするだけ。わりとシンプルですね。

トップレベルに書いてあるのがWebSiteの情報。サイト名とかURLとか。続いて私の情報をPersonで。aboutページにリンクさせるよりマシな表示の仕方がないものか考え中です。数年くらいずっと。他にも色々と書ける要素がありますので、是非一度http://schema.org/WebSiteをご覧ください。

んで、その後のpotentialActionってやつが本命。これのタイプをSearchActionにしてあげると検索窓を出してくれるようになる、らしいです。 targetってやつが検索ページのURL。{}で囲んだ部分にクエリを入れることが出来ます。名前は適当で良さそう。で、query-inputで必須かどうかを指定します。valueNameはtargetの中で使ったものを同じにしないといけないっぽい。

ちなみに、このquery-inputってやつは以下のように省略出来るようです。

"query-input": "required name=query"

めっちゃ短かい。省略してる感がすごいのでなんとなくやめておきましたが、たぶんこっちでも良い。

そんな感じでやると、多分、googleの検索結果にサイト内検索窓が表示されます。数週間かかったりするので、気長に待ちましょう。わくわく。

参考： Sitelinks Search Box | Structured Data | Google Developers