JSON-LDは表示用HTMLと同じデータから出力して内容を一致させる
公開日： 執筆：佐藤
JSON-LDを追加するときは、画面に表示する名称やURLとは別に、構造化データだけを手入力しないでください。表示用HTMLとJSON-LDを同じデータから出力すれば、店舗名を変更したのに構造化データだけが古い、といった食い違いを防げます。
JSON-LDは、人に見せる内容の代わりではありません。HTMLが表示を受け持ち、JSON-LDがその内容を機械で扱える形にします。役割を分けても、示す事実はそろえます。
JSON-LDはscript要素でHTMLへ埋め込む
W3CのJSON-LD 1.0仕様では、type属性をapplication/ld+jsonにしたscript要素へJSON-LDを埋め込めます。
次は説明用の仮例です。
<h1>サンプル商店 駅前店</h1>
<p><a href="http://www.example.com/stores/ekimae">店舗案内を見る</a></p>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"name": "サンプル商店 駅前店",
"url": "http://www.example.com/stores/ekimae"
}
</script>
この例では、見出しの店舗名とname、リンク先とurlが対応します。JSON-LDを追加しただけでは、利用者が読む店舗案内は完成しません。先にHTMLで必要な案内を作り、その内容を構造化して示します。
表示と構造化データは一つの正本から作る
GoogleのJSON-LDとWeb Componentsに関する説明は、データベースに保存した情報をJSON-LDとしてページへ埋め込み、表示部品とGooglebotの双方が使う構成を示しています。
実装で大切なのは、Web Componentsを採用すること自体ではありません。名称、URL、所在地などの値を保存する場所を一つに決め、表示用HTMLとJSON-LDをそこから作ることです。
店舗情報を管理画面へ登録するなら、次のように対応を決めます。
| 管理する値 | HTMLでの表示先 | JSON-LDでの出力先 |
|---|---|---|
| 店舗名 | ページの主見出し | name |
| 店舗ページのURL | 店舗案内へのリンク | url |
| 所在地 | 所在地の表示欄 | 対応する所在地情報 |
担当者が店舗名を一度直せば、両方へ反映される形が理想です。二つの入力欄へ同じ名称を登録する設計では、更新回数が増えるほど差が生じます。
先に項目の対応表を作る
構造化データを実装する前に、ページが扱う対象と、表示済みの項目を整理してください。語彙の種類を先に増やすと、画面にはない値を構造化データのためだけに用意しやすくなります。
手順は次の順番です。
- ページが扱う対象を一つ決める
- 利用者が必要とする名称、URL、所在地などをHTMLへ表示する
- 表示項目と構造化データのプロパティを対応させる
- 同じ保存データからHTMLとJSON-LDを出力する
- 出力後のHTMLと構造化データを検査する
一ページで店舗と催事を扱う場合も、値を混ぜて一つの物として扱いません。店舗の情報と催事の情報を分け、それぞれがどの表示箇所に対応するかを決めます。
更新時は空欄と食い違いを分けて調べる
検査では、JSONの構文エラーだけでなく、表示内容との対応を見ます。
空欄は、必要なデータをまだ登録していない状態です。食い違いは、HTMLとJSON-LDが異なる値を示す状態です。たとえば、HTMLの店舗名が新しく、JSON-LDのnameだけが旧名称なら、JSONの構文が正しくても管理方法に問題があります。
確認順は、次の三段階に分けます。
- JSONとして正しく解釈できるか
- 選んだ種類とプロパティの関係が正しいか
- HTMLで利用者へ見せる事実と一致するか
構文と内容を一度に調べると、どこを直したのか分かりにくくなります。まず機械が読める形を確認し、次に語彙、最後に表示との一致を見ます。
検索結果の表示を保証するために追加しない
構造化データは、ページの内容を検索エンジンへ伝える手段です。追加したからといって、特定の検索表示や順位が保証されるわけではありません。利用者へ見せる情報が乏しいまま、JSON-LDだけを詳しくする順序も逆です。
店舗情報の更新を制作会社へ委託する場合は、データを保存する場所、HTMLへ出力するテンプレート、JSON-LDへ出力する処理、公開後の検査を分けて引き継ぎます。実装を委託しても、名称や所在地の正本を決める責任は事業者側に残ります。
最初の一手は、構造化データを入れたいページを一つ選び、画面に見える項目とJSON-LDの項目を一行ずつ対応させることです。同じ値を二か所へ手入力しているなら、一つの保存データから出力する形へ直してください。
関連記事
