商品情報にスキップ
1 1
公開日:2026.09.14

【Horizon】メタフィールドで追加した情報を、構造化データ(JSON-LD)にも動的に反映する

【Horizon】メタフィールドで追加した情報を、構造化データ(JSON-LD)にも動的に反映する

用途

  • SEO関連
詳細を表示する

【なぜ今、構造化データか】 Shopifyは2026年、エージェンティックコマース向けにUCP(Universal Commerce Protocol)という専用の商品情報取得口を用意しました。AIエージェントが専用のAPIエンドポイント経由で価格・在庫・商品詳細を取得できる仕組みです。ただしUCPは、そのエージェント側が明示的にプロトコルを実装している場合にしか使われません(リクエストごとにJSON-RPC形式・エージェントプロファイルの提示が必須)。UCPに対応していない検索エンジンのクローラーや、ページを直接読みにいくAIエージェントは、引き続きページ上の構造化データ(schema.org / JSON-LD)を頼りにします。

この点は海外の構造化データ専門家も指摘しています。
"Structured data remains the main foundation. Before an AI agent can buy a product or book a service, it has to find it."(構造化データは引き続き土台であり、AIエージェントが商品を購入する前に、まずそれを見つけられる必要がある)

【対応テーマ】このTIPSはHorizon限定です。 ブロックの中から「同じセクション内にある既存のld+jsonタグ」を探し当てる仕組み上、Horizonのsections/product-information.liquidという特定のファイル構成を前提にしています。Dawnなど他のテーマでは、構造化データを出力しているファイル・セクション構成が異なるため、そのままでは動作しません(テーマごとに、構造化データがどのセクションの中にあるかを確認し、コードを調整する必要があります)。

前回のTIPS(商品ごと・カテゴリごとに折りたたみ行の内容を出し分ける方法)で、商品メタフィールドとメタオブジェクトを使って表示を出し分けられるようになりました。ただしこれはあくまで「見た目」の話で、検索エンジンやAIエージェントが読み取る構造化データ(schema.org / JSON-LD)には反映されません。このTIPSでは、そのメタフィールドの内容を、構造化データにも動的に反映する方法を紹介します。

【重要】表示内容と構造化データは、必ず同じ値から生成すること。 「AIエージェント向けに、表示とは別の説明文を用意する」という設計は避けてください。Googleは構造化データについて「ページに実際に表示されている内容の忠実な反映でなければならず、ユーザーに見えない内容をマークアップしてはならない」という方針を明言しています。今回の実装は、表示に使っているのと同じメタフィールド・メタオブジェクトの値をそのまま構造化データに流用するため、この原則を自然に満たします。

表示している内容が、そのまま構造化データ(JSON-LD)にも入る

なぜHorizon標準の仕組みだけでは足りないか

Horizonの構造化データは {{ closest.product | structured_data }} という1行のフィルターで生成されています。このフィルターは価格・在庫・variantなどを含む完成済みのJSON文字列を返しますが、そのまま返すだけなので、あとから項目を追加することができません。かといってLiquidには文字列をJSONとして読み直すフィルター(他言語でのJSON.parse相当)が存在しないため、Liquid単体でこの文字列を分解・再構成することもできません。

また、この出力先である<script type="application/ld+json">タグ自体はsections/product-information.liquidというコアファイルの中にありますが、そこにidを振るような修正は不要です。新規ブロックの中でdocument.currentScript(実行中のscript要素自身)を取得し、.closest('.shopify-section')で同じセクション内を辿れば、コア側に一切手を加えずに既存のld+json scriptタグを特定できます。ただしこの仕組み上、ブロックの設置場所は「商品情報」セクションの中でなければいけません(別のセクションに置くと、同じセクション内にld+jsonが見つからず、何も反映されないまま静かに終了します)。

もう一方の「追加したいプロパティ」側は、DOM上の並び順(隣接している等)には依存していません。JSONアイランドにid="schema-extra-properties-{{ block.id }}"という一意のidを振り、document.getElementByIdで直接特定しているため、同じセクション内に他のブロック(script要素を含むもの)がいくつ増えても、他のブロックがこのブロックの前後どこに配置されても、正しく自分自身のIDだけを見つけます。

