【Shopify】SNSシェア時だけOGP画像を切り替える！自動リダイレクトを実装してSNS集客を最大化する方法（Dawn対応）

Shopify Web制作

【Shopify】SNSシェア時だけOGP画像を切り替える！自動リダイレクトを実装してSNS集客を最大化する方法（Dawn対応）

SNS集客の「あるある」ジレンマを感じたことはありませんか？

  • SNSのタイムラインで埋もれない「目を引くアイキャッチ」にしたい
  • でも、クリックしてストアに来たお客様には「洗練されたブランドの世界観」を見せたい
  • SNS用に別のLPを作るとURLが分散し、SEO評価も分かれてしまう…

通常、Shopifyの商品ページをシェアすると、ストアに登録している「1枚目の商品画像」がそのまま表示されます。しかし、タイムラインを流し見しているユーザーの指を止めるには、SNS専用のアイキャッチ画像が不可欠です。

「集客用のバナー画像」と「ストア用の商品写真」。この2つをURLを分けずに、スマートに使い分ける方法をご存知でしょうか？

この記事では、標準テーマ（Dawn等）のコードを編集するだけで、月額コスト0円で「SNS専用OGP画像への自動切り替え＆リダイレクト機能」を実装する全手順を公開します。

このカスタマイズで実現できること

この機能を導入することで、以下のようなマーケティング施策が可能になります。

  1. SNS専用画像の活用: 商品写真はそのままに、SNS上では「ランキング1位！」「期間限定20%OFF」などのコピーを入れた画像を表示
  2. 世界観の維持: ストアを訪れたユーザーには、文字のない洗練されたメイン画像を表示
  3. URLの統一: ?view=share というパラメータを付けるだけで、SEO評価を損なうことなくページ情報を出し分け
  4. 自動リダイレクト: SNSから来たユーザーを一瞬で通常の商品ページへ転送（JS使用）

ステップ1：商品メタフィールドの作成

商品ごとに「SNS専用画像」を登録するための「枠」を作ります。

  1. 管理画面の [設定] > [メタフィールドとメタオブジェクト] > [商品] へ移動。
  2. [定義を追加する] をクリック。
    • 名前: Share OGP Image
    • ネームスペースとキー: custom.share_ogp_image
    • タイプ: ファイル（画像のみを選択）
  3. 保存後、商品編集画面の最下部にあるメタフィールド欄から、SNSで出したい画像をアップロードします。

ステップ2：OGPと正規URLのコード編集

次に、Dawn等のOS2.0テーマで共通して使えるコードを追加します。

① OGP出力の書き換え

ファイル：snippets/meta-tags.liquid
（DawnテーマでOGPタグを管理しているファイルです）

1.ファイルの冒頭に、判定ロジックを追加します。

{%- liquid
  # 追加：シェア専用OGPの判定ロジック
  assign is_share_view = false
  if template.suffix == 'share' and product.metafields.custom.share_ogp_image != blank
    assign is_share_view = true
    assign share_image_url = product.metafields.custom.share_ogp_image | image_url: width: 1200, height: 630
  endif
-%}

2.画像出力部分（{%- if page_image -%} のあたり）を、以下のように「専用画像があれば優先する」形に書き換えます。

{%- if is_share_view -%}
  <meta property="og:image" content="https:{{ share_image_url }}">
  <meta property="og:image:secure_url" content="https:{{ share_image_url }}">
  <meta name="twitter:image" content="https:{{ share_image_url }}">
{%- elsif page_image -%}
  <meta property="og:image" content="http:{{ page_image | image_url }}">
  <meta property="og:image:secure_url" content="https:{{ page_image | image_url }}">
  <meta name="twitter:image" content="https:{{ page_image | image_url }}">
{%- endif -%}

Dawnでの完成系

{%- liquid
  # 追加：シェア専用OGPの判定ロジック
  assign is_share_view = false
  if template.suffix == 'share' and product.metafields.custom.share_ogp_image != blank
    assign is_share_view = true
    assign share_image_url = product.metafields.custom.share_ogp_image | image_url: width: 1200, height: 630
  endif
-%}


{%- liquid
  assign og_title = page_title | default: shop.name
  assign og_url = canonical_url | default: request.origin
  assign og_type = 'website'
  assign og_description = page_description | default: shop.description | default: shop.name

  if request.page_type == 'product'
    assign og_type = 'product'
  elsif request.page_type == 'article'
    assign og_type = 'article'
  elsif request.page_type == 'password'
    assign og_url = request.origin
  endif
%}

<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ og_url }}">
<meta property="og:title" content="{{ og_title | escape }}">
<meta property="og:type" content="{{ og_type }}">
<meta property="og:description" content="{{ og_description | escape }}">


{% comment %} シェア時の条件分岐 {% endcomment %}
{%- if is_share_view -%}
  <meta property="og:image" content="https:{{ share_image_url }}">
  <meta property="og:image:secure_url" content="https:{{ share_image_url }}">
  <meta name="twitter:image" content="https:{{ share_image_url }}">
{%- elsif page_image -%}
  <meta property="og:image" content="http:{{ page_image | image_url }}">
  <meta property="og:image:secure_url" content="https:{{ page_image | image_url }}">
  <meta name="twitter:image" content="https:{{ page_image | image_url }}">
{%- endif -%}

