Shopifyではホームや商品詳細、ブログなどSNSでシェアする際に表示されるOGP画像は標準で個別に設定できるのですが、「ページ」だけはそうなっていないため全てホームのOGP画像が表示されてしまいます。なので、こちらもメタフィールドを使って個別に設定できるようにしておくと便利です。
メタフィールドを作成する
snippets/meta-tags.liquidを編集する
テストツールで確認する
サンプルコード
動作検証済テーマ：Dawn/Rise 15.2.0
メタフィールドの値を優先的に呼び出すよう書き換える（メタフィールドの値がなければ通常のOGP画像を呼び出す）
{%- if page.metafields.custom.ogp -%}
<meta property="og:image" content="http:{{ page.metafields.custom.ogp | image_url }}">
<meta property="og:image:secure_url" content="https:{{ page.metafields.custom.ogp | image_url }}">
<meta property="og:image:width" content="{{ page.metafields.custom.ogp.width }}">
<meta property="og:image:height" content="{{ page.metafields.custom.ogp.height }}">
{%- elsif page_image -%}
<meta property="og:image" conte...