Shopifyの「ページ」は、商品やブログとは異なり、SNSでシェアする際のOGP画像を標準では個別に設定できません。どのページをシェアしても、ホームと同じOGP画像が表示されてしまいます。
メタフィールドを使ってページごとにOGP画像を登録し、テーマ側で優先的に出力する方法です。Horizonテーマのカスタマイズ方針に沿って、ベンダーファイルを直接編集せずに実装します。
◆実装のメリット
・ページごとにSNSシェア時の画像をコントロールできる
・ベンダーファイル（meta-tags.liquid）を編集しないため、テーマ更新時にコンフリクトしない
・custom.globals.liquid に集約するので、今後のカスタマイズも一元管理できる
◆設定手順
①「ページ」のメタフィールド定義を追加（管理画面 → 設定 → カスタムデータ）
②layout/theme.liquid にcustom.globals の読み込み1行を追加
③snippets/custom.globals.liquid を新規作成し、OGPメタタグ出力コードを記述
OGP画像の仕組み
【設定手順①】「ページ」のメタフィールドを追加する
【設定手順②】ヘッダーグループにカスタムLiquidセクションを追加してコードを挿入
Dawn向けの同様のTIPSはこちらにあります。Horizonではこちらのブログ記事で紹介しているカスタマイズ方針に沿い、custom.globals.liquidを使うことで、テーマのオリジナルファイルを一切変更せずに実現しています。
