OGP画像とは｜SNSでリンクを開かせるサイズと作り方
同じリンクでも、シェアしたときに大きな画像が出るものと、味気ない文字だけのものがあります。この差を決めているのがOGP画像です。この記事では、仕組みと推奨サイズ、切れないデザインの作り方、表示されないときの確認手順をまとめます。
OGPはリンクの見た目を指定する仕組み
SNSやチャットにURLを貼ると、タイトル・説明文・画像がカード状に表示されます。これは各サービスがページを読みに行き、あらかじめ埋め込まれた指定を読み取っているためです。この指定の仕組みがOGP（Open Graph Protocol）です。
| 指定 | 役割 | 表示される場所 |
|---|---|---|
| og:title | カードの見出し | 画像の下、太字の1行 |
| og:description | 補足説明 | 見出しの下。表示されないサービスもある |
| og:image | カードの画像 | カードの大部分を占める |
| og:url | 正規のURL | ドメイン名の表示、集計の統合 |
| og:type | コンテンツの種類 | website や article を指定 |
指定がない場合、各サービスはページ内から適当な画像を拾うか、何も表示しません。意図しない画像（サイドバーの広告バナーなど）が選ばれることもあるため、シェアされる可能性のあるページには明示的に指定しておくのが基本です。
推奨サイズは1200×630px
主要なSNSで安定して大きく表示されるのは、横1200px・縦630pxの画像です。比率にすると約1.91対1で、この形が「大きいカード」として扱われる基準になっています。
- 1200×630px：迷ったらこれ。多くのサービスが基準にしている
- 最低でも600×315px：これを下回ると小さいカードに切り替わることがある
- 容量は1MB以内を目安に：大きすぎると読み込まれず、表示されないことがある
- 形式はPNGまたはJPEG：透過は無視され、白や黒で塗られる前提で作る
- 正方形の画像を指定すると、サービスによって左右が切られるか、小さく表示される
厄介なのは、表示先によって切り取られる範囲が違うことです。タイムラインでは横長のまま、別の場所では正方形に近い形で切られることがあります。そのため、端まで情報を詰めないことが実質的な必須条件になります。
小さく表示される前提でデザインする
OGP画像は、実際にはスマートフォンの幅で表示されます。1200pxで作ったものが、400px前後まで縮んで見えると考えてください。作業中の画面で読める文字が、実機では読めないことは珍しくありません。
- 1
①文字は20〜30文字までに絞る
日本語では20〜30文字が上限の目安です。それ以上入れると、縮小時にただの模様になります。説明はog:description側に任せます。
- 2
②文字サイズは1200px幅で60px以上
画像全体の高さの1割程度が最小ラインです。細いフォントは縮小に弱いため、太めの書体を選びます。
- 3
③背景と文字のコントラストを確保する
写真の上に文字を置くなら、暗い帯や半透明の板を敷いてから重ねます。写真の明るい部分に白文字を置くと、実機では消えます。
- 4
④縮小して確認する
書き出したあと、画像を400px幅程度に縮小して眺めます。何が書いてあるか一瞬で分からなければ、情報が多すぎます。
1200×630pxの画像をゼロから用意するのが手間な場合、プロフィールカードメーカーで作ったカードがそのまま使えます。出力されるPNGは1200×630pxで、OGPの推奨サイズと同じです。名前や肩書きを入れ替えるだけで、自己紹介ページやSNS共有用の画像として使い回せます。
画像が表示されないときの確認
| 原因 | 確認方法 | 対処 |
|---|---|---|
| キャッシュが古い | 以前シェアしたことがあるURLか | 各サービスのデバッガーで再取得する |
| 相対パスで指定している | og:imageの値 | https:// から始まる絶対URLに直す |
| 画像が重い | ファイルサイズ | 1MB以内に圧縮する |
| ログインが必要なページ | シークレットウィンドウで開けるか | 公開ページに置く |
| 形式が非対応 | 拡張子 | PNGまたはJPEGに変換する |
| 画像が小さすぎる | 縦横のpx | 600×315px以上、できれば1200×630pxにする |
最も多いのはキャッシュです。各SNSは一度読み取った内容を保持するため、画像を差し替えても古いカードが出続けます。公式のデバッグツールでURLを再取得すると更新されます。手元のブラウザで再読み込みしても効果はありません。
容量を落とす必要がある場合は、縦横のpxを保ったまま形式と品質を調整するのが定石です。1200×630pxのまま、JPEGに変換して品質を80〜90%程度にすると、見た目を保ったまま大きく削れます。
運用で押さえておくこと
- サイト共通の初期画像を1枚用意する。個別指定がないページでも空にならない
- ページごとに変える場合も、レイアウトの型は揃える。並んだときに同じ発信元だと分かる
- 画像のファイル名を更新のたびに変える。同じ名前だとキャッシュが残りやすい
- タイトルはog:titleに任せ、画像の中に同じ文字を大きく重ねない
- アイキャッチ画像とOGP画像は別物として用意する。記事上部の画像は縦横比が違う
4つ目は見落としやすい点です。カードでは画像のすぐ下にタイトルが表示されるため、画像の中にも同じ文言があると、同じ文字が2回並びます。画像側には短いキーワードや図版を置き、正確な内容はタイトルに任せると、情報量のバランスが取れます。
よくある質問
- OGP画像のサイズは何pxが正解ですか？
- 1200×630px（約1.91対1）が最も無難です。主要なSNSがこの比率を大きなカードとして扱うためです。最低でも600×315pxは確保してください。これを下回ると、小さいカード表示に切り替わることがあります。
- 画像を差し替えたのに古いものが表示されます。
- 各SNSがページの内容をキャッシュしているためです。公式のデバッグツールでURLを再取得すると更新されます。あわせて画像のファイル名を変更しておくと、キャッシュが残りにくくなります。手元のブラウザを再読み込みしても、SNS側の表示は変わりません。
- OGP画像を設定すると検索順位は上がりますか？
- 検索順位への直接の影響はありません。効果が出るのはSNSでシェアされたときのクリック率です。同じリンクでも、画像付きのカードとテキストのみのカードでは開かれる回数が変わるため、流入という意味では差が出ます。
- 透過PNGをOGP画像に使えますか？
- 使えますが、透明部分は表示先で白や黒に置き換えられます。ダークモードで見たときに文字やロゴが消える恐れがあるため、背景色を明示的に塗った状態で書き出すことをおすすめします。
この記事で紹介したツール
あわせて読みたい
画像の縦横比とサイズの基本｜切れない・ぼやけない画像の作り方
作った画像がSNSで上下を切られる、拡大したらぼやける。どちらも縦横比と解像度のルールを知れば避けられます。この記事では、比率が合わないと何が起きるのか、どのくらいの大きさで作ればよいのか、そして作った画像を用途に合わせて仕上げる手順をまとめます。
記事を読む →透過PNGとは｜背景が透明な画像の作り方と保存で失敗しないコツ
ロゴを貼ったら背景が白い四角のまま残った、透明にしたはずが保存すると背景がついている。透過の失敗は、たいてい保存形式の選び間違いで起きています。この記事では、透過の仕組みと形式ごとの対応、確認方法を整理します。
記事を読む →画像の容量を減らす方法｜アップロード制限に引っかかるときの対処
「ファイルサイズが大きすぎます」で提出できない、メールに添付できない。そんなときに効くのは、形式の変更と品質設定の2つです。どちらをどれだけ下げれば何MBになるのか、見た目を落とさずに減らす順番を、ブラウザだけで完結する手順とあわせて解説します。
記事を読む →