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)に対応する方法についてでした。

コメントを残す

メールアドレスが公開されることはありません。