Liquid Snippets by ALSEL
🌐 SEO/構造化データ中級

商品ページのProduct構造化データ

商品詳細ページに schema.org の Product 型 JSON-LD を埋め込み、Google 検索のリッチリザルト(価格・在庫・バリアント)に対応させる。SKU・バーコード(GTIN12/13/14)・ブランド・説明文も含め、検索結果での表示品質を高める。

用途
商品ページで Google の「商品スニペット」や「リッチリザルト」表示を狙うときに必須。複数バリアント(色・サイズ等)がある場合も個別に構造化データを出力でき、Google Shopping や検索結果で価格・在庫・品番が正確に表示される。
設置場所
snippets/json-ld-product.liquid に配置し、templates/product.liquid または sections/main-product.liquid の `</body>` タグ直前で `{% render 'json-ld-product' %}` で呼び出す。
注意点
price は money_without_currency で通貨記号を除き、remove: ',' でカンマを削除する必要があるため、ストア通貨が円の場合も数値のみで出力すること。barcode が SKU と異なる場合は管理画面で明確に設定してから本番デプロイを推奨。複数バリアントがあるときは offers が配列になり、additionalProperty の item_group_id で同一商品グループとして Google に認識させるため、この構造を保つ。Google Search Console の URL 検査ツールと Structured Data Testing Tool でエラーが出ていないか本番公開前に必ず確認する。
タグ:json-ldschema-orgproductseorich-resultvariant

コード

133 行 / liquid
{%- comment -%}
    Based from https://feedarmy.com/kb/shopify-microdata-for-google-shopping/
    Basic usage : {% render 'json-ld-product' %} in product template
{%- endcomment -%}

<!-- Copyright FeedArmy 2020 Version 2.39 -->
{%- assign fa_current_variant = product.selected_or_first_available_variant -%}
{%- assign fa_variant_count = product.variants | size -%}
{%- assign fa_count = 0 -%}
<script type="application/ld+json" data-creator_name="FeedArmy">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title | strip_html | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {%- if product.variants.first.sku != blank -%}
    "sku": "{{ product.variants.first.sku }}",
  {%- else -%}
    "sku": "{{ product.variants.first.id }}",
  {%- endif -%}
  {%- if product.variants.first.barcode.size == 12 -%}
    "gtin12": {{ product.variants.first.barcode }},
  {%- endif -%}
  {%- if product.variants.first.barcode.size == 13 -%}
    "gtin13": {{ product.variants.first.barcode }},
  {%- endif -%}
  {%- if product.variants.first.barcode.size == 14 -%}
    "gtin14": {{ product.variants.first.barcode }},
  {%- endif -%}
    "productID": "{{ product.id }}",
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  "description": {{ product.description | strip_html | json }},
  "image": "https:{{ product.featured_image.src | img_url: 'grande' }}",
  {%- if product.variants -%}
  {%- assign fa_count = fa_count | plus: 1 -%}
    "offers": {% if product.variants.size > 1 %}[{% endif %}
      {
        "@type" : "Offer",
        "priceCurrency": "{{ cart.currency.iso_code }}",
        "price": "{{ fa_current_variant.price | money_without_currency  | strip_html | remove: ',' }}",
        "itemCondition" : "http://schema.org/NewCondition",
        "availability" : "http://schema.org/{% if fa_current_variant.available %}InStock{% else %}OutOfStock{% endif %}",
        "url" : "{{ shop.url }}{{ fa_current_variant.url }}",
            {%- if fa_current_variant.image -%}
              {% assign variant_image_size = fa_current_variant.image.width | append: 'x' %}
              "image": "https:{{ fa_current_variant.image.src | img_url: variant_image_size }}",
            {%- else -%}
              "image": "https:{{ product.featured_image.src | img_url: 'grande' }}",
            {%- endif -%}
            {%- if fa_current_variant.title != 'Default Title' -%}
              "name" : "{{ product.title | strip_html | escape }} - {{ fa_current_variant.title | escape }}",
            {%- else -%}
              "name" : "{{ product.title | strip_html | escape }}",
            {%- endif -%}
            {% if fa_current_variant.barcode.size == 12 %}
              "gtin12": {{ fa_current_variant.barcode }},
            {%- endif -%}
            {%- if fa_current_variant.barcode.size == 13 -%}
              "gtin13": {{ fa_current_variant.barcode }},
            {%- endif -%}
            {%- if fa_current_variant.barcode.size == 14 -%}
              "gtin14": {{ fa_current_variant.barcode }},
            {%- endif -%}
            {%- if fa_current_variant.sku != blank -%}
              "sku": "{{ fa_current_variant.sku }}",
            {%- else -%}
              "sku": "{{ fa_current_variant.id }}",
            {%- endif -%}
            {%- if product.description != blank -%}
            "description" : {{ product.description | strip_html | json }},
            {%- endif -%}
          "priceValidUntil": "{{ 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' | uri_encode | replace:'+','%20' }}"
      }{%- if product.variants.size != 1 -%},{%- endif -%}
      {%- for variant in product.variants -%}
      {%- if variant != product.selected_or_first_available_variant -%}
      {%- assign fa_count = fa_count | plus: 1 -%}
        {
          "@type" : "Offer",
          "priceCurrency": "{{ cart.currency.iso_code }}",
          "price": "{{ variant.price | money_without_currency  | strip_html | remove: ',' }}",
          "itemCondition" : "http://schema.org/NewCondition",
          "availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
          "url" : "{{ shop.url }}{{ variant.url }}",
              {%- if variant.image -%}
                {% assign variant_image_size = variant.image.width | append: 'x' %}
                "image": "http:{{ variant.image.src | img_url: variant_image_size }}",
              {%- else -%}
                "image": "https:{{ product.featured_image.src | img_url: 'grande' }}",
              {%- endif -%}
              {%- if variant.title != 'Default Title' -%}
                "name" : "{{ product.title | strip_html | escape }} - {{ variant.title | escape }}",
              {%- else -%}
                "name" : "{{ product.title | strip_html | escape }}",
              {%- 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 -%}
              {%- if variant.sku != blank -%}
                "sku": "{{ variant.sku }}",
              {%- else -%}
                "sku": "{{ variant.id }}",
              {%- endif -%}
              {%- if product.description != blank -%}
              "description" : {{ product.description | strip_html | json }},
              {%- endif -%}
              "priceValidUntil": "{{ 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' | uri_encode | replace:'+','%20' }}"
          }
          {%- if fa_count < fa_variant_count -%}
         	{%- unless forloop.last -%},{%- endunless -%}
          {%- endif -%}
          {%- endif -%}
      {%- endfor -%}
    {%- if product.variants.size > 1 -%}],
      "additionalProperty": [{
        "@type": "PropertyValue",
        "propertyID": "item_group_id",
        "value": "{{ product.id }}"
      }]
    {%- endif -%}
  {%- endif -%}
}
</script>
<!-- Copyright FeedArmy 2020 Version 2.39 -->

