JSON-LDでマークアップする方法

最終更新日： 2020年8月13日 SEO

JSON-LDでマークアップ

JSON-LDでマークアップするメリットは、ソースコード内に”<script>”タグ形式で追記するだけで済むため、既存のソースコードを大きく修正する必要がなく、新たに追加しやすい特徴があります。

またページのどこに記述しても良いのメリットがあります。ヘッダー内でもフッターでもソースコード内ならどこでもOKです。

具体的な例

こちらは、Appleの公式サイト内のmacbookproのページで使用されていたコードです。

    
      <script type="application/ld+json">
        {
          "@context":"http://schema.org",
          "@type":"Product",
          "name":"MacBook Proを購入",
          "url":"https://www.apple.com/jp/shop/buy-mac/macbook-pro/13インチ",
          "mainEntityOfPage":"https://www.apple.com/jp/shop/buy-mac/macbook-pro/13インチ",
          "offers":
          [
            {"@type":"Offer",
              "priceCurrency":"JPY",
              "price":220800.00,
              "sku":"MV972J/A"
            },

            {
              "@type":"Offer",
              "priceCurrency":"JPY",
              "price":198800.00,
              "sku":"MV992J/A"
            },
            {
              "@type":"Offer",
              "priceCurrency":"JPY",
              "price":198800.00,
              "sku":"MV962J/A"
            },

            {
              "@type":"Offer",
              "priceCurrency":"JPY",
              "price":220800.00,
              "sku":"MV9A2J/A"
            },
            {
              "@type":"Offer",
              "priceCurrency":"JPY",
              "price":159800.00,
              "sku":"MUHP2J/A"
            },

            {
              "@type":"Offer",
              "priceCurrency":"JPY",
              "price":139800.00,
              "sku":"MUHQ2J/A"
            },

            {
              "@type":"Offer",
              "priceCurrency":"JPY",
              "price":159800.00,
              "sku":"MUHR2J/A"
            },

            {
              "@type":"Offer",
              "priceCurrency":"JPY",
              "price":139800.00,
              "sku":"MUHN2J/A"
            }
          ],
          "image":"https://store.storeimages.cdn-apple.com/8567/as-images.apple.com/is/MBP13ST-201807?wid=324&hei=324&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1531249597131"
        }
      </script>

値段は変動する可能性もあるため、私が調べた時の金額ですので、最新の金額はAppleの公式サイトにてご確認ください。

“priceCurrency”と”Price”

マークアップしていく中で、どのタイプで記述するかで必須項目が設定されています。その中でも注意しないと行けないのが、”priceCurrency”と”price”です。日本の商品であれば”JPY”で問題ありませんが、海外の商品の場合”USD”などで指定しないといけません。

私自身もやらかしたミスですが、”price”で「,」を入れてしまうことです。「,」を入れるとエラーが出た記憶があり、それ以来入れていません。例えば1,000円の商品なら”1000″とだけ入力するようにしてください。

JSON-LDでの書き方

サイトの紹介ページならサイト紹介、会社の紹介ページであれば企業情報を、レシピならその作り方などと、ページに合わせてカスタマイズしていくことがベストな記述方法です。

必須項目を必ず記述する

構造化マークアップの最大の目的は、リッチリザルトで情報を表示させるためです。これが唯一かつ最終的なゴールであるという前提のもとに作業をしましょう。ここがぶれてしまうと、単なる徒労に終わってしまいます。まして、確実に設定したとしても、必ずしも表示されるかどうかは不明というのがリッチリザルトです。Google先生にすべて委ねられてしまうのも事実です。しかし、記述しないと表示されるチャンスが0になるため、やはりやるべきな対策であることには変わりません。またきちんとした対策を取れば、ペナルティを受けるリスクが無い施策であるため、CTRの向上や改善・順位UPを本気で目指しコスト0円で対策するならこれほど可能性を秘めた対策はありません。つまり、やる以外の選択はないということです。

前置きが長くなってしまいましたが、記述するタイプによって、必須項目は変わってきます。

記事（Article）での記述の例

ブログを例えば、”Article”としてマークアップをしていく場合を例に紹介していきます。

    
      {
        "@context": "https://schema.org",
        "@type": "Article",
        "author": "ああああああ",
        "publisher":
        {
          "@type": "Organization",
          "name": "いいいいいい",
          "url": "https://うううううう.com/",
          "logo":  {
            "@type":"ImageObject",
            "url":"https://aaaaaaa.com/bbbbbbb.jpg"
          }
        },
        "mainEntityOfPage": "https://aaaaaaa.com/20200318/",
        "headline": "記事のタイトルなどを全角55文字以内で書く",
        "datePublished": "2020-03-18",
        "dateModified": "2020-03-18",
        "image": "https://○○○○○.com/××××××.jpg"
      }

とこんな感じになります。

