パンくずリストプラグイン「Breadcrumb NavXT」のGoogleエラー修正

はじめに

パンくずリストを表示させるプラグイン「Breadcrumb NavXT」をデフォルトのまま使用すると,「Google Search Console」のメッセージでエラーを吐き出す。

きっかけはbingで検索表示された記事がGoogle検索では表示されない問題があり,いろいろ調べたらパンくずリストプラグイン「Breadcrumb NavXT」のGoogleエラーが原因だった。
このプラグインは通常の使用では問題無いが,Googleからみると問題があるらしい。
Googleでは,記事(今回はパンくずリスト)に問題があると検索結果に表示しない仕様になっている。逆に言うとbingはパンくずリストに対応していないのでエラーチェックしていない。検索エンジンの90%を占めるGoogleとYahoo!がパンくずリストに対応しており検索結果にもパンくずリストを表示している。
今回のGoogleでのチェックで問題とされたのはパンくずリストの構造化データに問題があり検索結果に表示されなかった。調べたらこのプラグインはGoogle仕様に合っていないようだ。
Breadcrumb NavXT」の設定画面に表示のデフォルトテンプレートのコードやパンくずリストを表示させるためのコードがGoogleの求めるものでないので,これを修正したらエラーは消えた。

「Google Search Console」のエラー

Google Search Consoleの右サイドメニューのメーセージ欄にエラー表示される。
同一内容がGmailでも届く。(届いていた(-_-;)汗)

左サイドメニューの「拡張-パンくずリスト」クリックで詳細確認ができる。

「Breadcrumb NavXT」の設定変更

設定画面は4つのタブ「一般」「投稿タイプ」「タクソノミー」「その他」があり「リンクありの設定」と「リンクなしの設定」でそれぞれのコードを4つのタブに「一般4か所」「投稿タイプ6か所」「タクソノミー8か所」「その他7か所」を設定変更する。最初のタブ二つのみ設定でも問題ないみたい。

変更内容

1.デフォルトテンプレートのコード「property=”itemListElement”」の記載を「itemprop=”itemListElement”」に変更。
2.「itemscope itemtype=”http://schema.org/ListItem”」のコードも追加が必要みたい。
3.コードには「span」と「mata」タグが記載されていないとエラーになるらしいので,設定が必要な各タブ全てで「リンクあり」・「リンクなし」の2種類を設定。
4.header.phpに「パンくずリスト」の挿入箇所設定・変更
   ※後記 TOPページに表示のパンくずリストを除外する条件コード追加

いまのところ何も問題は起きていないが,今後他の設定を変更したり表示方法を大きく変えたりしたらどうなるかわからない。

テンプレートの変更

リンクありの設定
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="%title%へ移動する" href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

リンクなしの設定
<span property="itemListElement" typeof="ListItem"><span property="name" class="%type%">%htitle%</span><meta property="url" content="%link%"><meta property="position" content="%position%"></span>

  上記の設定を下記に書き換えた。

リンクありの設定
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item"  title="%title%" href="%link%" class="%type%"><span itemprop="name">%htitle%</span></a><meta itemprop="position" content="%position%"></span>

リンクなしの設定
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">%htitle%</span><meta itemprop="position" content="%position%"></span>

header.phpの変更

Breadcrumb NavXT
「パンくずリスト」の挿入箇所設定でテーマファイルエディターで「header.php」の設定を当初の設定から変更した。「header.php」の最後に追加する。

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

  上記の設定を下記に書き換えた。※が再変更あり※

<div class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
	<?php if(function_exists('bcn_display'))
	{
		bcn_display();
	}?>
</div>

修正後に「Google Search Console」から該当記事のURL検査・修正を検証後,インデックス登録をリクエストする。

TOPページでエラー

Breadcrumb NavXTの修正で該当記事のエラーは消えたがTOPのホームページでエラーが残っていた。TOPのホームページにはそもそもパンくずリストは不要なので表示させていなかったのだが,それが悪さしているようだ。
ホームページのソースを見ると案の定だった。
「span」と「mata」タグが記載されていない中途半端なコードが表示されている。

<div class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
		<!-- Breadcrumb NavXT 7.3.1 -->
	</div>

表示させないのであれば,このコードは不要なので消してしまいたいが自動で挿入されるようだ。とりあえず手っ取り早くTOPページにパンくずリストを表示させて,エラーを消してみる。

ホームページにパンくず設定


Breadcrumb NavXTの設定で「一般」タグにある「パンくずにホームページを含める。」をチェックする。

