【Google Search Console】突然！パンくずリストで問題が検出された場合の原因と改善方法

こんにちは！
サイバーブリッジweb担当の久保田です。

最近、Google Search Console Teamから「パンくずリストhttps://sample.com/で問題が検出されました」と警告メールが突然届き「え？なんで？今までなんの警告もなかったやん…」と驚かれた方も多いのではないでしょうか？

今回は、この警告の意味と改善方法を説明していきたいと思います！

そもそもパンくずリストとは？

ご存知の方も多いと思いますが…
パンくずリストを知らない方のために、簡単な説明をさせていただきます。

パンくずリストとは、ユーザーがwebサイトやブログのどこにいるのかを伝える階層順のリストのことです。

英語では「breadcrumbsブレェドゥクラァム」と言われます。
ちなみに、なぜパンくずリストと呼ばれているかと言うと、グリム童話の「ヘンゼルとグレーテル」が由来しているそうです。物語の中でヘンゼルとグレーテルが森の中へ入る際に迷子にならないようにと、これまで自分たちが通ってきた道にパンくずを置いていったエピソードが元となっています。

また、パンくずリストは検索エンジンのクローラー巡回を手助けする役割もあります。

クローラーがパンくずリストの構造化データを読み取ることで、そのページがどのカテゴリーに属し、どの階層に位置付けられているのか把握しやすくなり、webページ全体の構成を知ってもらえ、SEO上の効果も期待できるものです。

…と、パンくずリストの簡単な説明はここまでにして、本題に入りましょう。

警告メールの原因

警告メールが届いた方は、パンくずリストにdata-vocabulary.orgを使用していたと思います。
このdata-vocabulary.orgは、Google検索でリッチスニペットを表示させるための構造化データですが、現在はschema.orgを利用することが推奨されています。

これまでdata-vocabulary.orgを使用していても警告は出なかったのに、なぜいきなり警告のメールが来たのでしょうか？

2020年4月6日以降、data-vocabulary.orgは検索結果のリッチリザルトの対象外になる

Googleのwebマスターブログによると、このように書かれていました。

Structured data schemas such as schema.org and data-vocabulary.org are used to define shared meaningful structures for markup-based applications on the Web. With the increasing usage and popularity of schema.org we decided to focus our development on a single SD scheme. As of April 6, 2020, data-vocabulary.org markup will no longer be eligible for Google rich result features.

https://webmasters.googleblog.com/2020/01/data-vocabulary.html

簡単に翻訳すると、以下のようになります。

schema.orgやdata-vocabulary.orgなどの構造化データスキーマは、web上のマークアップをベースとしたアプリケーションの意味のある構造を定義するために使われています。schema.orgの使用と人気が高まるにつれて、Gooogleは単一のSDスキームに開発を集中することにしました。2020年4月6日から、data-vocabulary.org マークアップはGoogleのリッチな結果機能の対象外となります。

また、次のようにも書かれています。

As a preparation for the change and starting today, Search Console will issue warnings for pages using the data-vocabulary.org schema so that you can prepare for the sunset in time. This will allow you to easily identify pages using that markup and replace the data-vocabulary.org markup with schema.org.

https://webmasters.googleblog.com/2020/01/data-vocabulary.html

変更の準備として、本日から、Search Consoleはdata-vocabulary.orgスキーマを使用するページに対して警告を発行し、終了に間に合うように準備できるようにします。これにより、そのマークアップを使用してページを簡単に識別し、data-vocabulary.orgマークアップをschema.orgに置き換えることができます。

とのことです。
警告メールが届いた原因は「2020年4月6日までに、data-vocabulary.orgをschema.orgに置き換えた方がいいですよ！」ってことだったんですね。

data-vocabulary.orgからschema.orgに置き換える方法

警告が出たサイトのパンくずリストのマークアップを見てみると下記のようになっていました。

<nav class="pan">
　<ol class="breadcrumb">
　　<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
　　　<a href="https://sample.co/" itemprop="url">
　　　　<span itemprop="title">HOME</span>
　　　</a>
　　</li>		
　　<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
　　　<a href="https://sample.com/service/" itemprop="url">
　　　　<span itemprop="title">事業案内</span>
　　　</a>
　　</li>
　</ol>
</nav>

