Googleの検索結果でこのようにパンくずリストを表示させる方法について。

サイト内の様子

パンくずリストとして認識されているのは、サイト内ではこの部分に相当する。

HTML

ページ内に以下のようなHTMLを記述すれば、Googleの検索用クローラがパンくずリストを認識してくれる。パンくずリストの記述方法には幾つか種類があるが、今回は schema.org の表現方法を利用した。真似して記述すれば動くはず。itemscope属性、itemtype属性、meta要素など必要になっている。Homeと表記した部分は、Googleの検索結果画面ではドメイン名が表示されるらしい。ちなみに上記の画像では日本語設定のブラウザでアクセスしたので日本語が表示されているが、WikiHubではデフォルトで英語が表示されるようになっているので、Googleの検索クローラは英語のコンテンツを収集している。

<ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="/">
      <span itemprop="name">Home</span>
    </a>
    <meta content="1" itemprop="position">
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="/articles">
      <span itemprop="name">Articles</span>
    </a>
    <meta content="2" itemprop="position">
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="/@r7kamura/articles">
      <span itemprop="name">r7kamura</span>
    </a>
    <meta content="3" itemprop="position">
  </li>
</ol>