SNSでページを共有したとき、画像が切れる、古い画像が出る、何も表示されないと悩んでいませんか。OGPは、URLが共有された際にタイトルや画像などを伝える設定で、画像サイズだけでなくタグとキャッシュも表示へ影響します。
OGP画像は、複数のサービスで使いやすい1200×630pxを目安に作る方法が実務的です。ただし表示枠はサービスや端末で変わるため、重要な文字とロゴは中央寄りに置き、公開後に確認ツールと実機で確かめます。
この記事では、OGP画像の比率と安全な配置、タグの確認方法、表示されない原因と対処を解説します。画像を作るだけで終わらせず、共有先で正しく表示されるところまで確認できるようになります。
1. なぜ1枚のOGP画像で主要SNSに対応できるのか
1.1 およそ1.91対1という比率とOGP画像の推奨サイズ
Open Graphの基本仕様では、ページを表す画像をog:imageで指定します。タイトル・種類・URLなど必須項目の一覧はOpen Graph protocolの公式仕様で確認できます。
OGP画像は横1200px・縦630px、比率およそ1.91対1を実務上の目安にすると、主要なSNSで共用しやすくなります。サービスや表示場所によって切り抜き方は異なるため、完全に同じ見え方になるわけではありません。
1200×630pxを基本画像にし、重要な情報を中央へ置くと使い回しやすくなります。
ただし、実際に表示される枠は場所によって微妙に異なります。タイムラインでは横長のまま出ても、別の場所では上下が詰められたり左右が切り詰められたりするため、端に置いた要素は見えなくなることがあります。作るときは次の基準を目安にしてください。
- 推奨サイズは横1200px・縦630px
- 比率はおよそ1.91対1の横長
- 端は切り詰められる前提で余白を残す
最新の仕様はSNS側の更新で変わります。たとえばLinkedInはリンク画像を1.91対1（1200×627px）と案内しています。LinkedIn公式のリンク画像ガイドも確認し、1200×630pxを基本にしつつ、利用するSNSの表示を実機で確かめてください。
1.2 文字やロゴを画像の中央寄りに収める目安
切れてほしくない文字やロゴは、画像の中央に寄せて配置します。SNSによっては正方形に近い枠で表示され、左右が大きく削られるためです。配置するときは次の3点を確認してください。
- 1200×630pxの中央に630×630pxの正方形を想定する
- 読ませたい文字とロゴは中央の正方形内へ収める
- 上下左右に80〜100pxほどの余白を残す
背景や装飾は端まで伸ばしても構いませんが、意味を持つ要素は中央に集めます。作成後は縮小表示で見直してください。画像を含むWebコンテンツ全体の設計は、Webコンテンツ制作の進め方でも解説しています。
1.3 OGP画像の形式とファイル容量の目安
OGP画像は、形式と容量の条件を満たしていないと正しく読み込まれないことがあります。推奨サイズで作っても、ファイルが重すぎたり対応外の形式だったりすると表示されません。基本の条件は次の3点です。
- 形式はPNGまたはJPEG
- 最小で横600px・縦315px以上
- 容量は5MB以下が目安
写真が中心ならJPEG、文字やロゴが主役ならPNGを選ぶと崩れにくくなります。
容量の上限はSNSにより異なるため、5MB以下を目安に軽めへ抑えると安全です。まず1200×630pxで作り、書き出し時に容量を確認する順にすると、読み込み不良を防げます。凝った画像ほど容量が膨らみやすいので、公開前の確認を習慣にしておくとよいでしょう。
2. OGP画像が設定できているかを確かめる方法
OGP画像は、作るだけでなく設定できているかの確認が欠かせません。実際には、推奨サイズを気にする以前に、そもそも設定されていないサイトも見られます。ここではソースと確認ツールの両面から、確実に確かめる手順を紹介します。
2.1 ページのソースでOGP画像の設定を確認する手順
最も確実なのは、ページのソースを開いてog:imageタグを直接確認する方法です。特別なツールは不要で、パソコンのブラウザだけで数十秒あれば済みます。手順は次のとおりです。
- 確認したいページをブラウザで開く
- ページ上で右クリックし「ページのソースを表示」を選ぶ
- Ctrlキー+Fキー（Macはcommand+F）で検索窓を開く
- 「og:image」と入力して該当タグを探す
- content属性のURLをコピーし、ブラウザに貼って画像が開くか確かめる
タグが見つかり、URLの画像が単体で開けば設定は生きています。
og:imageが見つからない、またはURLを開いても画像が出ない場合は、設定が未完了か誤りです。
この確認をページごとに行っておくと、後で表示が崩れたときの原因も早く切り分けられます。
2.2 SNSの確認ツールでOGP画像をチェックする
ソースの確認とあわせて、各SNSの公式確認ツールも使います。URLを入力すると、取得された画像やタイトルをプレビューでき、古いキャッシュの再取得にも役立ちます。
- Metaのシェアデバッガー：Facebookで取得される情報を確認する
- LinkedIn Post Inspectorの公式手順：プレビュー確認とURL情報の再取得に使う
ソースでタグを確認し、共有先のツールで実際の見え方を確かめる二段構えが確実です。
画像を差し替えた直後は再取得を実行し、投稿前に文字切れや古い画像が残っていないか確認してください。
2.3 トップページ以外のページも確認する
確認はトップページだけで終わらせず、記事ページや固定ページも個別に見ておく必要があります。トップは表示されても、下層ページで画像が出ないケースがあるためです。
理由は、ページの種類ごとにOGPの設定箇所が分かれていることが多いからです。トップページはテーマ側、記事は投稿ごと、固定ページはさらに別の欄で指定する構成もあり、片方だけ設定して片方が空のままになりがちです。
シェアされやすい主要ページは、種類ごとに1ページずつ確認するのが安全です。
すべてのページを見る必要はありません。よく共有されるトップ、主要な記事、問い合わせ導線のあるページを優先し、代表的な数ページを確認すれば十分です。
2.4 OGP画像が未設定のときに何が表示されるか
OGP画像が未設定でも、SNSは何かを表示しようとします。ただし、その中身は意図しないものになりがちです。未設定時に起こることは、主に次のパターンに分かれます。
- ページ内の画像を自動で拾って表示する
- 拾える画像がなく、何も表示されない
- 意図しないバナーやアイコンが選ばれる
たとえば記事本文と関係のない広告バナーやサイトロゴが選ばれ、リンクの印象が伝わらないことがあります。設定漏れは珍しいことではなく、制作時に入れたまま見直されていないサイトも少なくありません。
推奨サイズを気にする前に、まず設定されているかどうかが分かれ目です。
設定漏れは特別なミスではなく、更新の体制が整っていないサイトほど起こりやすい傾向があります。だからこそ、確認を運用の手順に組み込む価値があります。
設定漏れがどのくらい起きているのか、実際のサイトを調べました。
調べたサイトの実測データ
調査対象2,249サイトのうち、トップページを取得できた1,998件でOGPタグを確認しました。画像を取得できた291件は実寸と比率も測定しています。
| 調査項目 | 集計対象 | 結果 |
|---|---|---|
| og:imageの設定 | 1,998件 | 302件（15.1%） |
| og:titleの設定 | 1,998件 | 76.1% |
| og:descriptionの設定 | 1,998件 | 75.8% |
| 1200×630px以上 | 画像291件 | 71.1% |
| 比率がおよそ1.91対1 | 画像291件 | 36.1% |
| 正方形に近い画像 | 画像291件 | 16.5% |
出典：株式会社プロパゲート 自社調べ（2026年9月30日時点）
この調査から読み取れるポイントは、次の2つです。
- タイトルと説明文より、OGP画像の設定が抜けやすい
- 画像を設定していても、約3分の2は1.91対1から外れている
まずog:imageの有無を確認し、設定済みなら画像の比率と見え方を確認する順番で進めると、修正箇所を判断しやすくなります。
3. OGP画像がうまく表示されないときの原因
表示だけでなく読み込み速度も気になる場合は、Core Web Vitalsの指標と確認方法もあわせて確認しましょう。
OGP画像がうまく出ないときは、原因を順に切り分けると早く解決します。疑うのは主に、文字の配置、キャッシュ、パスの書き方、そして画像以外の設定です。ここでは症状別に対処を整理します。
3.1 文字が切れて読めないとき
文字が切れる主な原因は、重要な要素を画像の端へ置いていることです。正方形に近い枠では左右から切り抜かれるため、次の順番で配置を見直します。
- 読ませたい文字とロゴを中央の630×630px以内へ寄せる
- 背景や装飾だけを画像の端まで伸ばす
- 縮小表示し、文字が小さすぎないか確認する
意味を持つ要素を中央へ集めると、切り抜かれても要点が残ります。
3.2 変更したのに古い画像が出るとき
画像を差し替えたのに古いものが出るときは、SNS側のキャッシュが原因です。SNSは一度取得したOGP情報を保持するため、更新がすぐには反映されません。次の手順で再取得を促します。
- 各SNSの確認ツール（シェアデバッガー等）を開く
- 該当ページのURLを入力する
- 「再取得」または「Scrape Again」に当たるボタンを押す
- 表示された画像が新しいものに変わったか確認する
キャッシュは自然に消えるのを待つより、確認ツールから再取得するほうが早く反映されます。
それでも古いままなら、画像のURL自体が変わっていない可能性もあります。ファイル名を変えて差し替えると、別画像として認識されやすくなります。
3.3 OGP画像がまったく表示されないとき
画像がまったく表示されないときは、原因を一つずつ確認すると解決に近づきます。代表的な原因と対処を整理しました。
| 原因 | 起きていること | 対処 |
|---|---|---|
| タグ未設定 | og:imageが書かれていない | タグを追加し画像URLを指定する |
| 画像URLが開けない | リンク切れ・非公開 | 公開状態の正しいURLに直す |
| 容量超過 | ファイルが重すぎる | 5MB以下に圧縮する |
| 形式が非対応 | 対応外の拡張子 | PNGまたはJPEGで書き出す |
| 相対パス指定 | URLが相対で書かれている | 絶対URLに書き換える |
まずタグの有無を確かめ、次にURLが単体で開くかを見ると切り分けが進みます。多くの場合、この表のどれかに当てはまります。一つ直すごとに確認ツールで再取得し、表示が戻るかを確かめましょう。
3.4 パスが相対URLになっているとき
og:imageに指定する画像のパスは、必ず絶対URLで書きます。「/images/ogp.png」のような相対パスでは、SNSが画像の場所を特定できず読み込まれません。
絶対URLとは「https://」から始まる完全なアドレスです。たとえば「https://example.com/images/ogp.png」のように、ドメインを含めて記述します。ページ上では画像が見えていても、OGPの指定が相対のままだとSNS側では取得に失敗します。
og:imageは、必ずhttpsから始まる絶対URLで指定してください。
自作のHTMLで設定している場合に起こりやすいミスです。設定後は、URLをコピーしてブラウザに貼り、画像が単体で開くかを必ず確かめておきましょう。
3.5 OGP画像以外に見直したい設定
OGPは、画像だけを整えても十分に伝わらないことがあります。タイトルや説明文が古いままだと、正しい画像でも内容が届きません。画像とあわせて見直したいのは次の点です。
- og：titleが最新のページ内容と合っているか
- og：descriptionが古い説明のままになっていないか
- 画像の中に文字情報を詰め込みすぎていないか
タイトルと説明は、リンクをクリックするかの判断に直結します。画像に長い文章を載せるとサムネイルでは読めないため、要点だけに絞るほうが伝わります。
画像・タイトル・説明の3つをそろえて更新することが、クリックにつながります。
画像そのものの軽量化や見せ方は、画像の最適化の考え方もあわせて確認すると、表示速度と印象の両面で効果が出ます。
4. プロパゲートのサブスクWEB制作でOGP画像とサイトを整える
ここまでの確認や修正を自社だけで続けるのは、体制がないと負担になります。OGP画像や細かな設定まで手が回らない事業者に向けて、プロパゲートのサブスクWEB制作という選択肢を紹介します。
4.1 どんな悩みや事業者に向いているか
OGPの設定は一度で終わりではなく、ページを増やすたびに発生します。専任の担当がいないと、次のような状況に陥りがちです。
- 新しいページを作っても設定まで手が回らない
- 誰が更新するか決まっておらず放置される
- 修正しても正しく反映できているか確認できない
こうした状態が続くと、SNSでシェアされても意図した画像が出ず、せっかくの発信が伝わりません。
設定や更新を任せられる体制があるかどうかが、継続の分かれ目になります。
社内にWeb専任を置きにくい中小企業や個人事業主ほど、外部に運用を委ねる意味が大きくなります。
4.2 サブスクWEB制作の特徴と検討時の補足
プロパゲートのサブスクWEB制作は、月額制で制作から運用・改善までを一貫して任せられるサービスです。OGP画像の設定のような細かな作業も、公開後の運用の中で継続して対応できます。
制作して終わりにせず、月次で改善を続ける運用体制が特徴です。
困ったときはLINEやメールで相談でき、1営業日以内に返答が届くため、設定の疑問をため込まずに済みます。初期費用を抑えて始めたい事業者にとって、月額制はまとまった予算を用意しにくい段階でも着手しやすい形です。
まずは今のサイトで何が不足しているかを整理し、任せたい範囲から相談する進め方もできます。
＼月額制で制作から公開後の改善まで／
5. OGP画像に関するよくある質問
ここでは、OGP画像についてよく寄せられる疑問に答えます。本文で触れきれなかった点を中心に、判断に役立つ形で整理しました。
5.1 正方形でもOGP画像として使えますか？
結論として、汎用的に使うなら1200×630pxの横長が無難です。正方形の画像も表示自体はされますが、多くのSNSが横長の枠で扱うため、上下が切れて印象が変わりやすくなります。
どうしても正方形の素材を使う場合は、上下が削られる前提で中央に主要な要素を収めてください。1枚で幅広く対応させたいなら、比率およそ1.91対1の横長で作るほうが崩れにくく、作り分けの手間も減ります。
5.2 画像の設定はSEOにも影響しますか？
OGPの設定は、検索順位を直接左右する要素ではありません。検索エンジンが順位を決める指標としてOGP画像を使うわけではないためです。
ただし、SNSでシェアされたときの見た目が整うと、クリック率や拡散のされやすさは変わります。その結果として流入が増えれば、サイト全体の評価に間接的につながる場合があります。順位対策そのものというより、流入経路を広げる施策として捉えるのが実態に合います。
5.3 LINEで送るとOGP画像の見え方が違うのはなぜですか？
LINEで見え方が違うのは、LINEがURL単位でOGP情報を独自に取得し、保持するためです。他のSNSと取得のタイミングやキャッシュの持ち方が異なると、反映にずれが出ます。主な理由は次のとおりです。
- トークやVOOMがURLごとにOGP情報を取得・保持する
- 取得のタイミングが他のSNSと異なる
- キャッシュが残り、更新前の画像が出ることがある
画像を差し替えた直後は、古いプレビューが表示される場合があります。少し時間を置くか、別のトークで送り直すと、最新の状態を確認しやすくなります。
6. まとめ：OGP画像は1200×630pxで作り、まず設定を確認しよう
OGP画像は1200×630px・比率およそ1.91対1を基本にすると、主要なSNSで共用しやすくなります。ただし、サイズを整える前に、そもそもog:imageが設定されているかを確認してください。
確認の具体的な手順は本記事の2章を参照してください。自社での対応が難しいときは、サブスクWEB制作で設定から運用まで相談できます。
＼OGP画像の設定から公開後の更新まで／