【HTML】構造化データチートシート

構造化マークアップとは

ページコンテンツ情報を正確に検索エンジンに伝える専用のコードのこと

基本的な書き方

<head>
<script type="application/ld+json">
  [
    {},
    {}
  ]
</script>
</head>

共通

WebSite

ホームページに記述

<script type="application/ld+json">
  [
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "headline": "サイト名",
      "description": "ディスクリプション",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "ホームページURL"
      },
      "image": {
        "@type": "ImageObject",
        "url": "OGP画像"
      },
      "author": {
        "@type": "Person",
        "name": "サイト管理者名",
        "image": "サイト管理者画像"
      },
      "publisher": {
        "@type": "Organization",
        "name": "サイト管理会社名/サイト名",
        "logo": {
          "@type": "ImageObject",
          "url": "ロゴ画像"
        }
      },
      "datePublished": "作成日付(例:2020-04-01T00:00)",
      "dateModified": "更新日付(例:2020-04-01T00:00)"
    }
  ]
</script>

BreadcrumbList

下層ページに記述

<script type="application/ld+json">
  [
    {
      "@context": "http://schema.org",
      "@type": "BreadcrumbList",
      "description": "ディスクリプション",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "item": {
            "@id": "1階層目(例:/html/)",
            "name": "1階層目の名前"
          }
        },
        {
          "@type": "ListItem",
          "position": 2,
          "item": {
            "@id": "2階層目(例:/html/structured-cheatsheet)",
            "name": "2階層目の名前"
          }
        }
      ]
    }
  ]
</script>

ブログ・ニュース系

Article

記事下層ページに記述。検索結果にリッチリザルト機能で表示される可能性が高くなる

<script type="application/ld+json">
  [
    {
      "@context": "http://schema.org",
      "@type": "Article",
      "headline": "ページタイトル",
      "description": "ディスクリプション",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "ページURL"
      },
      "image": [
        "OGP画像(横幅696px以上の1×1の画像URL)",
        "OGP画像(横幅696px以上の4×3の画像URL)",
        "OGP画像(横幅696px以上の16×9の画像URL)"
      ],
      "author": {
        "@type": "Person",
        "name": "サイト管理者名"
      },
      "publisher": {
        "@type": "Organization",
        "name": "サイト管理会社名/サイト名",
        "logo": {
          "@type": "ImageObject",
          "url": "ロゴ画像"
        }
      },
      "datePublished": "作成日付(例:2020-04-01T00:00)",
      "dateModified": "更新日付(例:2020-04-01T00:00)"
    }
  ]
</script>

ItemList

記事カテゴリーページなどに記述。モバイルでの検索結果にカルーセル表示される事がある

<script type="application/ld+json">
  [
    {
      "@context": "http://schema.org",
      "@type": "ItemList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "url": "ページURL(例:https://korenarawakaru.com/html/tag-cheatsheet)"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "url": "ページURL(例:https://korenarawakaru.com/html/ogp-cheatsheet)"
        },
        {
          "@type": "ListItem",
          "position": 3,
          "url": "ページURL(例:https://korenarawakaru.com/html/structured-cheatsheet)"
        }
      ]
    }
  ]
</script>

VideoObject

動画のあるページなどに記述。検索結果に動画情報を掲載する

<script type="application/ld+json">
  [
    {
      "@context": "http://schema.org",
      "@type": "VideoObject",
      "name": "動画のタイトル",
      "description": "ディスクリプション",
      "thumbnailUrl": [
        "OGP画像(1×1の画像URL)",
        "OGP画像(4×3の画像URL)",
        "OGP画像(16×9の画像URL)"
      ],
      "uploadDate": "更新日付(例:2020-04-01T00:00)",
      "duration": "動画再生時間(例:PT1M54S)",
      "contentUrl": "動画のURL",
      "embedUrl": "動画のURL",
      "interactionStatistic": {
        "@type": "InteractionCounter",
        "interactionType": { "@type": "http://schema.org/WatchAction" },
        "userInteractionCount": 視聴回数(例:10000)
      }
    }
  ]
</script>

店舗系

Restaurant

店舗のホームページに記述。検索結果に店舗情報を掲載する

<script type="application/ld+json">
  [
    {
      "@context": "http://schema.org",
      "@type": "Restaurant",
      "@id": "ホームページURL",
      "url": "アクセスURL",
      "name": "店舗名(サイト名)",
      "description": "ディスクリプション",
      "telephone": "電話番号(例:00011112222)",
      "servesCuisine": "料理の種類(例:肉料理)",
      "priceRange": 金額目安(例:1000),
      "menu": "メニューページURL",
      "image": [
        "OGP画像(1×1の画像URL)",
        "OGP画像(4×3の画像URL)",
        "OGP画像(16×9の画像URL)"
      ],
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": 評価値(例:3.5),
        "bestRating": 最大評価値(例:5.0),
        "ratingCount": 評価人数(例:150)
      },
      "openingHoursSpecification": [
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday"
          ],
          "opens": "営業終了時間(例:09:00)",
          "closes": "営業終了時間(例:21:00)"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": [
            "Saturday",
            "Sunday"
          ],
          "opens": "営業終了時間(例:10:00)",
          "closes": "営業終了時間(例:23:00)"
        }
      ],
      "address": {
        "@type": "PostalAddress",
        "addressCountry": "日本",
        "postalCode": 郵便番号(例:1001005),
        "addressRegion": "都道府県(例:東京都)",
        "addressLocality": "市町村(例:千代田区丸の内)",
        "streetAddress": "番地(例:1丁目10)"
      }
    }
  ]
</script>

EC系

Product

ECの商品ページに記述。検索結果に商品情報(評価・価格・在庫状況など)を掲載する

<script type="application/ld+json">
  [
    {
      "@context": "http://schema.org",
      "@type": "Product",
      "name": "商品名(商品ページタイトル)",
      "description": "ディスクリプション",
      "sku": "販売者固有の識別子(例:000001)",
      "mpn": "製品番号",
      "brand": {
        "@type": "Brand",
        "name": "ブランド名"
      },
      "image": [
        "OGP・商品画像(1×1の画像URL)",
        "OGP・商品画像(4×3の画像URL)",
        "OGP・商品画像(16×9の画像URL)"
      ],
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "平均評価(例:4)",
          "bestRating": "最高評価(例:5)"
        },
        "author": {
          "@type": "Person",
          "name": "販売者名"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "評価の平均(例:4.5)",
        "reviewCount": "評価の人数(例:90)"
      },
      "offers": {
        "@type": "Offer",
        "url": "商品ページURL",
        "priceCurrency": "JPY",
        "price": "料金(例:1000)",
        "priceValidUntil": "価格が有効な日付(例:2020-12-31)",
        "availability": "在庫状況(在庫あり:https://schema.org/InStock、在庫なし:https://schema.org/OutOfStock)",
        "seller": {
          "@type": "Organization",
          "name": "販売元企業名"
        }
      }
    }
  ]
</script>