よく使う構造化マークアップ

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[【HTML】構造化データチートシート](https://korenarawakaru.com/tech/html/structured-cheatsheet)

## 構造化マークアップとは
ページコンテンツ情報を正確に検索エンジンに伝える専用のコードのこと
[構造化データ リッチリザルト | Google](https://developers.google.com/search/docs/guides/search-gallery?hl=ja)

## 基本的な書き方
headタグ内に記述します。
scriptタグを使ってますが、中身はjsonなので、
この中にJavaScriptを書き込まないようにしましょう。

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

## 構造化マークアップコード

### ホームページ
@typeに、「Website」を指定します。
これは、ブログやコーポレートサイトなどのホームページで記述することをオススメします。

```html:HTML
<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-05-01T00:00)"
    }
  ]
</script>
```

### 下層ページ パンくずリスト
@typeに、「BreadcrumbList」を指定します。
これは、どのサイトであっても下層ページに必ず記述しておくことをオススメします。
<img width="860" alt="BreadcrumbList.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473780/0af35bc5-3a4d-1906-201a-c91b2b8f317f.png">

```html:HTML
<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>
```

### 下層ページ ( ブログ記事ページ )
@typeに、「Article」を指定します。
これは、ブログの記事ページなどに記述することをオススメします。
<img width="860" alt="Article.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473780/81666caa-d0aa-0623-b862-cee9598c2dfa.png">

```html:HTML
<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>
```

### 下層ページ ( カテゴリーページ )
@typeに、「ItemList」を指定します。
これは、ブログなどのカテゴリーページなどに記述することをオススメします。
<img width="860" alt="ItemList.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473780/c1f520c7-abfe-7410-7d2b-d9ab45dd25f7.png">

```html:HTML
<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>
```

### 下層ページ ( 動画サイト )
@typeに、「VideoObject」を指定します。
これは、動画サイトなどのページに記述することをオススメします。
<img width="860" alt="VideoObject.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473780/3108277d-e6a7-f379-2fd8-80f94d308c5d.png">

```html:HTML
<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>
```

### ホームページ ( 飲食店 )
@typeに、「Restaurant」を指定します。
これは、飲食店のホームページに記述することをオススメします。
<img width="860" alt="Restaurant.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473780/45d5f6e5-8bd9-7974-91fd-0799c826b077.png">

```html:HTML
<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商品ページ )
@typeに、「Product」を指定します。
これは、ECサイトなどの商品ページに記述することをオススメします。
<img width="860" alt="Product.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473780/240d54b7-2af2-12a7-3aa5-91e44de6922b.png">

```html:HTML
<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>
```

## どの構造化データを使うべきか
構造化マークアップのタイプをどれにするかについては、下記の基準で使い分けましょう。

| ページ | タイプ | 種類 |
|:--|:--|:--|
| ホームページ | Website | ブログ・コーポレート |
| ホームページ | Restaurant | 飲食店 |
| 下層ページ | BreadcrumbList | 全サイト共通 |
| 下層ページ | Article | ブログ(記事ページ) |
| 下層ページ | ItemList | ブログ(カテゴリーページ) |
| 下層ページ | VideoObject | 動画サイト |
| 下層ページ | Product | ECサイト(商品ページ) |

## 確認方法
下記のサイトを使って、テストをします。
エラー表示や推奨項目も全て埋めることが大事です。
[構造化データ テストツール](https://search.google.com/structured-data/testing-tool?hl=ja)

## まとめ
構造化マークアップを記述することで、検索エンジンがWebページの情報を正しく認識し、
正しい評価をしてくれるようになります。それにより検索順位のアップも見込めるので、
SEO対策をしたい方は記述すると良いでしょう。

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)