Materiapolloテーマのパンくずリストの構造化データ形式を修正する。初心者困惑！

　Materiapolloテーマに使用されているパンくずリストの形式はdata-vocabulary.orgが使われているそうですが、Google検索エンジンが2020年4月6日以降サポートしなくなり、Google Search Console にてパンくずリストに関する警告が出るようになっています。

　ということで、今回はMateriapolloテーマのパンくずリストをGoogle検索エンジンがが推奨するSchema.org形式に変更した体験を具体的にわかりやすくまとめて記事にしています。

Materiapolloテーマのパンくずリストを修正する。初心者困惑！

　Materiapolloテーマが無料テンプレートとして公開されたのが2018年頃で、data-vocabulary.orgというパンくずリストの構造化データ形式を使用されているそうです。

　それがGoogle検索エンジン側の都合で2020年4月6日以降はdata-vocabulary.orgサポートしなくなりました。

　では、Materiapolloテーマのパンくずリストはどうなっちゃうのでしょうか？

Materiapolloテーマのパンくずリストを修正前

　結果、Google Search ConsoleのURL検査や構造化データ テストツールでパンくずリストに関する警告がでるようになったそうです。

　例えば、こちらの導入記事で説明したMateriapolloテーマを導入したページを構造化データ テストツールで確認してみましょう！

　パンくずリストが古い形式だと警告を受けています。

　Materiapolloテーマが採用しているdata-vocabulary.org形式がサポートされなくなったのが原因でしょう。

　パンくずリストの構造化データ形式に関しては、こちらのサイトに詳細がありますのでご確認ください。

　このため、Materiapolloテーマのパンくずリストをdata-vocabulary.org形式から、Schema.org形式に変更してみました。

Materiapolloテーマのパンくずリストを修正後

　結果、構造化データ テストツールでパンくずリストに関する警告はなくなりました！

　おぉすごい！

　ということなんですが、修正コードはA FAN OF WRX STI様の【Blogger】テーマ［Materiapollo］の紹介とカスタマイズ方法を参考にさせていただきました。

Materiapolloテーマのパンくずリストの修正内容

　先ほど、ご紹介したA FAN OF WRX STI様の【Blogger】テーマ［Materiapollo］の紹介とカスタマイズ方法のパンくずリストの構造化データ［Schema.org］へ対応章にある”こちらを以下のコードに置き換えます。”に従って、該当部分を置き換えます。

　尚、わたしがやった内容を記載するものであることを、ご了承いただき、参考にする場合は自己責任で実施してください。

data-vocabulary.org形式からSchema.org形式に変更

　コード自体の変更は、参考サイトのご指示通りに変更してください。

　補足しますと、Bloggr管理画面のテーマ→カスタムの右側▼をクリックしHTMLを編集をクリックします。

　HTML編集画面でCtrl＋Fを同時押下して、ダイアログに

<b:includable id='breadcrumb' var='posts'>を入力して

ENTERを押下します。

　検索された<b:includable id='breadcrumb' var='posts'>をもとに、

　<b:includable id='breadcrumb' var='posts'>~</b:includable>

　までのひとくくりを参考サイトのコードに置換するイメージでOKです。

パンくずリストの表示

　パンくずリストの表示に問題があります。

　上記のナビバーのパンくずリストが箇条書き風に縦に並んでしまっています。

　この部分は参考サイトで以下のようなCSSを書き加える指示があります。

li{
  display: inline; 
}

　しかし、指示通りに、CSSの追加を行うと、投稿記事の箇条書きにも影響がでます。

初心者困惑

例えば

ー投稿：編集での画面ー

しかし、liタグをスタイルシートで

li{

  display: inline; 

}

といれた投稿画面でおかしなことにならないいか確認

• 項目①
• 項目②
• 項目③

　問題点は”項目①項目②項目③”が横並びに表示されていることです。

　これは、参考サイト様にも記載されていますがSchema.org形式をliタグを使用して構成していますが、そのliにスタイルシートでdisplay: inline; で指定しているためだと思います。

初心者の解決策

　解決策としてわたしは以下のように行いました。

　コードを確認するとliタグがdivタグで囲われているので、divタグの指定を使用する。

　具体的には以降のようになります。

ーコードの抜粋ー

          <div class='breadcrumbs card'>
　　　　　・
　　　　　・
　　　　　・
　　　　　・
          </div>

従って、breadcrumbs cardの範囲でdisplay: inline; を指定することが正しそうです。

わたしは上図のように”]]></b:skin>”の前に以下のコードを追記しました。

/*----------------------------
20210406パンくずリストの処理用
-----------------------------*/
.breadcrumbs.card ul li {
display: inline;
}

これを、追加すると以下のように表示されます。

　ナビバーのパンくずリストが正しく横並びになっています。