【SNS集客＆ブランディング】もうロゴ画像で損しない！Shopify固定ページごとのOGPサムネイル完全設定術

Knowledge

2025/07/16

--- 読者ターゲット ---
【はじめに】OGP画像が『ロゴ』になる落とし穴〜SNS流入の5割をこぼしていないか？
【理論編】OGPとは何か？〜Web担当が最低限知るべきSNS時代の“見栄え戦略”〜
【おさらい】Shopifyの固定ページだとなぜこの問題が起こるのか？
【本題】ページごとで自由なOGP画像・テキストを出すには？
必要なのは「メタフィールド」と「meta-tags.liquid」の２つだけ！
【最終版】SNSシェア画像を思い通りにするLiquidサンプルコード（meta-tags.liquid）
【修正ポイント】
実務で役に立つ実装＆運用フロー
1. メタフィールドを用意（1回でOK）
2. シェアしたい各ページで画像を登録（各ページごとに）
3. テーマコード（meta-tags.liquid）を最終コードへ更新
4. SNSで“思い通り”に画像が出ているか検証
SNSシェア画像の“ブランド価値”を最大化する運用
他CMSや他社ECとの差別化ポイント
よくあるQ&A
本記事で解説した「主な変更点・効果」
【他EC担当・担当者にもおすすめしたい「応用事例」】
【まとめ】OGP最適化は『攻め』と『守り』の両輪

「ShopifyでページをSNSでシェアしたら、いつも企業ロゴや意図しない画像ばかりが出て困る！」「ページごとにカスタムなサムネイルを出して、ブランディングもクリック率も最大化したい」そんな悩み、ありませんか？

本記事は、そんなEC担当者・ディレクター・web担当のために、Shopifyで全てのページに『任意のOGP（Open Graph Protocol）画像』を柔軟かつ再現性高く指定できる構築法をまとめます。

--- 読者ターゲット ---

ECをこれから立ち上げる方
Shopify運用初心者〜中級者
ブランドマネジメントやオウンドメディア担当
SNSシェア施策で“あと一歩”伸ばしたいマーケター
制作会社目線でShopifyの差別化技術を探したい方

【はじめに】OGP画像が『ロゴ』になる落とし穴〜SNS流入の5割をこぼしていないか？

まず、運営されているShopifyストアの固定ページ（例：会社案内、特集、ブランドストーリーなどを投稿するページ・URLに「page」パスの記載があるページ）をFacebookやLINE、X でシェアしたことはありますか？

画像がなぜかブランドロゴ…。
商品ページは大丈夫だが、「社長からのメッセージ」や「プロジェクト特設ページ」では狙った画像が出ない…。

コンテンツURLをSNSシェアしたとき、OGP画像（サムネイル）が思い通り出ない状態です。商品やブログでは個々のサムネイルがOGP画像として表示されるものの、固定ページはOGP画像（サムネイル）指定する項目がないため、ストアのブランドロゴが表示されてしまう課題に直面します…。

実はこの問題は、

サイト未実装やOGPタグの抜け
Shopifyテーマ既定のLiquid（テンプレート言語）ロジックの問題
画像への権限制約

など、様々な技術的事情が重なったShopifyでストアを運営していると度々直面する課題です。実際に筆者もEC事業者様から問い合わせも度々受ける問題です。

【理論編】OGPとは何か？〜Web担当が最低限知るべきSNS時代の“見栄え戦略”〜

『OGP（Open Graph Protocol）』とは、「ページがSNS等でシェアされた際に「どんな画像・タイトル・説明文」をSNS上に出すか指定できるmetaタグ」です。

この設定によって、

シェア時のアイキャッチ（サムネイル）が魅力的な商品画像になるか
読みたくなるキャッチコピーが出るか
世界観を壊さずブランド展開できるか

が左右され、 クリック率、会社全体の信頼感・PR力に影響します。

実際、SNS流入の6割超がOGP画像の見映えに左右されるという調査結果もあるそうです。

【おさらい】Shopifyの固定ページだとなぜこの問題が起こるのか？

Shopify標準テーマは

各ページで個別のOGP画像フィールドを持っていない
単に「画像がなければロゴ画像を出す」だけの単純ロジック

なので、固定ページでは「思ったOGP画像」が出せない構造なのです。

つまり、企業ロゴ固定・汎用バナーしか表示されないパターンになりがちです。

