OGP画像の推奨サイズと作り方｜SNSで正しく表示させる設定まとめ
記事のURLをSNSに貼ったとき、画像なしのそっけないリンクになってしまう。あるいは画像は出るが文字が切れている。どちらもOGPの設定で解決します。この記事では、推奨サイズの根拠と、実際に正しく表示させるための設定をまとめます。
推奨サイズは 1200 × 630 px
結論から言うと、横1200px × 縦630px で作っておけば、主要なSNSで大きな崩れは起きません。
この数値には理由があります。
| 要素 | 内容 |
|---|---|
| 比率 | 約1.91:1（Facebookが推奨する比率） |
| 最小サイズ | 600×315px 未満だと小さいカードで表示されることがある |
| 高解像度対応 | 1200pxあれば、高精細ディスプレイでも粗くならない |
600×315（1.91:1）が最低ラインで、その2倍が1200×630です。「1.91:1を保ったまま、十分な解像度を確保する」というのが、この数値が定番になっている理由です。
SNSごとの見え方の違い
同じ画像でも、表示のされ方はプラットフォームで異なります。
| プラットフォーム | 挙動 |
|---|---|
| 1.91:1 でほぼそのまま表示 | |
| X（旧Twitter） | summary_large_image 指定時、2:1 に近い比率でトリミングされることがある |
| LINE | og:image を使用。正方形に近い形で切られることがある |
| Slack / Discord | 縮小表示。細かい文字は読めない |
重要なのは、上下が切られる可能性を前提に作ることです。 1200×630 で作っても、Xでは上下がわずかに削られる場合があります。
セーフエリアの取り方
崩れを防ぐ最も簡単な方法は、画像の中央部分に重要な要素を集めることです。
- 上下左右にそれぞれ60px以上の余白を取る
- タイトル文字は中央寄せにする
- ロゴや装飾は四隅ではなく、やや内側に配置する
これだけで、どのプラットフォームで切られても意味が通る画像になります。
文字サイズの目安
OGP画像はタイムライン上ではかなり小さく表示されます。 PCでも幅500px程度、スマートフォンでは横幅いっぱいでも実サイズは小さくなります。
1200×630 の画像内で、フォントサイズは48px以上を目安にしてください。本文用の20〜30px相当のサイズでは、タイムライン上でまず読めません。
文字数も詰め込みすぎないことが重要です。15〜25文字程度に収め、記事タイトルをそのまま入れるのではなく、要点だけを抜き出すほうが効果的です。
必要なmetaタグ
画像を用意しても、metaタグがなければ表示されません。最低限、次の5つを <head> 内に記述します。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />X向けには、カードの種類を指定します。
<meta name="twitter:card" content="summary_large_image" />summary_large_image を指定すると大きな画像付きカードになります。指定しない場合は小さなサムネイル表示になるため、この1行の有無で見た目が大きく変わります。
見落としやすい注意点
og:imageは絶対URLで指定する。 相対パス（/ogp.png）では読み込まれません- 画像はログイン不要で公開されている必要がある。 認証が必要な場所に置くと取得できません
og:titleはページの<title>とは別物。 指定がないとタイトルが表示されないことがあります
ファイルサイズにも上限がある
画像が大きすぎると、クローラーが取得を諦めて表示されないことがあります。1MB以内に収めるのが安全です。
1200×630のPNGは、内容によっては簡単に1MBを超えます。文字と単色背景が中心のOGP画像であればPNGでも軽く収まりますが、写真を使う場合はJPEGにするか、画像圧縮ツールで圧縮してから使ってください。
サイズが合っていない画像は画像リサイズツールで1200×630に調整できます。
作り方
デザインツールで毎回作るのは手間がかかります。記事ごとにOGP画像を用意するなら、テンプレート化して文字だけ差し替える運用が現実的です。
OGP画像生成ツールでは、テンプレートを選んでタイトル文字と色を指定するだけで、1200×630のPNGを生成できます。ブラウザ上で処理するため、アップロード不要でそのままダウンロードできます。
デザインに時間をかけるより、「サイトのどの記事も同じトーンで、タイトルだけが違う」状態を作るほうが、ブランドの認知という点では効果的です。凝った画像を数枚作るより、統一感のある画像を全記事に付けるほうが投資対効果が高くなります。
反映されないときの対処
設定したのに変わらない場合、原因はほぼキャッシュです。
各SNSは一度取得したOGP情報をキャッシュします。画像を差し替えても、しばらく古いものが表示され続けます。
対処法は次のとおりです。
- 各プラットフォームのデバッグツールで再取得する（Facebookのシェアデバッガーなど、提供されている場合）
- 画像のファイル名を変える（
ogp.png→ogp-v2.png）。URLが変われば別リソースとして取得されます - 時間を置く（キャッシュの保持期間はプラットフォームによって異なります）
2番が最も確実です。画像を更新する際は、上書きではなくファイル名を変えるのを習慣にしてください。
確認の手順
公開前に、次の順で確認すると手戻りがありません。
- metaタグが
<head>内に出力されているか（ブラウザの「ページのソースを表示」で確認） og:imageのURLを直接ブラウザで開いて、画像が表示されるか- 画像サイズが1200×630、ファイルサイズが1MB以内か
- 実際にSNSに下書きとして貼り、プレビューを確認する
4番を省略しないでください。 仕様どおりに設定していても、実際の表示は環境によって変わります。投稿前のプレビューで見るのが最終確認になります。
まとめ
- サイズは 1200×630px（1.91:1）
- 上下が切られる前提で、中央に要素を集める
- フォントは48px以上、文字数は15〜25字
twitter:cardにsummary_large_imageを指定するog:imageは絶対URL、1MB以内- 更新が反映されないときはファイル名を変える
OGP画像はクリック率に直結する要素です。凝ったデザインより、全記事に統一感のある画像が付いている状態を先に作ることを優先してください。