サーチコンソールから「data-vocabulary.orgスキーマのサポートは終了します」の警告の対処法

Googleサーチコンソールから「data-vocabulary.orgスキーマのサポートは終了します」のエラーメッセージがでていたので対処した方法を書いておきます。

警告の原因

この警告メッセージの原因は、現在書かれているパンくずリストのマークアップ方法がサポート終了するため、書き換えてくださいという内容です。

詳しい内容はこちらを参考に↓
» data-vocabulary構造化データによるリッチリザルトのサポートをGoogleが終了、schema.orgへの移行を推奨

パンくずリストのマークアップをdata-vocabulary構造化データで記述している場合は警告が表示され、2020年4月6日をもってGoogleはサポートを終了します。

以前はこのdata-vocabulary構造化データで問題なかったのですが、現在では別の記述方法が推奨されています。

» パンくずリスト｜Google 検索デベロッパーガイド

構造化データのマークアップに data-vocabulary.org を使っているサイトは schema.org へ移行してください。とのことです。

Googleが推奨するパンくずリストの書き方

上記のページでGoogleが推奨するパンくずリストの書き方は２つあります。

１.スクリプトで記述する方法

一つはhtmlに直接パンくずをマークアップする方法ではなくJSON-LDで記述する方法を推奨しているようです。html内にスクリプトで書く感じです。

最近ではスマホメインのサイトも多くなっていて、パンくずを画面内に表示しないサイトも多いです。その場合はこの書き方が今後主流になっていくものと思います。

JSON-LD書き方サンプル

<html>
  <head>
    <title>The title of the page</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Authors",
        "item": "https://example.com/books/authors"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Ann Leckie",
        "item": "https://example.com/books/authors/annleckie"
      },{
        "@type": "ListItem",
        "position": 4,
        "name": "Ancillary Justice",
        "item": "https://example.com/books/authors/ancillaryjustice"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

２.今まで通りのhtmlのパンくずリストに記述する方法

もう一つは、今まで通りのhtmlに記述する方法でschema.orgで書く方法です。今書かれているdata-vocabulary.orgの記述内容を修正して記述できますので、僕はこの方法で修正しました。

この場合、RDFaとmicrodataの2種類の書き方があります。

どちらでも問題ありませんが、microdataの方が良く利用されているようなので僕はこちらで記述しました。以下microdataでの記述方法です。（上記リンクのGoogle検索デベロッパーガイド内で書かれている内容です。RDFaで記述する場合はGoogle検索デベロッパーガイドをご覧ください。）

microdataのマークアップ方法

パンくずリストのHTML例

<ol>
  <li>
    <a href="http://www.example.com/books">Books</a>
  </li>
  <li>
    <a href="http://www.example.com/sciencefiction">Science Fiction</a>
  </li>
  <li>
    Award Winners
  </li>
</ol>

↓microdataのマークアップ

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/books">
        <span itemprop="name">Books</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="https://example.com/books/sciencefiction" href="https://example.com/books/sciencefiction">
      <span itemprop="name">Science Fiction</span></a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <span itemprop="name">Award winners</span>
    <meta itemprop="position" content="3" />
  </li>
</ol>

マークアップした内容はGoogleの「構造化データテストツール – Google」で確認できます。

上記赤字の「itemid」はaタグのhrefにURLが記述していればなくても問題ありませんでしたので僕は省きました。（構造化データテストツールでエラーになりませんでした。schema.orgのサイトのサンプルでも記述がない、省いている）

複数のパンくずリストを表示する場合

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/books">
        <span itemprop="name">Books</span></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="https://example.com/books/sciencefiction"        href="https://example.com/books/sciencefiction">
      <span itemprop="name">Science Fiction</span></a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
      <span itemprop="name">Award Winners</span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/literature">
      <span itemprop="name">Literature</span></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <span itemprop="name">Speculative Fiction</span>
    <meta itemprop="position" content="2" />
  </li>
</ol>

data-vocabulary.orgとの大きな違い

data-vocabulary.orgとschema.orgの大きな違いは、を書くところでしょうか。パンくずの階層ごとにcontentの値を変える必要があります。

このサイトではstinger5のテーマを使っていますがその場合の記述内容も記載しておきます。

stinger5のマークアップ

パンくずリストの該当箇所はいくつかありますが、↓この書き方でいけました。

          <!--ぱんくず -->
          <div id="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
            <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="<?php echo home_url(); ?>" itemprop="item"> <span itemprop="name">ホーム</span> </a><?php $_content_no_=1;?><meta itemprop="position" content="<?php echo $_content_no_;$_content_no_++;?>" /> &gt; </div>
            <?php $postcat = get_the_category(); ?>
            <?php $catid = $postcat[0]->cat_ID; ?>
            <?php $allcats = array($catid); ?>
            <?php 
while(!$catid==0) {
    $mycat = get_category($catid);
    $catid = $mycat->parent;
    array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
            <?php foreach($allcats as $catid): ?>
            <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="<?php echo get_category_link($catid); ?>" itemprop="item"> <span itemprop="name"><?php echo get_cat_name($catid); ?></span> </a><meta itemprop="position" content="<?php echo $_content_no_;$_content_no_++;?>" /> &gt; </div>
            <?php endforeach; ?>
			<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="last">
				<span itemprop="name"><?php the_title(); //タイトル ?></span><meta itemprop="position" content="<?php echo $_content_no_;$_content_no_++;?>" />
            </div>
          </div>
          <!--/ ぱんくず -->