【WordPress】WordPressテーマのパンくずリストをschema.org（構造化データ）対応にしてみた

WordPress2022.06.17

長い間触っていなかった、WordPressサイトのパンくずリスト（BreadcrumbList）をGoogleの新しい形式に変更しました。

data-vocabulary.org schema deprecatedでエラーが出てるので何とかしてください、というGoogleさんのメッセージが出ていたためです。
以前はdata-vocabulary.orgという記述だったものが、schema.org（構造化データ）に変わったみたい。

schema.orgは、簡単に書くと、構造化データとか、リッチザルトとかいう形で、検索エンジン側に方式にのっとった形式でサイトの内容を知らせるためのものです。

私のサイト「サッポロニッキ」は8年前程に一から作成したWordPressの自作テーマ。
このWordPressテーマの一部を新しい形式にしてみたので、忘れないよう書いておきます。

（この記事は2020年9月4日に書いた　data-vocabulary.org schema deprecatedでエラーがでるというので、schema.orgに対応してみた | にくろむめも　記事のリライトです。）

変更前テーマのbreadcrumb listの箇所

<?php if(is_home()): ?>
  <div id="breadcrumb" class="clearfix">
    <ul>
    <li itemtype="http://data-vocabulary.org/Breadcrumb" class="home">
     <a href="<?php echo home_url(); ?>/"><span class="icon-home3">ホーム</span></a>
    </li>
    </ul>
  </div>
<?php endif; ?>

以下が変更後PHP

<?php if(is_home()): ?>
  <div id="breadcrumb" class="clearfix" itemscope itemtype="https://schema.org/BreadcrumbList">
    <ul>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
    <a itemprop="item" href="<?php echo home_url(); ?>/"><span itemprop="name" class="icon-home3">ホーム</span></a>
    <meta itemprop="position" content="1" />
    </li>
    </ul>
  </div>
<?php endif; ?>

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<a itemprop="item" href="<?php echo home_url(); ?>/"><span itemprop="name" class="icon-home3">ホーム</span></a>
<meta itemprop="position" content="1" />

class="…"のところはCSSの表示なので関係なし。

太字になっている部分が変更部分。
どこが変わったのかというと…

全体を囲んでいる<div id="breadcrumb" class="clearfix">に
itemscope itemtype="https://schema.org/BreadcrumbList"
が追加されています。
各パンくず項目を囲んでいる<li itemtype="…に
itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"
が追加されています。
リンク部分である<a href="…に
itemprop="item"
が追加されています。
<span>には
itemprop="name"
が追加されています。
<a>タグが終わった後には
<meta itemprop="position" content="1" />
が追加されています。

出力されたHTMLは以下の通り

<div id="breadcrumb" class="clearfix" itemscope itemtype="https://schema.org/BreadcrumbList&quot;>
  <ul>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
  <a itemprop="item" href="https://1day.sorezore.net/"><span itemprop="name&quot; class="icon-home3">ホーム</span></a>
  </li>
  </ul>
</div>

<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
<a itemprop="item" href="https://1day.sorezore.net/"><span itemprop="name&quot; class="icon-home3">ホーム</span></a>
<meta itemprop="position" content="1" />

上のはトップページHTML出力の場合の表示だけど、階下のカテゴリー、例えば
ホーム＞カテゴリー名＞記事のタイトル
のときは、以下の様に書くとの事。
PHP

<div id="breadcrumb" class="clearfix" itemscope itemtype="https://schema.org/BreadcrumbList">
<ul>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
  <a itemprop="item" href="https://1day.sorezore.net/"><span itemprop="name" class="icon-home3">ホーム</span></a>
  <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
  <a itemprop="item" href="https://1day.sorezore.net/category/"><span itemprop="name" class="icon-home3">カテゴリー</span></a>
  <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="home">
  <span itemprop="name" class="icon-home3">記事のタイトル</span>
  <meta itemprop="position" content="3" />
  </li>
</ul>
</div>

<meta itemprop="position" content="1" />

<meta itemprop="position" content="2" />

<meta itemprop="position" content="3" />

階層ごとに、meta itemprop=に順番がつきます。

最初ちょっとエラーになったけど、上記のように書くとOKでした。
（エラーの原因だったのは、CSSで家のアイコン表示しいて、「ホーム」のテキストがなかったため…「ホーム」のテキスト出力がないためのエラーだった。）

他にも対応方法があるのだけど、変更もなかなか手間だし。
とりあえずはこんな感じでよいらしいので、これで行こうと思う。

今回空いた時間にSSL化の修正をするつもりが、ポロポロと色々な直し部分が見つかっている。
仕方ない。地道にちょっとずつやっていくしかないかなー。

（リライト時の追記）
チェックはGoogle公式ツールがあるので、以下からどうぞ。
スキーママークアップテストツール | Google 検索セントラル | Google Developers

この記事以降、パンくずリスト以外に、記事の内容も対応しました。
この当時は自己満足かなーと思ってましたが、記事の内容が表示されやすくなった気がしますね！