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

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

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

data-vocabulary.org schema deprecated

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

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

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

それで今回はワードプレスのパンくずリストのスクリプトを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の書き方に換えてみますよ。

これら属性の記述が変化します。

・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を出力出来るように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> > 
		<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ファイルをテンプレートに仕込んだら構造化データテストツールでテストをします。

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

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

とりあえずOKでした。

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

参考資料

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


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

WordPressでschema.org構造化データに対応したパンくずリストを書く方法【固定ページ用】
構造化データがサポート切れになるので、schema.orgタイプの構造化データに対応したパンくずリストを表示する方法です。このカスタマイズは、固定ページに対応しています。

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


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