項目の解説

”Article”で設定する場合、”author”、”publisher”、”headline”、”image”は必須となります。上記のサンプルはブログサイトを会社として運営している場合などでのパターンを例にしています。

author: 記事を書いた人のことです。個人のブログであれば、ご自身の名前が該当します。
publisher: <出版社という意味になりますが、ブログであれば運営元や運営会社が、ニュースサイトであれば〇〇新聞のような所が該当します。
publisherのOrganization: ”publisher”はやっかいなプロパティです。単独だけではlogoを必須とするため、入れ子構造にして情報を追加する必要があります。組織を意味する”Organization”としてlogo、つまりサイトのロゴや会社のロゴを指定する必要があります。ここに”url”で会社のサイトを指定しても問題ありません。
mainEntityOfPage: こちらは、無くても問題プロパティです。色々と調べた結果、真価を発揮するのはAMP対応のサイトやAMPページがある場合です。いわゆる正規化にあたる ”canonical” を設定している場合です。canonicalタグで指定しているURLを記述するのがベストのようです。AMPページのみで作成されてい場合は、現在のURLでもエラーは出ませんでした。
headline: 半角110文字、全角55文字を超えないように設定します。見出しという扱いになるため、記事であれば記事タイトルを設定するパターンが王道です。
datePublished／dateModified: 記事の作成日／変更日を記述します。記事の鮮度をより正確に伝えたい場合などで使用するプロパティです。dateModifiedは、修正・変更が無ければ、記述し無くても問題ありません。
image: 記事で使用される画像のURLを設定しましょう。もしCSSのbackground-imageとして画像を表示させている場合は、そちらを使用するのではなく、GoogleBotでクロール可能な画像を設定させましょう。

その他の例

      
      <script type="application/ld+json">
        {
          "@context": "http://schema.org/",
          "@type": "Person",
          "name": "Jane Doe",
          "jobTitle": "Professor",
          "telephone": "(425) 123-4567",
          "url": "http://www.janedoe.com"
        }
      </script>

上記は、人物の紹介（Person）の場合のサンプルです。こちらのサンプルデータは、JSON for Linking Dataの自動生成されるサンプルデータです。

上記のページで、簡単に生成することができるので、不慣れな方は上記のサイトでサンプルを作成して、データを自分のサイトに合わせて入れ替えて使用すると早いかもしれません。

JSON形式の記述方法に慣れていないと、シンタックスエラーが頻出します。私自身がよくやるミスは、「,」のミスです。足りないと当然ながらエラーが起きますが、例えば配列最後の項目に「,」をつけてもエラーが起きます。「{」の閉じ忘れなどもエラーのあるあるですのでご注意ください。

AMPサイトと通常サイトとでは必須項目が異なる

AMP対応しているサイトやページと、通常ページとでは必須となるプロパティが異なります。

Articleの例で紹介すると、”author”欄が必須となり、更に入れ子構造上に、Person/Organizationを決めて、”name”で記事を書いた人を指定しなければなりません。

さらに、”publisher”の”name”の他に、”logo”には”height”、”width”、”url”を記述する必要があります。これらの対策は、AMPページでなければ特に問題はありません。

WordPress対策

JSON-LDでマークアップを検討している方で、Wordpress を使用してサイトを運営している方も多数いると思います。テンプレートによっては、デフォルトで全ページが「WEBサイト」や「記事」としてマークアップする設定となっている場合もあります。

しかし、たとえ記事のサイトとしてマークアップをしても、商品紹介をメインとしたい記事もあるかもしれません。その際には、個別に記述をした方が良いケースもあり、特にブログで収益を得ている方にとっては差が出やすいポイントかもしれません。

記事毎に設定する

極めて面倒ですが、一番確実に反映させる手段でもあります。

    
  <script type="application/ld+json">
    {
      "@context": "http://schema.org/",
      "@type": "Article",
      "name": "Jane Doe",
      "jobTitle": "Professor",
      "telephone": "(425) 123-4567",
      "url": "http://www.janedoe.com"
    }
  </script>

文字列として表示されないため、記事を投稿・更新する際に、HTMLで編集モードにして記述したコードをペースして更新するだけでマークアップ作業が完了します。

変数を使用する場合は注意

wordpressの関数や自作のFunctionを利用して、汎用的なテンプレートを作成してまえば、記事を今まで通り更新するだけで、構造化マークアップにも対応できるように設定することも可能です。しかし、wordpressであればphpの知識やwordpress関数の知識が必要になるため、テンプレートのコーディングに慣れていない方にはおすすめしません。”,”や”;”が1つ入れ忘れただけで、シンタックスエラーとなりサーバーエラーが起きます。不慣れな人にはおすすめしません。

お気軽にお問い合わせください

ご相談はこちら

Pure SEO メニュー

JSON-LDでマークアップする方法