{%- if request.page_type == 'product' -%}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html }}">
  <meta property="og:price:currency" content="{{ cart.currency.iso_code }}">
{%- endif -%}

{%- if settings.social_twitter_link != blank -%}
  <meta name="twitter:site" content="{{ settings.social_twitter_link | split: 'twitter.com/' | last | prepend: '@' }}">
{%- endif -%}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ og_title | escape }}">
<meta name="twitter:description" content="{{ og_description | escape }}">

② 正規URL（Canonical）の修正

ファイル：layout/theme.liquid

1.layout/theme.liquid を開きます。
2.<head> タグの中を探し、以下の記述を見つけてください（通常、ファイルのかなり上の方にあります）。

<link rel="canonical" href="{{ canonical_url }}">

3.これを以下の条件分岐コードに書き換えます。

{%- if template.suffix == 'share' -%}
  {%- comment -%} シェア専用ページのときはcanonicalを出力しない {%- endcomment -%}
{%- else -%}
  <link rel="canonical" href="{{ canonical_url }}">
{%- endif -%}

ステップ3：シェア専用テンプレートと遷移セクションの作成

URLに ?view=share を付けたときにだけ動く「一瞬だけ表示されるページ」を作ります。

① テンプレートの作成（json）

  1. [新しいテンプレートを追加] > 商品 > json を選択。
  2. 名前を share にします。
  3. 中身を以下の最小構成に書き換えます。
  4. ※保存するとセクションがないよ、とアラームが出るので②を作った後に保存します。
{
  "sections": {
    "main": { "type": "main-product-share" }
  },
  "order": ["main"]
}

② 遷移用セクションの作成（liquid）

  1. [新しいセクションを追加] > 名前を main-product-share に。
  2. 以下のコードを貼り付けます。
<div style="text-align: center; padding: 150px 20px;">
  <p>商品ページへ移動しています...</p>
  <script>
    // 300ms待機してから、ブラウザ履歴を残さず通常ページへ
    setTimeout(function() {
      window.location.replace("{{ product.url }}");
    }, 300);
  </script>
  <noscript><a href="{{ product.url }}">移動しない場合はこちらをクリック</a></noscript>
</div>
{% schema %} { "name": "Product Share Redirect" } {% endschema %}

ステップ4：動作確認と運用のコツ

実装が完了したら、以下の手順でテストしましょう。

  1. ブラウザで開く: https://ドメイン/products/ハンドル?view=share
  2. SNSで確認: opengraph.xyz などのツールに上記URLを入力すると試せます。SNSで投稿するのもOKですが、世の中に出てしまわないように。

運用のコツ：SNS用画像は「1200 x 630」で！

XやLINEで最も目立つサイズは 1200 x 630 px です。このサイズで画像を作成し、ロゴや重要なテキストは上下左右から50pxほど内側に配置すると、どのデバイスで見ても端が切れずに綺麗に表示されます。

⚠️ 注意点：開発ストアやテスト時の「あるある」トラブル

このカスタマイズを実装する際、多くの開発者が直面する「画像が出ない！」という落とし穴があります。詰まった時は以下を確認してください。

  1. 開発ストアのパスワード保護: 開発中のストアにパスワードがかかっていると、XやLINEのボットが中身を読み取れずOGP画像が出ません。必ずパスワードを解除するか、本番公開後にテストしてください。
  2. SNS側の強力なキャッシュ: 一度SNSに投稿したURLは、数日間SNS側のサーバーに情報が保存されます。画像を変更したのに表示が変わらない場合は、URLの末尾に &v=1 など適当な数字を足して、「初めて見るURL」としてSNSに読み込ませるのが鉄則です。
  3. 「成功したか」を判定するツール:
    SNSに貼り付ける前に、必ず opengraph.xyz を使ってください。ここにあなたのURLを入力すれば、SNSボットが現在どう見えているかを判定できます。
    その他の問題点もチェックしてくれます。

まとめ

今回のカスタマイズを使えば、「SNSでクリックを誘う攻めの画像」と「ブランド価値を伝える守りの商品ページ」を一つの商品URLで両立させることができます。

特に新商品の発売時や、SNSでのUGC（ユーザー投稿）を狙う際、この「一手間」がクリック率、ひいては売上に大きく貢献します。アプリの月額費用を抑えつつ、SNS集客を強化したいオーナー様はぜひ試してみてください！

カスタマイズのご相談はこちら

自社ストアへの導入や、画像がどうしても切れてしまう、他テーマで動かない等でお困りの際はお気軽にお問い合わせください。

当ブログ お問い合わせフォーム
https://yurufuwacat.com/question/

MottuDesign公式HP CONTACTフォーム
https://mottu-design.com/contact/

-Shopify, Web制作
-, ,

Copyright© ゆるふわなねこ , 2026 All Rights Reserved.