Sitelinks Search Box

ページ下部に検索フォームを復活させて、GoogleのSitelinks Search Boxに対応させたつもり。本当は検索ページを別に作ってそっちに寄せようかと思ったけど面倒になってきたので、とりあえずGoogleカスタム検索を復活させてMicrodataを仕込んだ。

Sitelinks Search Boxの注意点はウェブサイトのホームページにのみ仕込むこととUTF-8でしか機能しないことくらい。例を見る限りはサードパーティの検索システムを利用するのも問題ないように見える。仕込んだからといって使ってくれるわけではないらしい。

最終的に以下のようなマークアップになった。

<html
  itemscope
  itemtype="http://schema.org/WebSite">
  <body>
    <aside role="search">
      <form
        action="http://www.google.com/cse"
        itemprop="potentialAction"
        itemscope
        itemtype="http://schema.org/SearchAction">
        <meta
          content="https://www.google.com/cse?cx=partner-pub-8712792805045949:3747342316&amp;ie=UTF-8&amp;q={q}&amp;sa=Search"
          itemprop="target">
        <input
          type="hidden"
          name="cx"
          value="partner-pub-8712792805045949:3747342316">
        <input
          type="hidden"
          name="ie"
          value="UTF-8">
        <input
          type="search"
          name="q"
          itemprop="query-input">
        <input
          type="submit"
          name="sa"
          value="Search">
      </form>
    </aside>
  </body>
</html>

ややこしいのはtargetとquery-inputの指定。targetでは検索結果ページになるURLにクエリを{…}で仕込むけど、その文字列はitemprop="query-input"を指定したフォーム要素のname属性の値と一致する必要がある。ここではqなので{q}になる。

最近ちょくちょく見かけるようになったJSON-LDでも書けるけれども、これくらいならMicrodataで良さそう。SearchActionではないもうちょっと複雑なアクションになるとmeta要素をいくつも書かなくちゃならなくなって精神衛生上良くない感じがするので、そうなるとJSON-LDの出番なのかも。