ワードプレスのパンくずリストをdata-vocabulary.orgからschema.orgの書き方に換える

グーグルからまた警告メールが来ました。

「パンくずリスト」の問題が新たに 検出されました」という内容で警告文は以下のもの。

data-vocabulary.org schema deprecated

こんだけなんだけど、何を言ってるかというと

パンくずリストのスクリプトでdata-vocabulary.orgを使った構造化データのマークアップをしているが、それはもう古くなったんで対応しないよ。新しいものに替えなさい。

ていう事なんですって。
こんなメールね。

具体的にどんな問題なのかというと「google検索結果ページにパンくずリストが表示されないよ」って事なんです。

検索結果の記事タイトルの上に小さくパンくずリストが表示されているんですが、これが出なくなるっていう問題ですね。

これは出て欲しい!

そういう事で今回はワードプレスのパンくずリストのスクリプトをdata-vocabulary.orgからschema.orgの書き方に換える方法を調べました。

(注:PHPやワードプレスについて知識のある方向けの記事です。基礎的な説明はありません。)

作業工程

  1. パンくずリストの該当ファイルを探す
  2. スクリプト中から該当場所を抜きだす
  3. data-vocabulary.orgからschema.orgの書き方に換える
  4. 構造化テストツールでテストする

パンくずリストの該当ファイルを探す。

うちの場合、ワードプレスを使っているのでテーマファイルを書き直す事になるわけです。

って事でテーマを見ていきます。

まずはパンくずリストを生成している箇所を探さなくちゃいけないので、ヘッダーページ、固定ページ、個別投稿ページなどテンプレートを見ていってパンくずリストのスクリプトが書かれているファイルを探します。

まずは個別投稿 (single.php)で見つかりました。

あと、
固定ページ(page.php)
アーカイブ (archive.php)にもありました。

うちのサイトで使っているテーマだとこの3ファイルのようです。

スクリプト中から該当場所を見つける

パンくずリストに該当する部分のphpスクリプトを見つけて、

それを元に出力されたHTMLの該当場所も見つける。

両方を比べて確認する。

個別投稿 (single.php)でみてみます。

●パンくずリストに該当するPHPスクリプト

<div id="breadcrumb">
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo home_url(); ?>" itemprop="url">
			<span itemprop="title">ホーム</span>
		</a> > 
	</div><!--/  -->
	<?php $postcat = get_the_category(); ?>
	<?php $catid = $postcat[0]->cat_ID; ?>
	<?php $allcats = array($catid); ?>
	<?php 
	while(!$catid==0) {
		$mycat = get_category($catid);
		$catid = $mycat->parent;
		array_push($allcats, $catid);
	}
	array_pop($allcats);
	$allcats = array_reverse($allcats);
	?>
<?php foreach($allcats as $catid): ?>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo get_category_link($catid); ?>" itemprop="url">
	<span itemprop="title"><?php echo get_cat_name($catid); ?></span>
	</a> > 
	</div>
<?php endforeach; ?>
</div><!--/ #breadcrumb -->

●出力されたパンくずリストのHTML

<div id="breadcrumb">
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="https://stray-light.info/wp/" itemprop="url">
		<span itemprop="title">ホーム</span> 
	</a> > 
</div>
	<!--Loopスタート --> 	
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> 
	<a href="https://stray-light.info/wp/category/php/" itemprop="url">
		<span itemprop="title">PHP</span>
	</a> > 
</div>
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> 
	<a href="https://stray-light.info/wp/category/php/wordpress" itemprop="url">
		<span itemprop="title">WordPress</span>
	</a> > 
	</div>	<!--Loopエンド --> 
</div><!--/ #breadcrumb -->

PHPスクリプトから出力されるdata-vocabulary.org方式で書かれたパンくずリストのHTMLが確認出来ました。

data-vocabulary.orgからschema.orgの書き方に換える

さあ、それでは構造化データのマークアップをdata-vocabulary.orgからschema.orgの書き方に換えてみますよ。