上記の設定後のホームページソースコード
「span」と「mata」タグが追加された。

<div class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
		<!-- Breadcrumb NavXT 7.3.1 -->
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">na-blog</span><meta itemprop="position" content="1"></span>	</div>

URL検査・修正を検証後,インデックス登録をリクエストする。
前回のクロール日のエラーが残って表示されている場合があるが,「公開URLをテスト」をクリックしてエラーが無ければ,次回のクロールでエラー表示は消える又はインデックス登録をリクエストで消える。

ホームページのパンくず消去

上記設定後,ホームページ上に意味のないパンくずリストが表示されるようになった。

やはり安易な方法では,どこかにしわ寄せがくる。
これを表示させないためには,ホームページの条件を入れてトップページ以外のページの時は、Breadcrumb NavXTで設定したパンくずリストを表示するというコードに変更する。
header.phpの最後に追加したコードを次のように変更する。

<?php if( !(is_home() || is_front_page() )): ?>
<div class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
	<?php if(function_exists('bcn_display'))
	{
		bcn_display();
	}?>
</div>
<?php endif; ?>

これでTOPのホームページにはパンくずリストが表示されなくなった。
「一般」タグにある「パンくずにホームページを含める。」のチェックはどちらでも問題ない。各記事のパンくずリストの左側(一番上位)に自サイトの名前が入るかどうかなので,好みの問題かな。

エラー修正完了

最終的にエラーが無くなって,問題が修正されたとメーセージが来た。

Google Search Consoleのステータスが「合格」に変わっている。\(^o^)/

追加修正

エラーが発生しているわけではないが,プラグイン「All in One SEO」で作成するヘッダー内の構造化パンくずリストの「HOME」が「家」と和訳されているのでそれを修正した。
パンくずリストはプラグイン「Breadcrumb NavXT」を使用しているが,ヘッダー内の構造化パンくずリストはプラグイン「All in One SEO」で作成しており,ユーザー設定出来ないので強制変更させるコードを追加した。

Google検索結果画面に構造化パンくずリストが表示されるが,
「家」と表示されている。何か変

修正コード

子テーマの「functions.php」に下記を追加する。
    [‘name’] = ‘ここに名称を記入’;  下記の例は ‘HOME’

//AIOSEO パンくずリストが「家」になる対策
add_filter( 'aioseo_schema_output', 'aioseo_filter_schema_output' );
function aioseo_filter_schema_output( $graphs ) {
	if($graphs[0]['itemListElement'][0]['name'] == '家'){ //$graphsの1つ目のnameが「家」の時
		$graphs[0]['itemListElement'][0]['name'] = 'HOME'; //「HOME」に置き換え
	}
	return $graphs;
}

修正結果確認

1.ホームページで右クリックしてダイアログの「ページのソース表示」
2.「view-source」画面が表示されるので「Ctrl」+「F」キー押下して検索窓表示
3.右上の検索窓に position”:1,”name を入力後,該当コードがハイライト表示される

修正前:”position”:1,”name”:”\u5bb6“ <Unicodeエスケープシーケンスで “家”のコード
修正後:”position”:1,”name”:”修正後の名称

修正後,直ぐにはGoogle検索結果には反映されない。
記事単位の個別URLをGoogle Search Console からインデックス登録リクエストすればリクエストした投稿記事のみ変更が反映される。サイト全体に反映されるには時間がかかる。
個別に投稿記事をリクエストしても良いのだが手間なので放置して,クローラーに任せる。

その他外部からの確認として「スキーマ マークアップ検証ツール」で確認できる。

変更後の検索結果

参考サイト _(._.)_
All in One SEOの構造化パンくずリストで「HOME」が「家」になってしまうときの対処法 | フロントの人の雑多メモ (knis.jp)

おわりに

Googleのチェック項目は今回のパンくずリストの構造化データ問題に限らずその他多岐に渡ってチェックしているようだ。Google Search Consoleは最初に登録後はあまり気にして見ていなかったが,たまには見てみるものだと思った。(本来は頻繁に見るべきなのかと思うが)
今回の修正内容(コード)については,おかしな箇所や間違いもあると思うが結果オーライでご容赦を!
Google検索画面の自サイト記事掲載順位なども確認できるので,それはそれでいいとは思うが掲載順位で一喜一憂するのもどうかと思うところがある。

Google関連サイト
Google Search Console
Google アナリティクス
リッチリザルト テスト – Google Search Console

bing関連サイト
Bing Webmaster Tools

【参考】Google アナリティクスの画面