パンくずリストの問題検出について解決する方法を紹介します。
Googleはdata-vocabulary.orgのスキーマサポートを終了したそうで、schema.orgにパンくずリストを互換/移行させる必要があります。
追記：Google Search Consoleを確認しました。
無事、以下の画像の通り、エラーは消えました。
まだ未対応の人は是非やってみて下さい。
サーチコンソールのURL検査のトップ画面に反映されるには数日かかるようです。
追記2：トップページのURLに対して「itemListElement」がありませんと表示された場合、後述するプラグインBreadcrumb NavXTの【現在の項目にリンク】の「はい」にチェックを入れて下さい(画像も貼っておきます)。
追記3：ワードプレスのテーマでJINを使っている人は、テーマをアップデートすればパンくずリストの問題が解決すると発売元から発表がありました。
以下、JIN発売元のツイートより
ーーー
JIN2.360リリースしました！
・パンくずリストのマークアップ方法変更（それに伴うsearch console上でのパンくず警告の解消
ーーー
Search Consoleから届いたパンくずリスト問題、昨日ツイートした内容で無事に解消した模様。
警告は、サイトの改善のための推奨項目です。警告によっては、検索結果での表示に影響がある場合がございます。また、警告が今後エラーになることも考えられます。
data-vocabulary .org schema deprecated pic.twitter.com/exr8NqtMHr— シマ(ガチ体育系銀行員ed) (@shima_sln) January 22, 2020
Search Consoleから届いたパンくずリスト問題、昨日ツイートした内容で無事に解消した模様。
警告は、サイトの改善のための推奨項目です。警告によっては、検索結果での表示に影響がある場合がございます。また、警告が今後エラーになることも考えられます。data-vocabulary .org schema deprecated
基本的な流れは動画で話していて、記事は動画で「概要欄に載せます」などと言っていた各種リンクなどを説明と共に貼っておきます。
パンくずリストの問題検出について解決する方法
見出しそのまま、パンくずリストの問題検出について解決する方法を書いていきます。
Googleから届いたメールリンクでエラー確認
Googleから届いたメールリンクからエラーを確認して下さい。
エラーの内容を確認した上で、構造化データテストツールを使ってどのような問題があるか先に見ておくと分かりやすいです。
プラグインでschema互換のパンくずリストを作成
schema(スキーマ)に互換性のあるパンくずリストを作成出来るプラグイン
、Breadcrumb NavXTをインストールして有効化して下さい。
以下がポイントです。
・テーマに頼らずパンくずリストを作れる
・パンくずの区切りを「/」にする
→見栄えが良くなるのと、無駄にパンくずリストが長くならない。
・サイトトップを「Home」などに変更しておく
→Home部分にサイト名があると非常に見辛い。
・【現在の項目にリンク】にチェックを入れる←追記
追記：Breadcrumb NavXTでの設定
トップページURLのパンくずリストで「itemListElement」がありませんと通知が届いた場合には以下の通りチェックを入れて下さい。これで解決します。
Headにschema情報を円滑に入れる準備
プラグインのHead, Footer and Post Injectionsをダウンロード/有効化しましょう。
これでCSSのベースを触らずに情報追加が可能となります。
Headにschema関連の情報を追加する
Head, Footer and Post Injectionsを使ってHead内に以下の情報を追加してください。
<div class=“breadcrumbs” vocab=“http://schema.org/” typeof=“BreadcrumbList”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>
カスタムCSSでパンくずリストのサイズ設定をする
カスタムCSSでパンくずリストのサイズ設定をしていきます。
以下のコードをワードプレスの一般設定→サイトをカスタマイズにあるカスタムCSSに追加してください。
div.breadcrumbs {
font-size: 10px;
margin: 1px auto 5px;
padding: 0;
}
動画で話している通り、フォントサイズや縦幅はPC画面だけでなく、必ずスマートフォンでチェックしましょう。
font-size ：10くらいが個人的にちょうど良いです。
auto(縦幅)：5pxくらいが良い。
既存テーマのパンくずリストをオフにする
そうしたら、既存テーマのパンくずリストをオフにしてください。
やり方は「自分の使ってるテーマ名＋パンくずリスト＋非表示にする方法」とかで検索してもらえればと思います。
構造化データテストツールでエラー解消を確認
最後に、構造化データテストツールでエラーが解消されたか確認してください。
解消されていればこれで終了です。
パンくずリストの問題検出解決 まとめ
最後に一通りの流れをまとめます。
[box03 title=”対パンくずリスト問題”]1.Googleから届いたメールリンクでエラー確認
2.プラグインでschema互換のパンくずリストを作成
3.Headにschema情報を円滑に入れる準備
4.Headにschema関連の情報を追加する
5.カスタムCSSでパンくずリストのサイズ設定をする
6.既存テーマのパンくずリストをオフにする
7.構造化データテストツールでエラー解消を確認[/box03]
以上です。
これでサーチコンソールからのパンくずリスト問題検出のエラーは解消されます。
もしトレンドブログをやられている人は問題が解決したら、こちらの記事も見てみて下さい↓
パンくずリスト問題検出から学ぶ大事なこと
今回、個人的にパンくずリスト問題検出から学びがありましたので共有です。
最初はどこのサイトを見ても明確な解決策がなく、3-4時間ネット巡回してました。
(もしかするとググり方の問題？)
そんな中でスキーマだとか構造化だとか、1つ1つの単語の意味やエラーの原因を考えた結果、今回の流れに行き着きました。
要するに、
色々な問題や不明な単語が多く出ている中でも、それぞれの意味を紐解いて考えていけば解決策に繋がる
という事です。
思考停止になってしまった結果、誰かに聞いてしまう事もあるかもしれませんが、敢えて立ち向かう事によるメリットもあるんですよ、という話です。
記事を見て不明な場合には是非、動画も合わせてご覧下さい。
それでは！
シマ