schema.orgにするとこれらの属性の記述が変化します。

・itemscope
・itemtype
・itemprop

そしてパンくずリスト階層のブロックごとに
<meta itemprop=”position” content=”1″>
これが新たに付いて「content」の数値が順次増加していきます。

<div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
		<a href="https://stray-light.info/wp/" itemprop="item">
			<span itemprop="name">ホーム</span>
		</a> > 
		<meta itemprop="position" content="1">
</div><!--/  -->
<div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
		<a href="https://stray-light.info/wp/category/php/" itemprop="item">
			<span itemprop="name">PHP</span>
		</a> > 
		<meta itemprop="position" content="2">
</div>
<div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
		<a href="https://stray-light.info/wp/category/php/wordpress/“ itemprop="item">
			<span itemprop="name">WordPress</span>
		</a> > 
		<meta itemprop="position" content="3">
</div>

こんなHTMLになればいいわけです。

次はこのように変更されたHTMLを出力出来るようにPHPスクリプトを書きます。

<div id="breadcrumb"><?php $count = 0;/*順次増加していく<meta>のcontentの数値用*/ ?>
	<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		<a href="<?php echo home_url(); ?>" itemprop="item">
			<span itemprop="name">ホーム</span>
		</a>&gt; 
		<meta itemprop="position" content="1" />
	</div><!--/  -->
	<?php $postcat = get_the_category(); ?>
	<?php $catid = $postcat[0]->cat_ID; ?>
	<?php $allcats = array($catid); ?>
	<?php 
	while(!$catid==0) {
		$mycat = get_category($catid);
		$catid = $mycat->parent;
		array_push($allcats, $catid);
	}
	array_pop($allcats);
	$allcats = array_reverse($allcats);
	?>
	<?php foreach($allcats as $catid): ?><?php $count += 1; ?>
	<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		<a href="<?php echo get_category_link($catid); ?>" itemprop="item">
			<span itemprop="name"><?php echo get_cat_name($catid); ?></span>
		</a> > 
		<meta itemprop="position" content="<?php echo $count + 1; ?>" />
	</div>
	<?php endforeach; ?>
</div>

こんな感じですね。

「content」の数値が順次増加していくように
変数「$count」を作りました。

構造化データのテスト

該当する古いスクリプト部分を新しく作成したPHPスクリプトに変更します。

作成したPHPファイルをテンプレートに仕込んだら構造化データテストツールでテストをします。

→構造化データテストツール

テストしたいURLを入れるか、スクリプトを貼り付けてテストします。

とりあえずOKでした。

今回は個別投稿 (single.php)だけやって終わりにします。

参考資料

今回参考にさせてもらったサイト様です。


data-vocabulary.org schema deprecated の警告が出た!パンくずリストの構造化データを修正しましょう | mariweb
Google Search Console からメールが届きました。「パンくずリスト で問題が検出されました。(中略)以下の警告が検出されました。data-vocabulary.org schema deprecated」今回は、この警告の意味と直し方を説明していきます。

WordPressでschema.org構造化データに対応したパンくずリストを書く方法【固定ページ用】
先日(2020年1月22日未明)、以下のようなメールがGoogle Search Consoleから届きました…

ほんとは【JSON-LD】で書いておくと後から管理がしやすいという事に気付きました。
こちらの記事が参考になります。
【JSON-LD対応】WordPressでプラグインを使わずにパンくずリストを自動で生成するコードを自作してみた | WEMO
WordPressでプラグインを使わずにパンくずリストを自動生成する関数を自作してみたので、メモしておこうと思います。 カスタム投稿タイプに紐づいたタクソノミーなどもしっかり表示するように設計しており、(おそらく)全ページ種別に対応できてい


以上「ワードプレスのパンくずリストをdata-vocabulary.orgからschema.orgの書き方に換える」という記事でした。
気に入ってもらえたらシェアしてくれると嬉しいです。