ライブドアブログでパンくずリスト【data-vocabulary.org 警告】
先日、「サーチコンソール」から「data-vocabulary.org schema deprecated」と警告メッセージが来ていました。「サーチコンソール」を開き内容を確認してみると…
『data-vocabulary.org スキーマのサポートは終了します』
とのメッセージがありました。調べてみると構造化マークマップと言って検索ロボットにページ内に書かれた人向けの言葉をロボットにも意味が分かるように明示するマークの形式がいくつかあるのですが、「data-vocabulary.org」という古い形式でマークアップし記述していたため、「この形式は非推奨ですよ!」と言うメッセージであることが判明しました。

解決策として「data-vocabulary.org」から「schema.org」タイプに書き換える方法をとり解決しました。まず警告が出ていた「パンくずリスト」の部分から修正します。
ちなみにライブドアブログには標準ではパンくずリストはありませんが、いくつかのサイトを参考にしながら既存のテンプレートに書き加えて使っていたのでそれを修正しています。

【修正前の「data-vocabulary.org」使用コード】

<!-- パンくずリスト -->
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<$BlogUrl$>" itemprop="url"><span itemprop="name">トップページ</span></a>
<IfArticleCategory1>
 > <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<$ArticleCategory1Url$>" itemprop="url"><span itemprop="name"><$ArticleCategory1$></span></a>
</IfArticleCategory1>
<IfArticleCategory2>
  /  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<$ArticleCategory2Url$>" itemprop="url"><span itemprop="name"><$ArticleCategory2$></span></a> 
</IfArticleCategory2>
</span>
<!-- /パンくずリスト -->



【「schema.org」使用の修正後コードについて】
「schema.org」の書き方にもいくつかルールがあるのですが、今回は「Google」が推奨する「JSON-LD」という方式で書きました。この方式は「JSON-LDコード」の部分と「実際にサイトに表示されるhtmlコード」を別の場所に書くことが出来るので、HTML全体が見やすくすっきりします。
注意しなければいけないのはロボット向けの「JSON-LDコード」と閲覧者向けの「サイトに表示されるhtmlコード」を別の場所に書く事から、故意では無くても記載内容に相違があるとスパム扱いされてしまう可能性が高いことです。
そこで問題なのがライブドアブログはカテゴリー分けが出来るようになっていますが、これは見かけ上なだけで実際のファイル階層は全て同じ“http://○○○○○.blog.jp/archives/○○○○○○○○.html”のように“archives”直下に格納されています。この仮想の階層を検索ロボットに「パンくずリスト」の"position(ポジション)"として階層の深さだと示しマークしても良いのかという問題。
もう一つの問題がライブドアブログはカテゴリーを2つ決められますが、これをロボットにどんなサイト構成なのか明確にマークアップ出来ない可能性。「Google」のヘルプには「パンくずリスト」を複数記載する方法も紹介されていましたが、ライブドアブログの実際には階層分けされていないカテゴリーページでは、うまく認識されない可能性が高い。
以上の事から、まずは試験的に次の事を試してみます。
・2つ決められるカテゴリーのうちカテゴリー1だけをパンくずリストに表示し、マークアップもカテゴリー1だけマークする。
・階層問題については、ライブドアブログの“ブログ内URL形式”の設定で階層化できそうですが、カテゴリーを変更するたびにURLが変わってしまうのも問題がありそうなので先送りにし変更なしで試す。

では実際に修正していきます。
まずは「JSON-LD構造化データ」の部分です。書く場所は<head>~</head>または<body>~</body>のどこでも良いのですが、誤って<head>要素が拾われてしまうのを防ぐため</body>タグの直前が良いかと思います。

<!-- JSON-LD構造化データ -->
 <!-- パンくずリスト -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "トップページ",
    "item": "<$BlogUrl$>"
  }

<IfArticleCategory1>
,{
    "@type": "ListItem",
    "position": 2,
    "name": "<$ArticleCategory1$>",
    "item": "<$ArticleCategory1Url$>"
  }
</IfArticleCategory1>
,{
    "@type": "ListItem",
    "position": <IfArticleCategory1>3</IfArticleCategory1><UnlessArticleCategory1>2</UnlessArticleCategory1>,
    "name": "<$ArticleTitle ESCAPE$>",
    "item": "<$ArticlePermalink$>"
  }]
}
</script>
 <!-- パンくずリストここまで -->
<!-- JSON-LD構造化データここまで -->


次は「実際に表示されるhtmlデータ」の部分です。これを書く場所は好みでどこでも良いですが、ライブドアブログ独自タグを使っている都合上、独自タグが効く範囲でしか使えません。 記事ヘッダーの上あたりがお勧めです。

<!-- パンくずリストhtml -->
<a href="<$BlogUrl$>">トップページ</a>
<IfArticleCategory1>
 > <a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a>
</IfArticleCategory1>
 > <$ArticleTitle ESCAPE$>
<!-- /パンくずリストhtml -->

※カテゴリーは前述の理由からカテゴリー1に選ばれているもの1つしか表示しません。

以上のコードをライブドアブログのhtmlの編集で“個別ページ”の部分に変更を加え、その後に構造化データーテストツールでチェックしましたが問題はありませんでした。
前述の階層問題によりペナルティーなど受けなければいいのですが、しばらく様子を見たいと思います。

2020/02/22追記:
パンくずリストの「schema.org」によるマークアップを「JSON-LD」から「microdata」へ変更しました。
構造化マークアップするのにシンタックスの1つ「JSON-LD」で記載していましたが、先述のとおりhtmlとは別に記述する新しい方式ですが、いくつかの不安要素と現在ライブドアブログはパンくずリスト以外(記事タイトルや投稿日時など)のマークアップには「schema.org」による「microdata」方式のシンタックスを採用していたようなのでそちらに合わせました。
さらに今回はあとでデザインを変更できるようにスタイルシートを使用しレイアウトしています。
まずはhtmlコードは以下のようにライブドアブログの独自タグを使いつつ「schema.org」によるマークアップをしています。

<!-- パンくずリストhtml -->
<ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  <a itemprop="item" href="<$BlogUrl$>"><span itemprop="name">トップページ</span></a>
  <meta itemprop="position" content="1" />
 </li>

<IfArticleCategory1><!-- カテゴリー1があった場合 -->
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  <a itemprop="item" href="<$ArticleCategory1Url$>"><span itemprop="name"><$ArticleCategory1$></span></a>
  <meta itemprop="position" content="2" />
  </li>
</IfArticleCategory1>

<!-- ここのページ -->
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  <a itemprop="item" href="<$ArticlePermalink$>"><span itemprop="name"><$ArticleTitle ESCAPE$></span></a>
    <meta itemprop="position" content="<IfArticleCategory1>3</IfArticleCategory1><UnlessArticleCategory1>2</UnlessArticleCategory1>" />
  </li>
</ol>
<!-- /パンくずリストhtml -->


続いてスタイルシートの記述になります。ライブドアブロブのCSS設定から行います。

/* パンくずリスト */
.breadcrumb ol {
list-style-type: none;
}
.breadcrumb li {
  display: inline;
}
.breadcrumb li::after {
  content: '>';
}
.breadcrumb li:last-child::after {
  content: '';
}

これで構造化データーテストツールで「BreadcrumbList」の項目にエラーおよび警告が無くなりました。まぁライブドアブログだと他の項目にはエラーなどが残るのですが、そこはおいおい対策していこうと思います。