Google Search Console Team から「Breadcrumbs issue detected（パンくずリストの問題が検出された）」というメールが届いた。

朝目覚めて最初に確認したメールだったというのもあって寝ぼけていたから、「Warning」とかの単語が掲載されていることに凄く焦った。激しく動揺した。

Googleが推奨する内容が変わるから対策しておいてねって感じで、それほど致命的ではないけど、対応が必要になるということで、現在使用しているテーマ「XeoryBase」の環境で今回のパンくずリストの警告に対策してみた。

data-vocabulary.org schema deprecated について

まずは、Google からのメールに記載された「data-vocabulary.org schema deprecated」について簡単に説明すると、パンくずリストの構造を定義するために「data-vocabulary.org」を使うのは推奨しませんってことらしい。

data-vocabulary.org を使って定義されたパンくずリストは、2020年4月6日から検索結果に表示するリッチリザルトの対象外になるとのこと。

https://webmasters.googleblog.com/2020/01/data-vocabulary.html

リッチリザルトというのは、Googleの検索結果にレビュー件数や試合結果などを視覚的に分かりやすく表示したもの。

そのうちのひとつとしてパンくずリストも含まれていて、検索結果にパンくずリストを反映してもらうためには、data-vocabulary.org ではなく schema.org に変更しなければいけないということ。

schema.org に変更する

現在使用しているテーマ「XeoryBase」のパンくずリストのソースコードを変更前と変更後で比較する。

変更前のパンくずリスト

data-vocabulary.org の構造で記述されているパンくずリストのソースコードは下記のようになっている。

<ol class="breadcrumb clearfix">
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="（トップページURL）" itemprop="url">
      <i class="fa fa-home"></i> 
      <span itemprop="title">ホーム</span>
    </a> / 
  </li>
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="（カテゴリURL）" itemprop="url">
      <i class="fa fa-folder"></i> 
      <span itemprop="title">（カテゴリ）</span>
    </a> / 
  </li>
  <li>
    <i class="fa fa-file-text"></i> 
    （記事タイトル）
  </li>
</ol>

変更後のパンくずリスト

schema.org の構造に従って記述すると下記のようになる。

<ol class="breadcrumb clearfix" itemscope="" itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <a href="（トップページURL）" itemprop="item">
      <i class="fa fa-home"></i> 
      <span itemprop="name">ホーム</span>
    </a>
    <meta itemprop="position" content="1"> / 
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <a href="（カテゴリURL）" itemprop="item">
      <i class="fa fa-folder"></i> 
      <span itemprop="name">（カテゴリ）</span>
    </a>
    <meta itemprop="position" content="2"> / 
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <i class="fa fa-file-text"></i> 
    <span itemprop="name">（記事タイトル）</span>
    <meta itemprop="position" content="3">
  </li>
</ol>

変更箇所

変更が必要になるのは、テーマファイルの lib -> functions -> bzb-functions.php にある bzb_breadcrumb() という関数のソースコード。

data-vocabulary.org から schema.org に変更すだけだから簡単かと思ったけど、記事やカテゴリ、タグページなどページごとに分岐した先々でHTMLの記述があるから変更箇所が多かった。

こういう変更にも柔軟に対応できるようなプログラムで作られていれば変更箇所は少なかったんじゃないのかなと思ったけど、HTMLがゴリゴリに記述されていてトレースしやすいのもメリットかなと自分に言い聞かせながら編集した。決して文句でも愚痴でもない。

変更したソースコードがダラダラと長ったらしくなるから、簡素化したコーディングができれば、参考になるようにソースコードを掲載する予定だけど。

検証結果

Google Search Console にて、変更した内容に問題がないか検証できるようになっている。

検証の結果は「合格」の判定が出て、修正した内容に問題がないことが証明できた。

検証には時間がかかる、というかブログの更新の兼ね合いでクロールしてもらうタイミングが無かったのか、ずっと検証結果が保留のままだったから落ち着かなかった。