OGP画像とは？SNSで見栄えを良くする基本設定ガイド

SNSでURLを貼ったのに地味…それ、OGP画像の設計不足かも。サイズやデザイン、CMS設定の勘所を押さえれば、クリック率は確実に変わります。

---

OGP（Open Graph Protocol）とは？

OGPは、URLをSNSやチャットで共有したときの“見た目”をコントロールする仕組みです。
ページのタイトル・説明文・サムネイル画像（＝OGP画像）を指定しておくことで、Facebook/Instagram、X（旧Twitter）、LinkedIn、LINE、Slackなどで狙い通りのカード表示が出ます。

なぜ重要か？

• CTR（クリック率）が上がる：同じリンクでもサムネ設計で差が出る
• ブランドの一貫性：どのSNSでも同じトーン&ビジュアルで露出できる
• 広告効果にも波及：指名検索や再訪が増え、最終的なCV効率改善に寄与

---

サイズ・比率の“安全ライン”（これだけ覚えればOK）

SNSごとに微差はありますが、実務で困らない共通仕様は以下。

• 推奨解像度：1200 × 630px（約1.91:1）
  • Facebook／LinkedIn／LINEで綺麗に出やすい
• X（旧Twitter）：1200 × 628〜675px（summary_large_image 前提）
• ファイル形式：写真系＝JPEG、ロゴ・図版＝PNG
• 容量目安：〜300KB前後に圧縮（重いと読込前に見過ごされる）
• セーフゾーン：上下左右各60pxは切れてもOKに。**重要要素は中央70%**へ

WebPは対応が広がる一方、スクレイパー互換で稀に不安定。OGPはJPEG/PNGが無難。

---

デザインの作法：見栄えとCTRを上げる5原則

1. 太く短い見出し（12〜16字×最大2行）で内容が一目で分かる
2. 高コントラスト（背景と文字の明度差をしっかり確保）
3. ブランド要素は“控えめ常時”（ロゴは右下に小さく固定）
4. 人物・プロダクトは大きく（顔は最強の停留要因）
5. テンプレ化（色替えだけで量産できるレイアウトをFigma/Canvaで用意）

まずは1200×630のテンプレを1枚作り、シリーズ運用で制作負担を最小化。

---

CMS／技術面の実装ヒント（コード不要で運用安定）

WordPress

• Yoast SEO / All in One SEO / Rank Math等のSEOプラグインで、投稿ごとにタイトル・説明・OGP画像を設定
• アイキャッチとOGP画像を別管理できる運用が理想（サムネ専用を用意）

ヘッドレス／SPA（Next.js・Nuxt 等）

• SSR/SSGでメタをHTML出力（CSRのみだと一部SNSで拾われないことあり）
• タイトル・説明・画像URLはルーティングごとに動的生成（例：/post/[slug]）

共通の落とし穴

• 相対パスやhttp混在で画像取得失敗 → 画像は絶対URL＆HTTPS
• リダイレクトでクエリが消失 → OGP画像URLは固定&安定を徹底
• SNS側キャッシュで古い画像が出続ける
  • 対策：Meta Sharing Debugger／X Card Validator／LinkedIn Post Inspectorで再スクレイプ
  • もしくは画像ファイル名にバージョン（ogp-v2.jpg）を付与

---

記事タイトルも“OGP映え”に最適化する

• タイトル（カード見出し）は全角28〜35文字前後で途切れ対策
• **サブコピー（要約）**は80〜120字で“読む理由”を明確化
• 画像内テキストとタイトルのメッセージを一致させる
• 数字・年号で具体性アップ（例：2025年最新版／全10ステップ）

---

広告運用との相乗効果

• 自然露出のCTR上昇 → 指名・再訪が増加：結果として獲得広告のCPA/ROASに好影響
• 広告の品質・関連性：LPとカードの一致感が上がるとCPC/CPMが改善しやすい
• 素材の再利用：OGPテンプレはそのままSNS広告の静止画として流用可能

---

チェックリスト（公開前30秒で最終確認）

• 画像は1200×630 / 〜300KB / 中央寄せで作成済み
• 重要テキストは**中央70%**に収め、縁の60pxは“捨て”
• タイトル28〜35字、要約80〜120字で統一感あり
• プラグイン等でページ固有のOGPを設定済み
• デバッガーで各SNSプレビューを確認＆キャッシュ更新

---

つまずきポイントQ&A

Q. 画像が出ない／古いままです
A. ほぼキャッシュ。各SNSのデバッガーで再スクレイプ、ダメなら画像名を改名。

Q. 何枚か試したい
A. 本文公開前に非公開プレビューURLで差し替え→デバッガー確認→本公開の順で。

Q. WebPは使える？
A. 互換の揺れが残るため、OGPはJPEG/PNG優先。ページ内表示のみWebP併用はOK。

---

まとめ：OGPは“最小コストのCTR改善”

OGPは1枚の画像と運用ルールで成果が変わる、費用対効果の高い改善領域です。
テンプレ化・CMS設定・再スクレイプの3点を標準化すれば、**毎回の投稿で“見栄え勝ち”**が狙えます。
設計からテンプレ作成、CMS実装までの一式支援も可能です。まずは最新記事1本から整えていきましょう。

集客ならコスパ広告くんに相談がおすすめ！

フォームでコスパ広告くんと相談してみる

※「コスパ広告くん」は弊社ボボコルンサルティング株式会社運用の、定額広告サービスです。