【Schema.org】構造化データ マークアップとは?

2019-08-18 12:18

SEO対策に有効な「構造化データ マークアップ」はご存知でしょうか?
検索エンジンに向けてより詳細な文書構造を送信することで、検索結果により詳細に表示されるというものです。

左画像がまさに有効にマークアップされています。「”calories”: “731 calories”」と検索エンジンへ送信していることで、検索結果の一覧にも反映されています。

パンくずのマークアップ

パンくずをマークアップすることで、検索エンジンへ階層構造を送信できます。
例えば「日本 > 関東 > 東京都 > 港区 > 赤坂地区」という構造を検索エンジンへ送信することで、「赤坂地区」が「関東」に属しているという構造を使えることができるのです。
例として、このページのマークアップは下記のようになります。こちらを参考にご自身のサイトようにカスタムしてお使いいただけると思います。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "https://minetanote.work/",
        "name": "web work Laboratory -mine_NOTE- "
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "https://minetanote.work/html/",
        "name": "カテゴリー html"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item":
      {
        "@id": "https://minetanote.work/html/schema-org/",
        "name": "【Schema.org】構造化データ マークアップとは?"
      }
    }
  ]
}
</script>

マークアップの方法は?

① マークアップ支援ツールを使う
筆者的に簡単にマークアップができると感じたのは、 Googleから出ているマークアップ支援ツールです。
url、またはhtmlから読み込みそこから「Schema.org」のタグを出力してくれます。
https://www.google.com/webmasters/markup-helper/u/0/?hl=ja

② 自分で書く
指定したいプロパティがない!という方は公式サイトのプロパティ一覧を参照する方法があります。しかしこちらは自動でコードを吐き出してくれるものではないので、知識がある方向けです。
https://schema.org/docs/full.html