出典・ライセンス

License:
MIT

このコードは pgrimaud 著作の MIT ライセンスソースです。 原本の著作権は pgrimaud が保有します。日本語訳は ALSEL によるものです。

関連項目

🌐 SEO/構造化データ初級

サイト検索のWebSite構造化データ

ストアの検索機能を schema.org の WebSite / SearchAction 型として JSON-LD で埋め込む。Google 検索ボックス機能をサポートし、検索結果ページのURL形式を指定する。

📁 shopify-snippets·MIT·17
🌐 SEO/構造化データ初級

ストア情報のOrganization構造化データ

ストア全体の基本情報(URL、ロゴ、SNS リンク)を schema.org の Organization 型 JSON-LD として埋め込む。Google 検索結果やナレッジパネルにストア情報を表示させるための構造化データ。

📁 shopify-snippets·MIT·22
🌐 SEO/構造化データ中級

Twitter Card メタタグ

商品ページ・ブログ記事・その他ページに対応した Twitter Card メタタグを <head> に出力するスニペット。ページタイプごとに card 型を切り替え、価格・在庫・ブランドなどを表示。

📁 shopify-snippets·MIT·37
🌐 SEO/構造化データ初級

ページのOGP・Twitterカードメタタグ

ページタイトル、説明、画像、URL などから Open Graph Protocol と Twitter Card のメタタグを自動生成する。商品ページでは価格情報も追加される。

📁 ks-bootshop·MIT·39
🌐 SEO/構造化データ中級

OGメタタグ(商品・記事・ページ別)

商品ページ、ブログ記事、その他ページの種類に応じて、Facebook / Twitter などの SNS で正しく共有されるための OG メタタグを自動生成する。商品は画像・価格・在庫、記事はアイキャッチ画像、その他ページはロゴを出し分ける。

📁 shopify-snippets·MIT·40
🌐 SEO/構造化データ中級

Organization・WebSite・Product・Article構造化データ

ストア全体と個別ページ(商品・記事)の構造化データを schema.org 形式の JSON-LD で出力するスニペット。Organization タイプでショップ情報とソーシャルリンク、WebSite タイプでサイト検索、Product タイプで商品情報(価格・在庫・SKU・GS1 バーコード)、Article タイプでブログ記事メタデータを Google 検索のリッチリザルト表示に対応させる。

📁 ks-bootshop·MIT·126