microdataで検索結果にサイト内検索ボックスを表示

Google ウェブマスター向け公式ブログ: 検索結果内の検索ボックスが新しくなりましたでも発表になった、サイトリンクの検索ボックス。
これを表示させるためにはJSON LD、microdata、RDFa を使用することができますが、今回はmicrodataを使ってみましょう。
microdataで検索結果にサイト内検索ボックスを表示

いきなり書いてみました。
<div itemscope itemtype="http://schema.org/WebSite">
<h3 サイト内検索</h3>
<meta itemprop="url" content="http://yourdomain"/>
<form action="/search_g.html?q={q}" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
<meta itemprop="target" content="http://yourdomain/search_g.html?q={q}"/>
<input itemprop="query-input" type="text" name="q" required/>
<input type="submit" value="検索する" />
</form>
</div>

詳しくは下記にあります。
Rich Snippets - Webmaster EDU - Webmasters -- Google Developers

記述内容
具体的な内容を見てみます。
まずは検索フォームが必要とのことです。
独自のがなければ、Googleのカスタム検索を使ってね、ということなので、ここから作っていきます。
検索結果ページを作ることになります。
わたしは、search_g.htmlというファイル名にしてルートにアップ。
生成されるscriptと下記を記述しています。
<gcse:searchbox></gcse:searchbox>
<gcse:searchresults></gcse:searchresults>

そして冒頭のソースを検索エリアとして埋め込むことになります。

form部分をitempropのpotentialAction、itemtypeをSearchActionとすることで、今回のサイトリンクスに適用させることができます。

反映後、下記から記述が問題ないか確認しましょう。
Google Structured Data Testing Tool
こんな感じで出てきます。

ちなみに出るかどうかは複数のGoogleのアルゴリズムで決定させるということで、まだ出てきていません・・・。

sponsors

「microdataで検索結果にサイト内検索ボックスを表示」をシェアする

記事作成:
記事URL:

TOP > > > microdataで検索結果にサイト内検索ボックスを表示