schema.orgを使って構造化マークアップしよう

2018年09月27日

前回の記事では、構造化マークアップのメリットから簡単な実装方法の紹介をしました。

しかし、Google以外には反映されなかったり、利用できるタイプが限られているなどデメリットも存在します。

HTMLを触れる環境にある場合は、直接schema.orgを使ってマークアップする方が良いでしょう。

schema.orgの記述方法

schema.orgの記述方法は3種類あり、JSON-LD、RDFa Lite、microdataどれを使っても問題ありません。今回はGoogleが推奨しているJSON-LDでの記述方法について見ていきましょう。

参考：Introduction to Structured Data（英語）

JSON-LDの記述方法

JSON-LDは、W3Cの勧告を受けたシンタックス（記述方法）で、Googleも推奨しています。JSON-LDで構造化データマークアップをするメリットとして大きいのは

既存HTMLソースコードへの影響が少ない
HTMLに依存しない
ソースコードのどこにでも記載ができるので見やすい

があります。他のシンタックスよりシンプルかつ運用しやすいのがJSON-LDです。

JSON-LDの実装

JSON-LDは前述したとおり、ソースコードの中のどこにでも記述可能ですが、一般的にはhead要素内に記述します。では、順々に見ていきましょう。

JSON-LDフォーマットの宣言

<head>
<script type=”application/ld+json”>
</script>
</head>

まず必要なのが、JSON-LDを記述する宣言をhead要素内に記述することです。scriptの間に内容（JSONオブジェクト）を書いていきます。

JSONオブジェクト

<head>
<script type=”application/ld+json”>
{
“@context” : “http://schema.org”,
“@type” : “Recipe”,
“recipeCuisine” : “和食”,
“name” : “料理名”,
“image” : “/image/recipe.jpg”
}
</script>
</head>

JSONオブジェクトとは、「script」の宣言の間に波括弧｛｝で挟まれたブロックを指します。

「：」より左の部分をKey、右の部分をValueと呼びます。このペアで構成されていて、それぞれをダブルクオーテーションで囲みます。複数のペアを繋げる場合はカンマを文末に付け、最後のペアにはカンマを付けません。

JSONオブジェクト内に記載するKeyとValueは以下のように分けられます。

Key	Value
@context	http://schema.org
@type	利用するschema.orgのタイプを指定
@無し	指定したタイプのプロパティを選択

「@type」は、schema.orgが定義するタイプから選択します。
http://schema-ja.appspot.com/docs/full.html

「@無し」部分は、上で選択したタイプのプロパティを選択します。上記リンクのプロパティのリンクを選択すると利用できるプロパティが表示されます。

実装したら構造化データテストツールで検証

構造化マークアップが終わったら、必ず構造化データテストツール（https://search.google.com/structured-data/testing-tool?hl=ja ）で検証しましょう。

データテストツール

URLを入力するか、該当箇所のコードを貼り付けることで確認できます。

使用例

パンくずリスト

{
“@context” : “http://schema.org”,
“@type” : “BreadcrumbList”,
“itemListElement” : [
    {
        “@type : “ListItem”,
        “position” : 1,
        “item” : {
            “@id” : “リンクURL”,
            “name” : “1階層目”
        }
    },{
        “@type : “ListItem”,
        “position” : 2,
        “item” : {
            “@id” : “リンクURL”,
            “name” : “2階層目”
        }
    },{
        “@type : “ListItem”,
        “position” : 3,
        “item” : {
            “@id” : “リンクURL”,
            “name” : “3階層目”
        }
    }
]
}