Googleの検索結果内の検索ボックス向けにマークアップしてみた。

今週(2014年9月8日から12日の週)は検索結果内の検索ボックス、サイトリンク検索ボックスに関する記事をよく見るので試しにサイトリンク検索ボックス向けにマークアップしてみました。

サイトリンク検索ボックス

google.comでNASAwhitehouseで検索すると検索結果画面にサイト内検索のフォームが表示されますが、日本語環境のgoogle.co.jpの環境では同じキーワードで検索してもサイト内検索のフォームは表示されません。

google.comでの検索結果

google.co.jpでの検索結果

日本語環境では現時点ではまだ未対応のようですし、マークアップしたからといって必ず表示されるとは限らないそうなので、やってみても何も成果はでない可能性もありますが、やってみて損はないのでやってみることにしました。

query-inputの謎

サイトリンク検索ボックス向けにマークアップするならばschema.orgのSearchActionを使うわけですが、マークアップ例を見るとquery-inputプロパティが指定されています。

しかし、SearchActionの一覧を見てもquery-inputの表記が無いので、マークアップ例が正しいのか正しくないのか疑問だらけでしたが、結果的には仕様に書いてあるので疑問はすぐに晴れました。仕様はちゃんと読め...!

マークアップしてみる

Googleのデベロッパー サイトを見てみると、JSON-LDを使うことを推奨しているようですがMicrodataでも大丈夫です。RDFaについては何も書かれていません。RDFaでも大丈夫だと思いますが、JSON-LDMicrodataでマークアップしたほうが無難だと思います。

Microdata

自分のサイトではMicrodataでマークアップしました。マークアップは以下のような感じです。


<div itemscope="itemscope" itemtype="http://schema.org/WebSite">
<meta itemprop="url" content="http://blog.e-riverstyle.com/">
  <form itemprop="potentialAction" itemscope="itemscope" itemtype="http://schema.org/SearchAction">
    <meta itemprop="target" content="http://blog.e-riverstyle.com/mtmt/mt-search.cgi?search={search}&IncludeBlogs=1&limit=20&button=">
      <input type="text" name="search" value="" placeholder="検索..." itemprop="query-input">

      <button type="submit" name="button">
        検索
      </button>
  </form>
</div>

targetプロパティのcontent属性に指定してあるURLは各ブログの検索用のURLを指定します。私のブログはMTですので、http://blog.e-riverstyle.com/mtmt/mt-search.cgi?search=ほげとなります。

また、{search}は、name="search"searchになりますので、name属性の値を指定します。この辺りの仕様はRFC6570が参考になります。

JSON-LD

JSON-LDだと以下のようになります。


<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "http://blog.e-riverstyle.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "http://blog.e-riverstyle.com/mtmt/mt-search.cgi?search={search}&IncludeBlogs=1&limit=20&button=",
    "query-input": "name=search"
  }
}
</script>

もし、input要素にrequired属性を指定していればrequiredも各必要があります。

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

RDFa

RDFaでマークアップすると下記のような感じになります。


<div vocab="http://schema.org/" typeof="WebSite">
<meta property="url" content="http://blog.e-riverstyle.com/">
  <form property="potentialAction" typeof="SearchAction">
    <meta property="target" content="http://blog.e-riverstyle.com/mtmt/mt-search.cgi?search={search}&IncludeBlogs=1&limit=20&button=">
      <input type="text" name="search" value="" placeholder="検索..." property="query-input">

      <button type="submit" name="button">
        検索
      </button>
  </form>
</div>

マークアップしてみて、今のところ検索結果には(Google.comで確認)何も変化はありません。ウェブマスターツールの構造化データには項目が表示されていますので認識はされているようです。

参考