最終更新日: 2023/10/06

パンくずリストの構造化データ data-vocabulary.org schema deprecated エラーの改善方法

data vocabulary org schema deprecated

先日『「パンくずリスト」の問題が新たに 検出されました』というタイトルで、Google Search Consoleから、多くサイトにメールが届いているようです。

今回はこちらの対応について解説して行きたいと思います。

Google Search Consoleからのメール内容

今回、多くのサイトで届いているメールの内容としては、下記のような内容です。

メールのスクリーンショット

Search Console により、貴サイトに影響する「パンくずリスト」関連の問題が 1 件検出されました。 主な警告 警告は、サイトの改善のための推奨項目です。警告によっては、検索結果での表示に影響がある場合がございます。また、警告が今後エラーになることも考えられます。貴サイトでは、以下の警告が検出されました。 data-vocabulary.org schema deprecated 上記の問題をできる限り解決されることをおすすめいたします。こうした問題を解消することで、サイトのエクスペリエンスや Google 検索結果での表示を最適化できます。

なんだかヤバそうな内容に見えますが、『警告』と書かれるとドキッとしてしまうのは僕だけでしょうか(笑)

原因は構造化データ

Googleは 2020 年 2 月 21 日に、data-vocabulary.org によるリッチリザルトの表示を終了するという発表をしました。 data-vocabulary.org のサポート終了は 2020 年 4 月 6 日だということです。

[sc_Linkcard url="https://webmasters.googleblog.com/2020/01/data-vocabulary.html"]

構造化データとは、検索エンジンなどのロボットが、コンテンツや、その文字列の意味を理解するためのマークアップ方法のことです。 data-vocabulary.org というのは、構造化データのマークアップ方法の一つで、マークアップの仕方としては、古いものでした。

今回、Google がこれをリッチリザルトの表示のヒントにすることを終了するというお話です。

Google は、構造化データを参考にし、『リッチリザルト』という、検索結果での特殊な表示を作ることがあります。 詳しくは、Googleの公式ページを見ていただきたいのですが、クチコミの星やサムネイル画像、パンくずリストやカルーセル表示など、様々な表示方法があります。

リッチリザルトってなんだよ!って方は、確認してみてください。

[sc_Linkcard url="https://support.google.com/webmasters/answer/7358659?hl=ja"]

対応策としては Schema.org への移行が必要

今回、サポート終了日までに data-vocabulary.org の使用をやめ、 Schema.org への移行をして欲しいということです。

Schema.org も、構造化データのマークアップ方法の一つですが、現時点で最も普及している方法です。

サイトのHTMLに記述されている、 data-vocabulary.org を削除し、 Schema.org の記述に修正する必要する必要があります。

対応しなかった場合考えられること

data-vocabulary.org から Schema.org への変更の対応を行わなかった場合、何が起こるのでしょうか。

もし、 data-vocabulary.org のまま構造化データをおいておいた場合、リッチリザルトの表示の恩恵を受けていたのであれば、通常の表示に戻ってしまう可能性があります。

これがウェブサイトの流入にどの程度の影響があるかは状況によって様々でしょうが、検索結果で目立たなくなるため、クリック率が低下する可能性が考えられます。

可能な限り対応した方がいいでしょう。

具体的な修正方法

今回、警告メールを受けたサイトの Google Search Console のパンくずリストページを確認すると、『data-vocabulary.org schema deprecated』のメッセージが表示されていました。

サーチコンソール上でのエラー

ソースコードを確認すると、下記のような記述がされていました。

1data-vocabulary.org のパンくずリストソースコード
1<ul>
2 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
3 <a href="https://example.com" itemprop="url">
4 <span itemprop="title">ホーム</span>
5 </a>
6 </li>
7 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
8 <span itemprop="title">サービス</span>
9 </li>
10</ul>

itemtype=”http://data-vocabulary.org/Breadcrumb” と書かれており、 data-vocabulary.org が使われていることがわかると思います。

これを schema.org の書き方にすると、このようになります。

1Schema.org に修正したパンくずリストソースコード
1<ol itemscope itemtype="http://schema.org/BreadcrumbList">
2 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
3 <a itemprop="item" href="https://example.com">
4 <span itemprop="name">ホーム</span>
5 </a>
6 <meta itemprop="position" content="1" />
7 </li>
8 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
9 <span itemprop="name">サービス</span>
10 <meta itemprop="position" content="2" />
11 </li>
12</ol>

少し難しくなりましたね。

可能であれば JSON-LD という記述方法での実装がおすすめ

構造化データの書き方には JSON-LD という書き方もあって、実は Google は JSON-LD での記述を勧めています。

[sc_Linkcard url="https://developers.google.com/search/docs/guides/intro-structured-data"]

構造化データの記述方法には Microdata、RDFa、JSON-LD の3つが存在していて、JSON-LD であればHTMLタグ内に構造化データを入れ込む必要がなく、構造化データの導入が簡単になります。

JSON-LD での記述方法は下記のようになります。

1JSON-LD のパンくずリストソースコード
1<ul>
2 <li>
3 <a href="https://example.com">ホーム</a>
4 </li>
5 <li>サービス</li>
6</ul>
7<script type="application/ld+json">
8 {
9 "@context": "http://schema.org",
10 "@type": "BreadcrumbList",
11 "itemListElement": [
12 {
13 "@type": "ListItem",
14 "position": 1,
15 "item": {
16 "@id": "https://example.com",
17 "name": "ホーム",
18 "image": "http://example.com/images/icon-home.png"
19 }
20 },{
21 "@type": "ListItem",
22 "position": 2,
23 "item": {
24 "@id": "https://example.com/service",
25 "name": "サービス",
26 "image": "http://example.com/images/icon-service.png"
27 }
28 },{
29 <p>中略</p>
30 }
31 }]
32 }
33</script>

