data-vocabulary.org schema deprecatedでエラーがでるというので、schema.orgに対応してみた

google+ はてなブックマーク
2020年9月4日10:00 PM|WordPress テーマ

長い間触っていなかった、WordPressサイトのパンくずリスト(BreadcrumbList)をGoogleの新しい形式に変更した。
以前はdata-vocabulary.orgという記述だったものが、schema.orgに変わったみたい。

私のもうひとつのサイト「サッぽろ、ニッキ。」は6年前程に一から作成した自作のテーマ。
こちらを新しい形式にしてみたので、忘れないよう書いておく。

変更前

<?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 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; ?>

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

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

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

出力されると以下の通り

<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>
<meta itemprop="position" content="1" />
</li>
</ul>
</div>

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

<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=に順番がつきます。

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です