仕組み:1つのメタフィールドが表示と構造化データの2箇所に反映される

解決策:ブラウザ側でJSON-LDにマージする

フィルターの出力はそのまま残し、別途「追加したいプロパティ」だけをLiquidでJSONとして出力しておき、ページ読み込み時にJavaScriptで両者をマージします。Googleは「レンダリング後のDOMに存在する構造化データを処理できる」ことを公式に明言しており、この方法でもリッチリザルト・AIエージェントの両方に正しく認識されます。

・schema.orgのProduct型には「メタフィールドの追加情報」専用のプロパティが無いため、この用途の受け皿として用意されている additionalPropertyPropertyValueの配列)に格納します。

・ただし、動的生成された構造化データはクロール頻度・信頼性がやや落ちる、ともGoogleは明記しています。価格や在庫のような頻繁に変わる情報はフィルターの静的出力のまま触らず、今回のように補足情報だけを後付けする範囲であれば影響は限定的です。

設定手順

【ポイント】コアファイル(sections/product-information.liquid等、Horizon本体のファイル)は一切変更しません。 新規のプライベートブロックを1つ追加し、テーマエディタから「商品情報」セクションにブロックとして加えるだけで完結します。

◆1. コードエディタで blocks ディレクトリに schema-additional-property.liquid を新規作成し、コードを貼り付けます(コードはご購入後に表示されます)。

新規作成:blocks/schema-additional-property.liquid

◆2. テーマエディタで商品ページを開き、「商品情報」セクションの「ブロックを追加」から「構造化データに追加情報を反映」ブロックを追加します。「商品情報」セクションの中であれば、どこに配置しても構いません(他のブロックの前後どちらでも、ネストの深さも問いません)。見た目には何も表示されないブロックです。

◆3. コード先頭の設定部で、参照するメタフィールドのキーを自分のストアのものに書き換えます。

schema_product_description:リッチテキスト型の商品メタフィールドをmetafield_textフィルターでプレーンテキスト化
schema_category_guide_text:メタオブジェクト参照メタフィールドの先にある、リッチテキストフィールドを同様にプレーンテキスト化

【注意】リッチテキスト型のメタフィールドは、.valuestrip_htmlフィルターだけでは正しくプレーンテキスト化されません。(実際に検証中、値がリッチテキストの生データ構造のまま出力されてしまう不具合が発生しました。)必ず metafield_text フィルターを使ってください。

動作確認の方法

反映後、商品ページを開いてブラウザの「検証(Inspect)」でDevToolsを開き、Consoleで以下を実行すると、マージ後の内容を直接確認できます。

JSON.parse(document.querySelector('script[type="application/ld+json"]').textContent).additionalProperty

【注意】「ページのソースを表示」(view-source)ではこの内容は確認できません。 マージはJavaScriptがページ読み込み後にDOMを書き換える処理のため、サーバーが返す初期HTMLには表れません。必ず「検証」またはコンソールで、実行後のDOMを確認してください。

カスタマイズのポイント

今回は商品メタフィールドとメタオブジェクト参照の2種類を例にしましたが、additionalPropertyの配列に項目を追加すれば、他のメタフィールドも同様の要領で反映できます。

注意点

・動的生成した構造化データは、Google自身がクロール頻度・信頼性の面でやや不利になり得ると明記しています。価格・在庫等の変動が激しい情報はこの方式に含めないでください
・値が空のメタフィールドはadditionalProperty自体を出力しないため、余計な空文字列がスキーマに残ることはありません

商品ごと・カテゴリごとに折りたたみ行の表示を出し分ける方法自体はこちらのTIPSで紹介しています。

参考:
Google公式:Generate Structured Data with JavaScript
Google公式:General Structured Data Guidelines
Shopify公式:Build commerce agents with UCP
How Structured Data, WebMCP, and UCP Form the Trinity of Agentic E-Commerce

ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Horizon 4.1.4以降

blocks/schema-additional-property.liquid(新規作成)