a-blog cmsのパンくずリストをschrma.orgでマークアップ

需要があるかどうかわかりませんが、a-blog cmsのデフォルトテーマであるsite2016のパンくずリストを、schema.orgのBreadcrumbListでマークアップしたので共有しておきます。

classもそのままにしていますので、既存テーマの /themes/site2016/include/header/topicpath.html に上書きするだけで大丈夫なはずです。

<nav class="topicpath">
  <ol class="topicpath-list acms-container sp-container clearfix" itemscope itemtype="http://schema.org/BreadcrumbList">
    
    <li class="topicpath-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      
      
      <a href="{url}" class="topicpath-link" itemprop="url"><span itemprop="item">{name}</span></a>
      <meta itemprop="position" content="{sNum}" />
    </li>
    
    
    <li class="topicpath-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      
      
      <a href="{url}" class="topicpath-link" itemprop="url"><span itemprop="item">{name}</span></a>
      <meta itemprop="position" content="{sNum}" />
    </li>
    
    
    <li class="topicpath-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      
      
      <a href="{url}" class="topicpath-link" itemprop="url"><span itemprop="item">{title}</span></a>
      <meta itemprop="position" content="{sNum}" />
    </li>
    
  </ol>
</nav>

Googleの構造化データテストツールで、フォルトゥナの「ホームページ制作・リニューアル」のページをテストするとこんな感じになっています。


フォルトゥナの1ページを構造化データテストツールでテストした結果

今まではData-Vocabulary.orgでマークアップしていて、一度Schema.orgにしようと思っていたのですが、確か階層構造の連番を出力できなかったのであきらめたように思います。JSを使えばなんとでもという感じですが、そこまでするほどのことではないかと。

今回たまたまトピックパスのビルトインモジュールを見たら、{sNum}というブログ、カテゴリ、エントリーを通した連続番号を出力する変数(いつできたんだろう?)を見つけたので書き直した次第です。

この辺りはあまり専門ではないので、問題があれば修正しますのでご指摘ください。