itemtype=”http://data-vocabulary.org/Breadcrumbを見ていただくと、data-vocabulary.orgが使われていることが分かりますね。

これをGoogleが推奨するschema.orgに置き換えると下記のようになります。

<nav class="pan">
　<ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
　　<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
　　　<a itemprop="item" href="https://sample.com/">
　　　　<span itemprop="name">HOME</span>
　　　</a>
　　　<meta itemprop="position" content="1" />
　　</li>
　　<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
　　　<a itemprop="item" href="https://sample.com/service/">
　　　　<span itemprop="name">事業案内</span>
　　　</a>
　　　<meta itemprop="position" content="2" />
　　</li>
　</ol>
</nav>

変更する箇所が多いので、間違えないように注意が必要です。

上記の例で変更した部分を説明します。
まず、リスト枠に対して…

<ol class="breadcrumb">
　　　⬇︎
<ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">

このように「itemscope itemtype=”http://schema.org/BreadcrumbList”」を追加しました。

次に、各リストに対して…

<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
　　　⬇︎
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

上記のように変更し、「data-vocabulary.org」から「schema.org」に置き換えました。

そして最後に内部リンクの部分を下記のように変更します。

<a href="https://sample.co/" itemprop="url">
　<span itemprop="title">HOME</span>
</a>
　　　⬇︎
<a itemprop="item" href="https://sample.com/">
　<span itemprop="name">HOME</span>
</a>
<meta itemprop="position" content="1" />

このように変更します。

<meta itemprop="position" content="1" />

リンク下に新たに追加されたこちらの部分は、リストの順番を示していますので、さらにパンくずリストが続く場合は2,3,4…と数を増やしていきましょう。

変更が完了したら構造化データテストツールで正しく設置できているか確認しましょう！

エラーが出てしまった場合

余談ですが…
上記のサンプルコードを使用して、下記のように「HOME」をフォントオーサムの家アイコンのみで表示したい場合、エラーが出てしまいますので注意です。

<a href="https://sample.co/" itemprop="url">
　<span itemprop="title">HOME</span>
</a>
　　　⬇︎
<a href="https://sample.co/" itemprop="url">
　<span itemprop="title"><i class="fas fa-home"></i></span>
</a>

どうしてもアイコンを使いたい場合は、CSSで表示させるか、下記のようにテキストを一緒に記述することでエラーを防ぐことができます。

<a href="https://sample.co/" itemprop="url">
　<span itemprop="title"><i class="fas fa-home"></i>HOME</span>
</a>

ちなみに私はここでどハマりしました…
「構造化データは合っているのになぜエラーが出るのだ!!!」って(笑)
もう赤文字嫌いになりそうでした( ；∀；)

焦っていると見落としが発生してしまったりするので、落ち着いて作業しましょう！

旧式を使用し続けた場合の検索順位への影響は？

data-vocabulary.orgからschema.orgへの置き換えが間に合わなかった場合などに気になる点としてはやっぱり「検索順位への影響はどうなのか？」ですよね。

今のところ検索順位に影響が出るという情報はなく、引き続き使用可能とのことですが、Googleからのメールには「検索結果での表示に影響がある場合がございます。」と表記されており、あくまでも表示に影響が出るだけのようですが、検索結果での表示に影響があればクリック率にも影響する可能性がありますので、早めに対応することをおすすめします。

WordPressのテーマを使っている場合

お使いのテーマにもよりますが、すでに修正対応をされたバージョンアップ版が出ていたり、次のアップデートで修正対応を行うと宣言されているものもありますので、慌てずにテーマの情報を確認してみてください。

また、アップデートをする前はバックアップを忘れずに！

修正できない場合

ご自身で修正が難しい場合や、どこを直せばいいか分からない場合は、無理に変更しようとせず、制作会社などに依頼しましょう。

依頼できる人がいない( ；∀；)

という場合は、サイバーブリッジまでご依頼ください！