SNS投稿に最適なOGP画像の作り方

2026.02.08更新 2026.02.11

OGP SNS 画像作成 Web制作

ブログをシェアしたら画像が表示されない？

ブログ記事やWebサイトのURLをXやLINEでシェアしたとき、画像が表示されない、あるいは意図しない画像が表示された経験はありませんか？

この原因のほとんどは、OGP画像が正しく設定されていないことにあります。

OGP画像が適切に設定されていると、SNSでのクリック率が大きく変わります。ある調査では、OGP画像ありの投稿はなしの投稿と比較してエンゲージメント率が2〜3倍高いとされています。

この記事では、OGP画像の作成からSNSでの表示確認まで、一連の流れを解説します。

OGP画像とは

OGP（Open Graph Protocol）画像とは、WebページのURLをSNSでシェアしたときに表示されるサムネイル画像のことです。

HTMLの<head>タグ内に以下のようなメタタグを設定します。

<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの説明文" />

OGP画像の推奨サイズ

各SNSで最適に表示されるOGP画像のサイズは以下の通りです。

SNS	推奨サイズ	アスペクト比
X（Twitter）	1200 x 630 px	約1.91:1
Facebook	1200 x 630 px	約1.91:1
LINE	1200 x 630 px	約1.91:1
はてなブックマーク	1200 x 630 px	約1.91:1

どのSNSでも 1200 x 630ピクセル が共通の推奨サイズです。このサイズで作成すれば、主要なSNSすべてで適切に表示されます。

OGP画像を3分で作成する手順

ここでは、OGP画像ジェネレーターを使って実際にOGP画像を作成する手順を紹介します。登録不要で、ブラウザだけで完結します。

Step 1: タイトルを入力する

OGP画像に表示するタイトルを入力します。ブログ記事のタイトルがそのまま使えます。

ポイント: 長すぎるタイトルは途切れるため、30文字以内に収めるのがおすすめです。

Step 2: テーマとカラーを選ぶ

用途に合わせてテーマを選択します。

シンプル: 個人ブログ、技術記事に最適
グラデーション: 目を引きたいときに
ダーク: テック系・スタイリッシュな印象に

アクセントカラーも自由に変更できるため、サイトのブランドカラーに合わせましょう。

Step 3: 画像をダウンロードする

プレビューで仕上がりを確認したら、ダウンロードボタンをクリック。PNG形式で保存されます。

あとは、この画像をサーバーにアップロードして、HTMLのog:imageメタタグにURLを設定するだけです。

作成したOGP画像の表示を確認する

OGP画像を設定したら、各SNSでの表示を事前に確認することが重要です。設定ミスがあるとシェアしたときに画像が表示されません。

OGPチェッカーにURLを入力すると、X・Facebook・LINEでの表示プレビューをまとめて確認できます。

X(Twitter)カードの表示を詳しく確認する

Xでのシェアをとくに重視する場合は、Xカードプレビューアーで専用のプレビューを確認しましょう。

Xのカードには2種類の形式があります。

カード形式	画像サイズ	用途
Summary	正方形（小さめ）	ニュース記事、一般的なリンク
Summary Large Image	横長（大きめ）	ブログ記事、ビジュアル重視のページ

ブログ記事には Summary Large Image を推奨します。twitter:card メタタグに summary_large_image を設定してください。

<meta name="twitter:card" content="summary_large_image" />

Xカードプレビューアーでは、両方の形式でどのように表示されるかを並べて確認できます。OGPチェッカーとの使い分けは以下の通りです。

ツール	特徴
OGPチェッカー	全SNS（X・Facebook・LINE）の一括確認
Xカードプレビューアー	Xに特化、2種類のカード形式を比較

よくある設定ミスと対処法

症状	原因	対処法
画像が表示されない	`og:image`のURLが間違っている	画像URLに直接アクセスして表示されるか確認
古い画像が表示される	SNS側のキャッシュ	Xの Card Validator、FacebookのSharing Debuggerでキャッシュクリア
画像が切れて表示される	サイズが推奨サイズと異なる	画像リサイズツールで1200x630pxに調整
画像がぼやける	解像度が低い	元画像を高解像度で作り直す

画像サイズの調整が必要な場合

既存の画像をOGP画像として使いたいけれど、サイズが合わない場合は画像リサイズツールで調整できます。

SNSプリセットが用意されているため、「OGP（1200x630）」を選択するだけで最適なサイズにリサイズされます。アスペクト比ロック機能で画像の縦横比を維持したまま調整できるので、画像が歪む心配もありません。

OGP画像だけでなく、SNS投稿画像やプロフィール画像のサイズも気になる方は、SNS別の最適な画像サイズ一覧と変更方法も参考にしてください。

OGP画像作成のコツ

テキストは大きめに

SNSのタイムラインではOGP画像は小さく表示されることが多いため、テキストは大きめのフォントサイズで配置しましょう。スマートフォンの画面でも読める大きさが目安です。

情報を詰め込みすぎない

OGP画像はあくまで「クリックしてもらうためのきっかけ」です。伝えたい内容を1つに絞り、タイトル + サブテキスト程度に収めましょう。

ブランドの統一感を持たせる

同じサイトの記事であれば、OGP画像のデザインを統一すると、SNSのタイムラインで「あのサイトの記事だ」と認識してもらいやすくなります。

まとめ

OGP画像の設定は、SNSからの流入を増やすために欠かせない作業です。

作成: OGP画像ジェネレーターでタイトル・テーマ・カラーを設定して画像を生成
確認: OGPチェッカーでSNS表示をプレビュー
調整: サイズが合わない場合は画像リサイズツールで1200x630pxに変更

この3ステップで、SNSでの見栄えが大きく変わります。まずは、最新のブログ記事のOGP画像から試してみてください。

OGP画像と合わせて、メタディスクリプションの書き方も最適化すると、検索結果でのクリック率をさらに高められます。