【Blogger/Vaster2】Google Search Consoleで「パンくずリストに問題が検出」された件

2020年1月22日に「パンくずリスト〜で問題が検出されました」と書かれたタイトルのメッセージがGoogle Search Consoleより発信されて来ました。



警告の内容は”data-vocabulary.org schema deprecated”

メールの内容等を確認すると、data-vocabulary.org構造化データのマークアップを推奨しない。と言う内容で、2020.04.06よりリッチリザルトの対象外になります。

そして、data-vocabulary.orgをschema.orgに変換することを勧めています。

詳細については以下リンク参照。
https://webmasters.googleblog.com/2020/01/data-vocabulary.html


この推奨しないマークアップが、BloggerのテーマVaster2でパンくずリストで記述されています。

リッチリザルトのテストを実行してみる

パンくずリストのコードをGoogle search consolにてリッチリザルトテストを実行して、どの様に認識されているのか確認します。

Vaster2のHTMLより<!--パンくずリスト編集-->から<!--パンくずリスト編集ここまで-->をコピーしてリッチリザルトテスト(上記リンク)のコード入力の箇所に貼付けて実行します。

以下が実行結果。左側に貼付けたコード、右側がテスト結果です。
赤で囲った箇所の通り、パンくずリストの箇所が警告として扱われています。
エラーでは無いのでこのまま放置でもOK?と思いますが、忘れないうちにschema.orgに変換してみようと思います。


HTMLを変更

今回はVaster2のHTMLを変更します。
テーマ(テンプレート)のバックアップを取り、HTMLを変更していきます。

Bloggerの管理画面より テーマ>>HTMLの編集と進みテーマのHTMLを変更します。
尚、変更については自己責任でお願いします。

変更箇所
1.<!--パンくずリスト編集-->を検索します。
2.以下の青文字の通り変更。
3.必須項目の<meta itemprop="position" content="番号" />を以下緑文字の通り追加します。この番号はパンくずの階層の番号です。

すべて入力したら保存。

<!--パンくずリスト編集-->
<div class='breadcrumb-wrapper'>
 <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--記事ページのパンくず-->

<ul class='breadcrumb' itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>  <!--変更-->
 <li itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'><!--変更-->
   <a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'>
    <span itemprop='name'>Home</span>
   </a>

   <meta content='1' itemprop='position'/><!--追加-->
    </li>
     <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.labels'>
       <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.isLast == &quot;true&quot;'>
     <li>
      <a expr:href='data:label.url' itemprop='url' rel='tag'>
       <span itemprop='name'<data:label.name/></span>
      </a>

      <meta content='2' itemprop='position'/><!--追加-->                 
     </li>
       </b:if>
      </b:loop>
      <b:else/>
     </b:if>
    </b:loop>
</ul>
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!--カテゴリ アーカイブのパンくず-->

<ul class='breadcrumb' itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>  <!--変更-->
 <li itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'><!--変更-->
   <a expr:href='data:blog.homepageUrl' itemprop='url'>
     <span itemprop='name'>Home</span>
   </a>

   <meta content='1' itemprop='position'/>  <!--追加-->
 </li>
</ul>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>

<ul class='breadcrumb' itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>  <!--変更-->
 <li itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'><!--変更-->
   <a expr:href='data:blog.homepageUrl' itemprop='url'>
    <span itemprop='name'>Home</span>
   </a>

   <meta content='1' itemprop='position'/> <!--追加-->
  </li>
 </ul>
 </b:if>
   </b:if>
  </b:if>
 </b:if>
</div>
<!--パンくずリスト編集ここまで-->

再度上記コードをコピーしてリッチリザルトテストを実行します。

テストでは警告は無くなりました。

後はGoogle Search Console上て修正完了の検証を実行して結果反映を待ちます。

検証結果を確認すると警告が徐々に解決しているようなので解消まで数日かかるようです。

2020.04.02 Update

解消するまで2ヶ月でした。

以上

コメント