Shopifyの商品ページに自動実装されている構造化データの仕組みと役割を解説しました。特にoffersプロパティは、バリエーションごとのSKU、バーコード、在庫、価格、通貨コード、固有URLを検索エンジンに正確に伝え、検索結果やGoogleショッピングでの表示最適化に寄与します。メタフィールドを活用して項目を追加すれば、さらに精度の高い構造化データを実現できます。
Shopifyが世界中でECプラットフォームとして急成長を遂げ、シェアを広げている背景には、いくつかの理由があります。
その中でも「SEOに強い」という評価は、決して都市伝説ではなく、実際の成果に裏打ちされた事実です。
モバイルファーストな設計、高速なサイト表示といった基本性能の高さに加え、検索エンジンに正確な情報を伝えるための“構造化データ”の実装も、SEOにおける大きな強みとなっています。
今回は、Shopifyが「検索に強い」とされる理由のひとつである構造化データの役割と仕組み、そしてなぜそれがGoogleなどの検索エンジンに好まれるのかを、深掘りして解説していきます。
構造化データとは
構造化データとは、ウェブページに記載された情報を、検索エンジンがより正確かつ効率的に理解できるように、あらかじめ「意味づけ」された形で記述するデータのことです。
通常、私たちが書く商品紹介や説明文は人間にはわかりやすくても、検索エンジンには曖昧に見えることがあります。
たとえば「このシャツは3,000円で販売中！」という文章があっても、それが「商品名」「価格」「在庫情報」だと判断するのは、検索エンジンにとって簡単ではありません。
そこで活用されるのが「構造化データ」。Googleなどの検索エンジンは、「Schema.org」という共通の仕様に従って記述された構造化データを見ることで、ページ内の情報を「これは商品名」「これは価格」「これは画像URL」と正確に理解します。
構造化データをどのように伝えるのか
構造化データは、主にHTMLの中に特別な形式で埋め込むことで、検索エンジンに対して明示的に情報を伝えることができます。
その方法にはいくつかの種類がありますが、現在もっとも一般的で推奨されているのが「JSON-LD（JavaScript Object Notation for Linked Data）」という形式です。
JSON-LDは、HTMLの中に「<script type=”application/ld+json”>」というタグを使って書かれます。これにより、ページに表示されている情報とは別に、機械にわかりやすいかたちでデータを宣言することができます。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "プレミアムTシャツ",
"price": "3500"
}
</script>たったこれだけでも、検索エンジンには「このページは商品で、名前はプレミアムTシャツ、価格は3,500円」という情報が伝わります。
実際のECサイトではこれに「画像」「在庫」「ブランド名」などの情報を追加して、より詳細に伝えるようにします。
Shopifyにはどこに埋め込まれている？
Shopifyでは、多くのテーマに構造化データ（JSON-LD形式）があらかじめ組み込まれており、特別な設定をしなくても検索エンジンに商品情報などを伝えることができるようになっています。
この構造化データは、Shopifyテーマ内のさまざまなテンプレートファイル（.liquidファイル）に埋め込まれており、ページの種類ごとに出力内容が変わるのが特徴です。
なかでも、検索結果のリッチスニペットとして活用されやすいのは、商品ページとブログ記事ページです。
・ブログ記事：main-article.liquid / 構造化データタイプ：@type:Article
・商品：main-product.liquid / 構造化データタイプ：@type: Product
これらは構造化データによって「価格」「レビュー」「公開日」などの情報を明示でき、SEO効果をもっとも発揮しやすいページと言えるでしょう。
なぜ「<scritpt></script>」で情報を渡すのか
初心者の方は、構造化データのコードが 「<script>」で囲まれているのを見て、「これはJavaScriptなの？」と思うかもしれません。
確かに「<script>」タグというと、JavaScriptを実行するときに使うイメージが強いですよね。
しかし本来、「<script>」 には「スクリプト（台本、原稿）」という意味があり、ブラウザや検索エンジンに何らかの命令やデータを渡すための入れ物です。必ずしもJavaScriptだけを書くためのものではありません。
ポイントは 属性です。構造化データの場合、次のように書かれています。
<script type="application/ld+json">これは、「このスクリプトはJavaScriptではなく、JSON形式のデータ（Linked Data）ですよ」という宣言です。
つまり、ここで書かれているのはJavaScriptのコードではなく、検索エンジンに渡すためのJSONデータなのです。
商品ページの構造化データ
では、実際に商品ページのテンプレートファイル(main-product.liquid)に実装されている構造化データコードを見てみたいと思います。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ request.origin | append: product.url | json }},
{% if seo_media -%}
"image": [
{{ seo_media | image_url: width: 1920 | prepend: "https:" | json }}
],
{%- endif %}
"description": {{ product.description | strip_html | json }},
{% if product.selected_or_first_available_variant.sku != blank -%}
"sku": {{ product.selected_or_first_available_variant.sku | json }},
{%- endif %}
"brand": {
"@type": "Brand",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
{%- if variant.barcode.size == 12 -%}
"gtin12": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 13 -%}
"gtin13": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 14 -%}
"gtin14": {{ variant.barcode }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ request.origin | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>商品ページの構造化データを見ていくと、ほとんどの項目はLiquidの変数と値の対応がイメージできると思います。
しかし、少し複雑に見えるのが「offers：」の部分。本来商品の構造化データにて商品の購入条件（価格や在庫状況など）を記述するためのプロパティですが、Shopifyの場合、バリエーションごとの情報をまとめています。
①sku：バリエーションのSKU。Liquidで「variant.sku」を取得・表示
②gtin12 / gtin13 / gtin14：国際商品コード（バーコード桁数で判定）。Liquidで「variant.barcode」を取得し、桁数で条件分岐して表示
③availability：在庫ありかなし。Liquidで「variant.available」を取得・表示している。
④price：価格。Liquidで「variant.price」を取得・表示している。
④priceCurrency：通貨コード(JYP,USDなど)。Liquidで「cart.currency.iso_code」を取得・表示している。
⑥url：バリエーションの個別URL。Liquidで「variant.url」を取得・表示している。
※バリエーションのURL
Shopifyの商品には、色やサイズなど複数のバリエーションを設定でき、それぞれに固有のURLが割り当てられます。これをバリエーションURLと呼びます。
多くの場合、商品ページでバリエーションを選択すると、ブラウザのアドレス欄のURL末尾に「?variant=〇〇」という形のパラメータが追加されます。
この仕組みにより、構造化データで正しく検索エンジンに伝えることが可能になります。
以上、Shopifyの商品ページにおける構造化データの仕組みと、その中でも重要な「offers」プロパティについて解説しました。
普段SEOを意識していないと、このコードを見ても「たくさんあるJavaScriptのひとつかな？」と思ってしまいがちです。しかし実際には、検索結果やGoogleショッピングにおいて、価格や在庫、バリエーション情報を正しく表示するための大事な役割を担っています。
さらに、Shopifyではメタフィールドを活用して構造化データの項目を追加することも可能です。これにより、より精度の高いデータを検索エンジンに提供できるようになります。興味のある方は、ぜひ各自で調べて実装し、自社のSEO強化に役立ててみてください。
