失礼なコメントから始まってしまい、大変申し訳ありませんが、
「shopify 商品スニペット」で検索した際に、あまりに参考になる上位サイトが無かったので
こんな記事を書いています。
これもAI時代の波でしょうか。
うーんでも、やっぱり「あ、これこれ」って備忘録は残しておきたいです。
私もいままで、数多くのエンジニアさんのそれに助けられてきましたので。
目次
スニペットファイルを作成する
Shopify 管理画面 → 「オンラインストア」→「テーマ」→「コードを編集する」
左メニューの snippets フォルダで「新しいスニペットを追加」
（JSONではなく、liquidファイルにしておきます）
名前は product-jsonld.liquid としておきましょう。
コピペで内容を保存
▼liquidファイルってエディターでの拡張子悩みました。（HTMLにしています。）
{%- comment -%}
product-jsonld.liquid
Structured Data (JSON-LD) for Product
{%- endcomment -%}
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{ product.title | escape }}",
"image": [
{% for img in product.images %}
"{{ img.src | img_url: 'master' }}"{% unless forloop.last %},{% endunless %}
{% endfor %}
],
"description":"{{ product.description | strip_newlines | escape }}",
"sku": "{{ product.variants.first.sku }}",
"mpn": "{{ product.variants.first.barcode }}",
"brand": {
"@type": "Brand",
"name": "{{ product.vendor | escape }}"
},
"offers": {
"@type": "Offer",
"url": "{{ shop.url }}{{ product.url }}",
"priceCurrency":"{{ shop.currency }}",
"price": "{{ product.price | money_without_currency | remove: ',' }}",
"priceValidUntil":"{{ 'now' | date: '%Y-%m-%d' }}",
"itemCondition":"https://schema.org/NewCondition",
"availability": "https://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}"
}
}
</script>ポイント解説
product.titleやproduct.priceなど、Liquid 変数をそのまま埋め込む| escapeや| strip_newlinesで JSON 中の文字化けを防止product.availableで在庫状況を判定- “price”: “{{ product.price | money_without_currency | remove: ‘,’ }}”にすることで、構造化データ上は数字の「,」を外しています。「1,500」など「,」が入ってしまうと販売者のリスティング項目でエラーが見受けられたため。
この辺は調べたり、AIと学習している中でのピックアップポイントでした。
商品テンプレートに読み込みを追加
テーマによって使うテンプレートが異なるとは思うのですが、
テーマ全体で商品ページだけに出したい場合、layout/theme.liquid の <head> 内に
下記記述を入れると確実です。
{% comment %} 商品ページなら構造化データを埋め込む {% endcomment %}
{% if template.name == 'product' or template.suffix == 'product' %}
{% render 'product-jsonld' %}
{% endif %}デバッグポイント
- Liquid のエラー：snippet 内で
{% if … %}やカンマの抜けがないか - ファイルパス：
snippets/product-jsonld.liquidに本当に保存されているか - 出力タイミング：同じページ内で別のスクリプトがエラーを起こして途中まで止まっていないか
正しく読み込まれているかテスト
Google 構造化データテストツール
https://developers.google.com/search/docs/appearance/structured-data?hl=ja
にて対象のURL等を読み込ませ、「商品スニペット」が検出されるかテストしましょう。
正しく読み込めていれば、下記の画像の様に検出されるはずです。
まとめ
shopifyにおけるコピペ記事ですが、こういったSEO要素でも少し頑張ろうとしている方向けの少し踏み込んだ内容になると、まだまだ少ない印象でした。
また、何か使い勝手の良い記事が書ければと思います。
ご覧いただきありがとうございました。