雑誌掲載特集ページ
オウンドメディア記事ページ
ブランドストーリー用ページ

このままではそれぞれの魅力が伝わらないです。

【本題】ページごとで自由なOGP画像・テキストを出すには？

必要なのは「メタフィールド」と「meta-tags.liquid」の２つだけ！

１．ページ用メタフィールドを用意する

管理画面「設定」→「メタフィールドとメタオブジェクト」→「ページ」
ページのメタフィールドの定義画面で「定義を追加する」ボタンを押下
画像型メタフィールド定義を追加（ネームスペース：ogp・キー：imageなど）

２．OGP画像をページごとにセットする

オンラインストア→「販売チャネル」→「ページ」
各ページの下部メタフィールド入力欄で「シェアしたい画像（推奨サイズ 1200x630px）」を登録

３．meta-tags.liquidを編集し、「条件分岐」による出し分け実装

【最終版】SNSシェア画像を思い通りにするLiquidサンプルコード（meta-tags.liquid）

※丸ごとコピペで動きます（テーマのmeta-tags.liquid内に入れましょう）
※利用テーマのテンプレートはDawnを想定しています、別のテンプレートでは異なる可能性もありますのでご留意ください。

{%- 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
　assign og_image = page.metafields.ogp.image

  if request.page_type == 'product'
    assign og_type = 'product'
  elsif request.page_type == 'article'
    assign og_type = 'article'
  elsif request.page_type == 'page'
    assign og_type = 'page'
  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 }}">

{%- if og_image -%}
  <meta property="og:image" content="https:{{ og_image | image_url: width:1200, height:630 }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
{%- elsif page_image -%}
  <meta property="og:image" content="https:{{ page_image | image_url }}">
  <meta property="og:image:width" content="{{ page_image.width }}">
  <meta property="og:image:height" content="{{ page_image.height }}">
{%- elsif settings.logo -%}
  <meta property="og:image" content="https:{{ settings.logo | image_url: width:1200, height:630 }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
{%- 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 }}">

【修正ポイント】

1：追記：6行目：設定したメタフィールドから画像データ取得

　assign og_image = page.metafields.ogp.image

2：追記：12～13行目：固定ページ用の条件追加

  elsif request.page_type == 'page'
    assign og_type = 'page'

3：修正：25～37行目：固定ページ用のOGP画像表示ロジック追加：固定ページ用カスタムOGP画像（og_image） > ページ画像（page_image） > ロゴ画像（settings.logo）の順に優先出力：settings.logoはテーマのカスタマイズ画面で設定した「ストアのロゴ画像」を参照します。

{%- if og_image -%}
  <meta property="og:image" content="https:{{ og_image | image_url: width:1200, height:630 }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
{%- elsif page_image -%}
  <meta property="og:image" content="https:{{ page_image | image_url }}">
  <meta property="og:image:width" content="{{ page_image.width }}">
  <meta property="og:image:height" content="{{ page_image.height }}">
{%- elsif settings.logo -%}
  <meta property="og:image" content="https:{{ settings.logo | image_url: width:1200, height:630 }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
{%- endif -%}

実務で役に立つ実装＆運用フロー

ここでは、具体的な手順と運用シーンを解説します。

1. メタフィールドを用意（1回でOK）

Shopify管理画面「設定 > カスタムデータ > ページ」で、「OGP画像」「シェア画像」など分かりやすい名前で画像型のメタフィールドを作成。例：名前空間=ogp / キー=image
ポイント: 一度設定すれば、すべての固定ページで使い回せます。

2. シェアしたい各ページで画像を登録（各ページごとに）

ページ編集画面下部のメタフィールド欄で、任意の画像をセット！ 1200×630px以上／SNS映えする勝負画像を選びましょう。
アイデア：

キャンペーンごとに限定バナー画像を設定
ブランドストーリーにはシンボリックな商品ビジュアルを
「スタッフ紹介」などは集合写真で『人感』を訴求

3. テーマコード（meta-tags.liquid）を最終コードへ更新

コード内のmeta property="og:image" ...の箇所を差し替え
追加・編集後は、必ずテーマのプレビュー・コード確認を行いましょう

トラブルポイント:

上述のコードコピペ時、 {%- liquid ... %}囲みや改行の抜けにご注意！
既存コードとの差分を確認しながら安全にアップデートしてください！

