ECサイトのOGP設定完全ガイド — SNSシェアで差がつく設定方法

OGPとは — なぜECサイトで重要か

OGP（Open Graph Protocol）は、WebページがSNS（X、Facebook、LINE、Slack等）でシェアされた際の表示内容を制御するメタタグ規格です。

ECサイトにとってOGPが重要な理由は明確です。商品がSNSでシェアされた際の表示品質が、クリック率（CTR）に直結するからです。

適切な商品画像、魅力的なタイトル、価格情報が表示されるシェアカードと、画像なし・タイトル不明のシェアカード。どちらがクリックされるかは明らかです。

基本のOGPメタタグ

以下が全ページに設定すべきOGPタグです：

<!-- 基本OGP -->
<meta property="og:title" content="商品名 | ストア名">
<meta property="og:description" content="商品の魅力を120文字以内で">
<meta property="og:image" content="https://example.com/img/product.jpg">
<meta property="og:url" content="https://example.com/products/xxx/">
<meta property="og:type" content="product">
<meta property="og:site_name" content="ストア名">
<meta property="og:locale" content="ja_JP">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_account">
<meta name="twitter:title" content="商品名">
<meta name="twitter:description" content="商品の説明">
<meta name="twitter:image" content="https://example.com/img/product.jpg">

ページ種別ごとの最適設定

トップページ

| プロパティ | 推奨値 |
|-----------|--------|
| og:type | website |
| og:title | ストア名 + キャッチコピー |
| og:image | ストアのメインビジュアル |
| og:description | ストアの特徴を簡潔に |

商品ページ

| プロパティ | 推奨値 |
|-----------|--------|
| og:type | product |
| og:title | 商品名 + 最重要属性 |
| og:image | 商品メイン画像（白背景推奨） |
| og:description | 価格・特徴・USPを含む |
| product:price:amount | 数値のみ |
| product:price:currency | JPY |

カテゴリページ

| プロパティ | 推奨値 |
|-----------|--------|
| og:type | website |
| og:title | カテゴリ名 + ストア名 |
| og:image | カテゴリの代表画像 |

ブログ記事

| プロパティ | 推奨値 |
|-----------|--------|
| og:type | article |
| og:title | 記事タイトル |
| og:image | アイキャッチ画像 |
| article:published_time | ISO 8601形式 |

og:imageの推奨サイズと仕様

最重要 og:imageの推奨サイズ

SNSシェアの見栄えを決定する

| SNS | 推奨サイズ | アスペクト比 |
|-----|----------|-------------|
| X（Twitter） | 1200×628px | 1.91:1 |
| Facebook | 1200×630px | 1.91:1 |
| LINE | 1200×628px | 1.91:1 |
| Slack | 1200×630px | 1.91:1 |

結論：1200×630px（1.91:1）が全SNS対応のベストサイズ。

画像の最低条件：

幅600px以上（Facebookの最低要件）

ファイルサイズ8MB以下

形式はJPEGまたはPNG（WebPはSNSによって非対応）

絶対URLで記述（https:// から始まるフルURL）

ECサイトでよくあるOGPミス

ミス1 og:imageが未設定 or 相対URL

影響：致命的

og:imageが設定されていないと、SNSクローラーがページ内から適当な画像を拾って表示します。ロゴマークが表示されたり、フッターのバナーが表示されたり、予測不能な結果になります。

特に多いのが相対URL（/img/product.jpg）での記述。og:imageは絶対URL（https://example.com/img/product.jpg）が必須です。

ミス2 全ページ同じog:image

影響：高

テンプレートでog:imageをサイト共通のロゴ画像に固定しているケース。商品ページがシェアされても商品画像が表示されず、購買意欲を喚起できません。

CMSやECプラットフォームの設定で、商品メイン画像をog:imageに動的出力する設定を確認してください。

ミス3 og:titleとtitleタグの不一致

影響：中

SEO用のtitleタグ（キーワード詰め込み型）とog:title（SNS向け訴求型）を分けて設定するのは良い手法ですが、内容が大きく乖離していると不信感を与えます。

titleタグ: ブランド名商品名カテゴリ | ストア名 （SEO最適化）
og:title: 商品名 — ストア名 （可読性重視）

ミス4 og:site_nameの未設定

影響：低 og:site_name がないと、Discord・Slackでシェアされた際にドメイン名がそのまま表示されます。ブランド名を設定してください。

OGPの確認方法

設定したOGPが正しく反映されているかは、以下のツールで確認できます：

X（Twitter）: Card Validator
Facebook: Sharing Debugger
LINE: LINE URL Scheme Simulator

キャッシュが残っている場合は、上記ツールでURLを再スクレイピングすることでキャッシュを更新できます。

まとめ

OGPの設定は「一度やれば終わり」ではありません。新商品の追加やデザイン変更のたびに、og:imageが正しく設定されているか確認する習慣を持ってください。

最低限押さえるべき3点：

全商品ページに動的og:image（商品メイン画像を1200×630pxで出力）

絶対URL（相対URLは全SNSでエラーの原因）

og:site_name（ブランド認知の基本）

PagePulseの「SEO」カテゴリは、OGPメタタグの設定状況をワンクリックで自動チェックします。設定漏れや推奨サイズとの不一致を即座に検出できます。