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

しかし、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です。

自社の魅力を「広く・深く」伝えるならferretの広告

ブランド認知広告を出稿した
効果を見てみる

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階層目”
        }
    }
]
}

まとめ

構造化マークアップはメリットが多く、可能ならば実装するほうが良いでしょう。そんな中でも、今回紹介したJSON-LDは既存ソースコードを汚すこと無く実装できるのでおすすめです。ぜひ取り組んでみてください。