[最新版]構造化「schema.org」を利用してパンくずリストを作成する方法
みなさんこんにちは！ワトスンです。
今回は、、
といった疑問に答えます。
Googleは2020年4月6日以降「data-vocabulary.org」で記述された構造化データをサポートしなくなりました。data-vocabulary.orgで指定されたパンくずリストは、リッチリザルト表示がされなくなります。
そのためサーチコンソールのパンくずリスト検証画面では、「項目「itemListElement」がありません」などのエラーが表示されます。
最新のパンくずリストを作成するためには、「data-vocabulary.org」から「schema.org」の構造化データの仕様でパンくずリストを作成しなければなりません。
■読んでほしい人
HTML・PHPの基礎が身についてる方/「data-vocabulary.org」でパンくずリストを作成している方
実際に私もdata-vocabulary.orgでパンくずリストを作成していたので、”項目「itemListElement」がありません”というエラーが出ていましたが、改善できました。
最新バージョンのパンくずリストでないとエラーが出るので注意が必要です。
ここからはわかりやすく、「最新仕様のパンくずリストの作成方法」をご紹介していきます。
ではご紹介していきます。
目次
schema.orgでパンくずリストを作成
これからのパンくずリストは「schema.org」で作成しましょう。
あとで詳しく後述しますが、Googleが「schema.org」仕様の構造化データだけをサポートするようになりました。
そのため、「schema.org」でパンくずリストを作成する必要があります。
data-vocabulary.orgからschema.orgの移行
この記事を読んでいる方は、以前まで「data-vocabulary.org」でパンくずリストを作成していたと思いますが、それを「schema.org」仕様のパンくずリストへ移行していきます。
１つ１つ違いを解説していきますが、よくわからない人はコピペしてください。
まず「data-vocabulary.org」と「schema.org」の表をお見せします。
| 対象 | data-vocabulary.org | schema.org |
| パンくずリスト全体 | （該当属性なし） | itemscope itemtype=”https://schema.org/BreadcrumbList” |
| 各パンくず | itemscope itemtype=”http://data-vocabulary.org/Breadcrumb” |
itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem” |
| リンク | itemprop=”url” | itemprop=”item” |
| パンくず名 | itemprop=”title” | itemprop=”name” |
| 順番 | （該当属性なし） | itemprop=”position” |
これらの対応関係を見ながら各所変更していきます。
「data-vocabulary.org」で作成されたパンくずリスト↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php if (is_single()) { $cat = get_the_category(); if($cat && !is_wp_error($cat)){ $par = get_category($cat[0]->parent); echo '<div id="breadcrumb">'; echo '<div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="'.get_bloginfo('url').'" itemprop="url"><span itemprop="title">ホーム</span></a><span class="sp">></span></div>'; while($par && !is_wp_error($par) && $par->term_id != 0){ $echo = '<div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="'.get_category_link($par->term_id).'" itemprop="url"><span itemprop="title">'.$par->name.'</span></a><span class="sp">></span></div>'.$echo; $par = get_category($par->parent); } echo $echo.'<div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="'.get_category_link($cat[0]->term_id).'" itemprop="url"><span itemprop="title">'.$cat[0]->name.'</span></a></div>'; echo '</div><!-- /#breadcrumb -->'; } } ?> |
「schema.org」で作成されたパンくずリスト↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php if (is_single()) { $cat = get_the_category(); if($cat && !is_wp_error($cat)){ $par = get_category($cat[0]->parent); echo '<div id="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">'; echo '<div itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="'.get_bloginfo('url').'" itemprop="item"><span itemprop="name">ホーム</span></a><span class="sp">></span><meta itemprop="position" content="1" /></div>'; while($par && !is_wp_error($par) && $par->term_id != 0){ $echo = '<div itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="'.get_category_link($par->term_id).'" itemprop="item"><span itemprop="name">'.$par->name.'</span></a><span class="sp">></span><meta itemprop="position" content="2" /></div>'.$echo; $par = get_category($par->parent); } echo $echo.'<div itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="'.get_category_link($cat[0]->term_id).'" itemprop="item"><span itemprop="name">'.$cat[0]->name.'</span></a><meta itemprop="position" content="3" /></div>'; echo '</div><!-- /#breadcrumb -->'; } } ?> |
それぞれ対応関係の変更箇所を変更しました。
変更できたら新たにファイルをアップロードしてください。
GoogleSearchConsoleのエラー「項目「itemListElement」がありません」は徐々にエラー数が少なくなっていき、最終的には全てなくなります。
（＊エラーが全てなくなるのに数日かかります）
data-vocabulary.orgからschema.orgに移行する理由
ではなぜ「schema.org」へと移行しないといけないか。
それはGoogleのサポート体制の変化が原因となります。
難しいことがよくわからない方は飛ばしてもらって構いませんが、「そんなことがあったんだ～」くらいは認識しておきましょう。
Googleがdata-vocabulary.orgをサポートしてくれなくなった
Googleは2020年4月6日から、「data-vocabulary.org」 で記述された構造化データをサポートしないと発表しました。
そのため、「data-vocabulary.org 」で指定されたパンくずリストは、リッチリザルト表示（検索結果画面での表示が）されなくなります。
Googleは以前まで、「data-vocabulary.org 」と「schema.org」の両方をサポートしていましたが、「schema.org」だけをサポートすることに決めました。
一つに絞ってサポートすることで、開発に集中できるという意図でこのようなサポート体制になったのではないかと思います。
早めにパンくずリストを「schema.org」に変更しておきましょう
検索結果の順位に影響がある話ではないので、変更しなくてもいいという方がいますが、私はそうは思いません。
「data-vocabulary.org」のパンくずリストだと検索結果画面でパンくずリストが正しく表示されなかったりするので早めに「schema.org」へと変更しておきましょう。
以上で終わりです。
参考になれば嬉しいです。
なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください！
以上です。
