製品バリエーションを指定する新しい構造化データ「ProductGroup」をGoogleがサポート

[レベル: 上級]

Google は、製品バリエーションを指定する構造化データをサポートしました。

たとえば、洋服や靴、家具などの製品で次のような種類違いを構造化データで指定できます。

  • サイズ
  • 材質
  • パターン(模様・柄)
  • 対象年齢
  • 対象性別(男性向け・女性向け・ユニセックス)

ProductGroup 構造化データで製品バリエーションを構成

製品バリエーションを設定するためには、新たにサポートされた ProductGroup 構造化データを構成します。

ProductGroup 構造化データ は、製品バリエーションをグループ化するためのタイプです。
すべてのバリーションに共通する製品名や説明、ブランドなどを指定します。

それぞれのバリエーション固有の情報は、従来からサポートされる Product 構造化データで指定します。

具体的なマークアップ方法は技術ドキュメントを参照してもらうとして、あらかじめお伝えしておくと、非常に難解です。
僕は、普通の人よりは構造化データに精通していると思いますが、それでも何度も繰り返し読みました。

まず、バリエーションが単一ページで提供される場合と、複数ページで提供される場合に分けられます。
単一ページというのは、一般的にパラメータでバリエーションを切り替える構成です(正確には、切り替えても再読み込みしない構成)。

たとえば、コートのページなら次のようなイメージです。

  • https://www.example.com/coat ← バリエーション未選択のデフォルトページ
  • https://www.example.com/coat?size=small&color=green ← サイズ:S、色:グリーン
  • https://www.example.com/coat?size=small&color=lightblue ← サイズ:S、色:水色
  • https://www.example.com/coat?size=large&color=lightblue ← サイズ:L、色;水色

複数ページは、完全に異なる URL でバリエーションのページが表示される構成です。
たとえば、水色のコートは S と L の 2 サイズあり、パラメータで切り替えます。

  • https://www.example.com/coat/lightblue?size=small ← 色:水色、サイズ:S
  • https://www.example.com/coat/lightblue?size=large ← 色:水色、サイズ:L

しかし、グリーンは S サイズだけで、水色とは異なる URL で提供されます。

  • https://www.example.com/coat/green?size=small ← 色:グリーン、サイズ:L
  • 単一ページの場合は、ほぼ共通の構造データをマークアップできます。
    対して、複数ページの場合は、各ページに、そのページで定義された要素の完全な自己完結型のマークアップが必要です。
    📝すずき注:ここですでにややこしい

    バリエーションを指定するにも 2 とおりのやり方があります。

    • hasVariant プロパティを使い、各バリエーションの Product タイプを親の ProductGroupタイプにネスト
    • isVariantOf プロパティを使い、各バリエーションの Product タイプは ProductGroup タイプ と同レベルで続けて列挙
    📝すずき注:言ってることわかります?

    そのほかにも必須のプロパティとそれに付随する注意事項があります。
    技術ドキュメントには、具体的なマークアップ例が掲載されているので詳細はそちらを参考にしてください。

    EC サイトで、バリエーションがある製品を販売しているなら ProductGroup は利用したい構造化データです。
    この記事は技術的な観点では、(自分で言うのの何ですが)中途半端な解説にとどまっています。
    実装に際して不明な点が出てきたら、ヘルプコミュニティで質問してください。