4. SNSで“思い通り”に画像が出ているか検証

Facebookシェアデバッガー
Facebookシェアデバッガー
実際にShopify管理画面の固定ページ設定画面にて追加したメタフィールドからOGP画像をセットし、Facebookシェアデバッガーで確認すると、下図の通りにセットした画像が実際にOGP画像として表示されていることが確認できます。
- LINEもLINE OGPデバッガー
- Twitter(X)はCard Validator
※キャッシュが残って画像が変わらない場合：「再取得」ボタンを2～3回押すと解消します。 すぐに反映されないのはSNS側の仕様なので焦らなくて問題ないです。

SNSシェア画像の“ブランド価値”を最大化する運用

OGP画像は単なる『飾り』でなく、流入設計の『カギ』です！

タイトル＋説明は見た人が10秒で興味をひかれる明快な文章に
画像は「誰＝ブランド」「何を伝えたいか＝商品の価値」「なぜ注目してほしいか＝訴求ポイント」をシンプルに入れましょう
期間限定・キャンペーン・ハッシュタグ情報を画像に入れ込むことで、自然拡散時に釘付けにできます。

【運用例】

セール開催中は全固定ページで共通OGPバナーに差し替え、煽り文句も流用
オウンドメディア記事はタイトル画像＆キャッチコピーを個別調整
新商品の特設ページは新商品登場とわかるデザインサムネイルを配置

他CMSや他社ECとの差別化ポイント

Shopifyでのこの実装は「だれでもノーコードで毎ページごとにSNS用サムネイルが変えられる」という大きなメリットがあります。
WordPressなど他CMSだとプラグインやカスタムHTMLで複雑な制御が必要となったり楽天やYahoo!の場合、ページ単位で明示的指定ができない事がほとんどです。

よくあるQ&A

Q1. ページごとに画像を設定しなかった場合はどうなりますか？
A. ページ自体のpage_imageがあればそれが、なければサイトロゴ（設定ファイル上の“settings.logo”）が出ます。OGP画像を必ず出すための構成になっています。

Q2. テーマによってロゴ変数が違うみたいですがどうすれば？
A. 一般的なShopify公式テーマなら上記コードでOKですが、もし独自テーマやバリエーションでロゴ画像変数が違う場合（例：header_logo等）は該当箇所だけ修正してください。

Q3. 画像を変えたのにSNSで切り替わりません…
A. SNS側のキャッシュが原因です。FacebookのシェアデバッガーやLINE OGPデバッガーで「再取得」を数回押してください。

Q4. コードを編集してサイトが崩れたら怖いです
A. 必ず「デフォルトテーマを複製」してから編集しましょう。本番反映前にテスト環境でコードを確認し修正前の状態に戻せることもチェックすると安心です。

Q5. OGPって設定して意味あるの？
A. SNSシェア経由のアクセス最大化・クリック率向上・ブランドイメージ統一・拡散コントロールができるため、現代の集客とブランディングには必須です。特にECでは売上やファン増加に大きく貢献します。

本記事で解説した「主な変更点・効果」

メタフィールド＋Liquid分岐で『ページごとの自由なサムネイル画像』を可能に
ロゴや汎用バナーをフォールバックにすることでOGPタグ抜けによるSEO/SNS拡散リスクも最小化
運用側でも『ノーコードで画像を切り替え』できるようにしたことでスピード施策が可能
各種SNSデバッガーやSEOベストプラクティスにも合致した設計

【他EC担当・担当者にもおすすめしたい「応用事例」】

期間限定セールやポップアップイベントのタイミングで、全固定ページのOGPサムネイルを共通告知バナーに変える
オウンドメディアの新着記事ごとに、その記事用のサムネイルを用意し、SNS拡散戦略を最適化
固定ページのCVR（コンバージョン率）が低い場合、OGP画像をABテストしてクリックや流入傾向を可視化

【まとめ】OGP最適化は『攻め』と『守り』の両輪

今やSNS時代、ページの顔＝OGP画像はクリック率やリピート率を決めるマーケティングの主戦場です。本記事で紹介したShopifyのOGPテクニックは、「攻め（拡散・集客）」と「守り（ブランドイメージ・被害リスク低減）」両方の観点で効きます。
「SNSでどんなふうに見えているか、ユーザーの目線で見直しを！」思うようにシェアが伸びない…そんな方はまず実施してみてください！