moshimore Knowledge

アプリ開発・紹介とメモ書き、日々の日記。

CakePHP3のパンくずヘルパーで構造化データ(Microdata)に対応する方法について

f:id:moshimore:20180917234121j:plain
CakePHPにはパンくずリストを作成するための便利なヘルパーが組み込まれていますが、残念ながら構造化データには対応していません。
本体のソースを少しだけ編集して対応してみたいと思います。

構造化データ(Microdata)とは

例えば、以下のようなHTMLを出力して、ロボットにも、それがパンくずリストを表していることを伝えることができるデータです。
素の状態のCakePHPのパンくずヘルパーでは、このようには出力してくれません。

<nav>
  <ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/">
        <span itemprop="name">TOP</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/contents/">
        <span itemprop="name">CONTENTS</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
  </ol>
</nav>

テンプレートを変更

$this->Breadcrumbs->render()を呼び出す前に以下のような感じでテンプレートを変更します。
主な部分としては、olタグにitemscopeとitemtype、liタグにitemscopeとitempropとitemtype、aタグにitempropを追加したところです。
また、separatorの削除とmetaタグを追加しています。
このmetaタグ内にあるurlcountを使うには、本体のソースを少しだけ編集する必要があり、何件目のパンくずなのかをカウント出力してくれます。

<?php
    $this->Breadcrumbs->templates(
        [
            'wrapper' => '<ol itemscope itemtype="http://schema.org/BreadcrumbList"{{attrs}}>{{content}}</ol>',
            'item' => '<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem"{{attrs}}><a itemprop="item" href="{{url}}"{{innerAttrs}}><span itemprop="name">{{title}}</span></a><meta itemprop="position" content="{{urlcount}}" /></li>'
        ]
    );
?>

パンくずヘルパーのソースを変更

今回も大がかりな変更はしていませんが、CakePHP自体のアップデートの際には気をつけなくてはいけません。

修正箇所は、本日時点(2019/5/12)の最新版で、
「\vendor\cakephp\cakephp\src\View\Helper\BreadcrumbsHelper.php」の277行目、291行目、309行目に追加します。

$crumbTrail = '';
$urlcount = 1;    // 追加した行
foreach ($crumbs as $key => $crumb) {
$templateParams = [
    'urlcount' => $urlcount,    // 追加した行
    'attrs' => $templater->formatAttributes($options, ['templateVars']),
    $crumbTrail .= $this->formatTemplate($template, $templateParams);
    $urlcount++;    // 追加した行
}

動作確認

あとは通常通りにrenderを呼び出して上げるようにしたら、構造化データ テストツールで正しい構造化データになっているかチェックしてみましょう。

echo '<nav>'.$this->Breadcrumbs->render().'</nav>';

パンくずヘルパーや構造化データについては、参考にさせて頂きました。
Breadcrumbs (パンくず)
パンくずリストを構造化データでリッチスニペット対応する方法 | webliker

以上、CakePHP3のパンくずヘルパーで構造化データ(Microdata)に対応する方法についてでした。