III-B9 検証ツールで確認する

III-B3からIII-B8まで、さまざまな型のJSON-LDを実装する方法とCMS別の実装ルートを学んできました(III-B3・III-B8参照)。しかし、書いたコードが正しく機能しているかは、実装しただけでは分かりません。ここからは、構造化データが正しく認識されているかを自分の手で確認する検証ツールの使い方を扱います。

なぜ検証が欠かせないのか

JSON-LDは、次のようにカンマ1つの抜けや余分な1つだけで、ブラウザ上の表示は問題なくても構造化データ全体が読み取れなくなることがあります。

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "株式会社サンプル",
}

最後の"name"行の末尾にある余分なカンマは、人の目では見落としがちですが、構文としては無効です。「画面表示が正常だから中身も正常」とは限らないという前提を持ち、実装のたびに検証する習慣をつけておきましょう。

Googleリッチリザルトテスト

Googleの公式ツールであるRich Results Test(リッチリザルトテスト)は、URLを入力するか、コードを直接貼り付けることで、Googleがリッチリザルト対象として認識している構造化データの種類と、エラー・警告を確認できます。エラー(赤)は必ず解消すべき致命的な問題、警告(黄)は推奨項目の不足という違いがあり、まずエラーから優先して直すのが基本の順序です。

Schema Markup Validator

Rich Results Testは、あくまでGoogleがリッチリザルト表示の対象としている型に絞った確認ツールです。BreadcrumbListやWebSite(III-B7参照)のような対象外の型も含めて、schema.orgの語彙として構文が正しいかを幅広く確認したい場合は、schema.org運営元が提供するSchema Markup Validatorを使います。2つのツールは見ている範囲が違うため、両方に通すことで抜け漏れを減らせます。

ブラウザでの目視確認とSearch Console

検証ツールにかける前段階として、ページの「ソースを表示」やブラウザの開発者ツールで、意図した<script type="application/ld+json">が実際に出力されているかを目視することも有効です。GTM経由の実装(III-B8参照)では、開発者ツールの「Elements」タブでJavaScript実行後のDOMを確認しないと、構造化データの出力自体を見落とすことがあります。実装後は、Search Consoleの拡張機能レポートを数週間おきに確認し、時間の経過とともにエラーが増えていないかも点検しましょう。

実践ステップ

1. 1
   実装済みページのURLをGoogleリッチリザルトテストに入力する
2. 2
   検出された構造化データの型が意図通りか確認する
3. 3
   エラー(赤)から優先して解消し、その後で警告(黄)を確認する
4. 4
   同じコードをSchema Markup Validatorにも通し、Google非対応の型も含めて構文を確認する
5. 5
   ページの「ソースを表示」でJSON-LDが実際に出力されているかを目視する
6. 6
   GTM経由の実装は、開発者ツールのElementsタブでJavaScript実行後のDOMも確認する
7. 7
   Search Consoleの拡張レポートを数週間後にも再確認し、エラーの再発がないか点検する

このレッスンはテキストとスライドで学べます。スライドは上のビューアからご覧ください。