このように、HTMLと構造化データを別で書きますので、挿入もメンテナンスもしやすそうですよね。

Wordpress で JSON-LD を使ってパンくずリストをマークアップする方法

Wordpressをお使いであれば、JSON-LD での構造化データマークアップの導入は比較的簡単で、 一般的には、テーマファイルのfooter.phpの、</body>(bodyの終了タグ)の直前に、対応するコードを貼り付けて実装できます。

このサイトで使っているコードを共有しますが、このコード1つで全てのページで対応ができますので、非常に簡単です。

1Wordpress JSON-LD 対応のパンくずリストソースコード
1<!-- パンくず構造化 -->
2<?php
3$catarg = get_the_category();
4$catname = $catarg[0]->name;
5$catslug = $catarg[0]->slug;
6?>
7<?php if(is_home()): ?>
8<?php elseif(is_archive()): ?>
9<script type="application/ld+json">
10{
11 "@context": "https://schema.org",
12 "@type": "BreadcrumbList",
13 "itemListElement": [
14 {
15 "@type": "ListItem",
16 "position": 1,
17 "item": {
18 "@id": "<?php echo site_url(); ?>",
19 "name": "HOME"
20 }
21 }, {
22 "@type": "ListItem",
23 "position": 2,
24 "item": {
25 "@id": "<?php echo site_url().'/'.$catslug; ?>",
26 "name": "<?php echo $catname; ?>"
27 }
28 }
29 ]
30}
31</script>
32<?php elseif(is_single()): ?>
33<script type="application/ld+json">
34{
35 "@context": "https://schema.org",
36 "@type": "BreadcrumbList",
37 "itemListElement": [
38 {
39 "@type": "ListItem",
40 "position": 1,
41 "item": {
42 "@id": "<?php echo site_url(); ?>",
43 "name": "HOME"
44 }
45 }
46, {
47 "@type": "ListItem",
48 "position": 2,
49 "item": {
50 "@id": "<?php echo site_url().'/'.$catslug; ?>",
51 "name": "<?php echo $catname; ?>"
52 }
53 }
54, {
55 "@type": "ListItem",
56 "position": 3,
57 "item": {
58 "@id": "<?php echo post_permalink(); ?>",
59 "name": "<?php echo get_the_title(); ?>"
60 }
61 }
62 ]
63}
64</script>
65<?php elseif(is_page()): ?>
66<script type="application/ld+json">
67{
68 "@context": "https://schema.org",
69 "@type": "BreadcrumbList",
70 "itemListElement": [
71 {
72 "@type": "ListItem",
73 "position": 1,
74 "item": {
75 "@id": "<?php echo site_url(); ?>",
76 "name": "HOME"
77 }
78 }, {
79 "@type": "ListItem",
80 "position": 2,
81 "item": {
82 "@id": "<?php echo post_permalink(); ?>",
83 "name": "<?php echo get_the_title(); ?>"
84 }
85 }
86 ]
87}
88</script>
89<?php endif; ?>

以下のサイトを参考にしています。

[sc_Linkcard url="https://tedate.jp/wp-tips/structured-breadcrumb-for-wordpress"]

変更が完了したら、リッチリザルト テスト か、構造化データ テストツール で、正しく設置できているか確認することができます。

[sc_Linkcard url="https://search.google.com/test/rich-results?hl=ja"]

リッチリザルト テストでは、下記のエラーが表示されなければ問題ありません。

リッチリザルト テストスクリーンショット

[sc_Linkcard url="https://search.google.com/structured-data/testing-tool/u/0/" title="構造化データ テストツール"]

構造化データ テストツールでは、下記のエラーが表示されなければ問題ありません。 (構造化データ テストツールの方がわかりやすい説明ですね。)

構造化データ テストツールスクリーンショット

わからない点はお気軽にご相談ください

急に警告メールが届いて不安に思った方もいらっしゃると思います。

構造化データは、過去のHTMLによるマークアップよりも複雑でわかりづらい点も多いかと思います。 この記事が多少なりとも、お役に立てばと思います。

記事を読んで不明な点等がありましたらお気軽にTwitter(@kaznak_com)などでご質問ください。

ではまた。

監修者紹介

中村 一浩

代表取締役CEO

株式会社ココログラフ 代表取締役CEO。1982年生まれ。高校卒業後に携帯販売業界にて、インターネットとハードウェアの急速な進化に触れた後、ウェブの面白さに惹かれ、2009年に株式会社ジオコードに入社。SEOを中心にウェブマーケティングを学び、同時にウェブ制作部門、システム開発部門のマネジメントも兼務。幅広いウェブ運用知識を有する。2018年に独立・起業し、検索エンジンだけでなく検索ユーザーにまで最適化する、SEOの上位互換サービスSUOを提供。SEO / SUOの独自レポートツール、サチコレポート開発者。著書『現場のプロが教えるSEOの最新常識』

■得意領域

ウェブサイト改善 / SEO対策 / コンテンツマーケティング

600社の実績、継続率78%。
“見つかる”をつくるプロに、
まず相談。

“見つかる”をつくるその先に、お客様の成果がある。ココログラフはSEO・AIO・Web制作を通じて、その実現をお手伝いします。

03-6845-138010:00〜18:00(平日)